Frage stellen

Hover efekt für images

9.2k Aufrufe
Gefragt in Webseiten HTML von
Hallo!

Wie macht man in html ein link-bild mit einem hover effekt?
das geth irgendwie nicht:

<style>
A:link {color:"colorcode"; text-decoration: (none, underlined, bold, italic, other)}
A:visited {color:"colorcode"; text-decoration: (none, underlined, bold, italic, other)}
A:hover {src="img/btn2.jpg"}
</style>
<title>asdfasdfasdfasdf</title>
</head>
<body>
<h1>asdfasdfasdfasdf!</h1>
<A href="index.html">
<img src="img/btn.jpg" alt="Pic not present" />
</A>


danke!

4 Antworten

0 Punkte
Beantwortet von
Mit HTML gibt's gar keine Hover-Effekte!

Dein CSS-Code "geht nicht", weil er kompletter Quatsch ist!

Wie CSS richtig geht kannst du bei SelfHTML nachlesen.

Eine Variante, die zwar funktioniert, aber dennoch nicht empfehlenswert ist:
<style type="text/css">
a:link {
display:block;
width:200px;
height:100px;
background-image:url(img/btn.jpg);
}
a:hover {
background-image:url(img/btn2.jpg);
}
</style>
...
<a href="bla.htm"></a>
0 Punkte
Beantwortet von computerfreaki Mitglied (219 Punkte)
Hover-Effekte werden meist mit JavaScript realisiert:
hier dein Bild:
<img src="bild_norm.jpg" alt="" />


Jetzt fügst du event-Handler hinzu:
<img src="bild_norm.jpg" alt="" onmouseover="this.src='bild_hover.jpg';" onmouseout="this.src='bild_norm.jpg'" />


mfg
computerfreaki
0 Punkte
Beantwortet von
0 Punkte
Beantwortet von
@solo: das ist die Kunst, das was Computerfreaki direkt in die event-Attribute geschrieben hat, in unnötig komplizierte (und damit unnötig bremsende) Funktionen zu setzen. scnr
...