• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

problem mit dem code; ich möchte ein hover mit bild

Status
Für weitere Antworten geschlossen.
E

elpee

Neues Mitglied
hi, könnt ihr von meinem code aus erkenne was ich falsch gemacht habe?
ich möchte das wenn ich mit der maus auf das bild news gehe das andere mit dem hover effekt kommt..

HTML: 
a:hover#news
{
background: url(news2.gif) 
}
</style>

</head>
<body>
<div class="header">
<p align="center"><a href="http://www.cheyenne.de.tp"><img src="img/head.jpg" border="0"></a>

<br>

<img src="img/navi/rand.png" border="0">

<a id="head" href="about cheyenne.html"><img src="img/navi/aboutme.png" border="0"></a>
<a id="news" href="news.html"><img src="img/navi/News.png" border="0"></a>
elpee
 
Du hast leider nur einen kleinen Teil deines Quellcodes gezeigt. Um dein Problem zu lösen setze doch die Bilder als Hintergrundbilder ein. Z.B. so:

CSS:
Code: 
a {
 display: block;
 width: 100px;
 height: 100px;
 background-image: url(bild.gif);
}

a:hover { background-image: url(bild2.gif); }
HTML:
Code: 
<a href="link.html">&nbsp;</a>
 
so habe ich ws schon die ganze zeit versucht. aber es wird immer nur so viel angezeigt wie ich zwischen die a tags schreibe, in deinem beispeil jetz das &nbsp;.
aber ich möschte ja nichts schreiben, sondern einfach nur ein bild haben dass sich bei hover verändert!

elpee
Ps ich poste mal den gesamten code:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>cheyenne Designs - Projects - graphics animations videoclips</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">


</style>

</head>
<body>
<div class="header">
<p align="center"><a href="http://www.cheyenne.de.tp"><img src="img/head.jpg" border="0"></a>

<br>

<img src="img/navi/rand.png" border="0">

<a id="head" href="about cheyenne.html"><img src="img/navi/aboutme.png" border="0"></a>
<a id="head"><a href="news.html"><img src="img/navi/news.png" border="0"></a>
<a id="Projects" href="Projects.html"><img src="img/navi/Projects.png" border="0"></a>
<a id="head" href="Designs.html"><img src="img/navi/designs.png" border="0"></a>
<a id="head" href="Photos.html"><img src="img/navi/Photos.png" border="0"></a>
<a id="head" href="Movies.html"><img src="img/navi/Movies.png" border="0"></a>
<a id="head" href="contact.html"><img src="img/navi/contact.png" border="0"></a>

<img src="img/navi/rand.png" border="0">
</p></div>
<div id="content">


<img src="img/Überschriften/projects.png"><br>

<img src="img/Projects/lucidmusik.png"> 

<br>
<b>Lucids Myspace Seite</b><br><br>
Mein aktuelles Projekt ist die <br>Unterhaltung und Gestaltung der <br>Myspace Seite des<br> ambitionierten Rappers Lucid.&nbsp;
<a href="Projects_lucidmusik.html">mehr</a>
<br>
<br>
<br>



<img src="img/Projects/sge4ever1.png">
<br>
<b>Wallpaper für sge4ever.de</b><br><br>
Bei diesem schon beendeten Projekt,<br> habe ich für die Eintracht Frankfurt<br> Fan- Homepage einige Wallpapers<br> erstellt,<br> die hier vorstellen möchte.&nbsp;
<a href="Projects_sge4ever.html">mehr</a>







</div>
<div class="footer"><p align="center"><img src="img/footer.jpg" ></p></div>
</body>
</html>

<!--
a
{ 
color:#ffffff; font-weight:bold;
}-->

und dann nochmal die style.css

HTML: 
body 
{
background-color:#808080;padding:0px; margin:0px;color:white;font-family:verdana;
}
.footer
{
background-color:#808080; 
margin-top:40%; 
}
.header
{
background-color:#808080; margin:0px;
}

div#content
{ 
background-color:#808080; margin-left:25%;position:absolute;overflow:auto;width:50%;height:52%;margin-top:2%
}

a
{ 
color:#ffa500; font-weight:bold;
}
 
<a>...</a> ist nun eben mal Inline-Element. Deshalb siehst Du eben nur soviel vom Hintergrund, wie im Elemnt steht. z.B. eben &nbsp;

gib dem <a>...</a> ein display:block; und die benötigte Höhe bzw. Breite. Dann dürfte es klappen.;-)
 
hab ich doch schon oft versucht wie sinst was..
aber ich werde es noch oft weiter probieren

elpeee
 
Nur für Dich auf einem Tablett aus Silber:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Hover</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<style>
a{
display:block;
width:50px;
height:50px;
border:1px solid black;
}
a:hover{
background-image:url(http://www.sender-kreuzberg.de/LOGO/testbild.gif);
}
</style>
<body>
<a href="#"></a>
</body>
</html>
 
es klappt...
danke übrigens für das silberbesteck!!!
es ist zwar alles falsch ausgerichtet, aber das wird!
DANKE

elpee
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben