73%
22%
19%
11%
6%
Samstag, 27. Oktober 2007, 22:31
hover effekt?!
hi
ich bekomms nicht hin: ich habe ein bild verlinkt und will jetz als hover effekt das wenn man über das bild fährt mit der maus ein andres bild kommt.
mach ich was falsch oder geht das gar nicht?
mfg
ich bekomms nicht hin: ich habe ein bild verlinkt und will jetz als hover effekt das wenn man über das bild fährt mit der maus ein andres bild kommt.
|
Quellcode |
1 2 3 |
div { border:2px solid #999; }
#home { background-color:red; }
#home a:hover { background-image:url( home_hover.jpg); }
|
mach ich was falsch oder geht das gar nicht?
mfg
Samstag, 27. Oktober 2007, 22:52
Also
wäre ohne Leerzeichen vor home_hover richtig.
Das ganze funktioniert aber nur, wenn der Link nicht ein Bild wie z.B.
ist sondern es ein "Linkbereich" ist der über a:link auch ein bg Bild hat.
Ich hoffe du verstehst was ich meine. Du kannst nur Hintergrundbilder austauschen. Also in etwa so dann:
|
|
Quellcode |
1 |
#home a:hover { background-image:url( home_hover.jpg); }
|
wäre ohne Leerzeichen vor home_hover richtig.
Das ganze funktioniert aber nur, wenn der Link nicht ein Bild wie z.B.
|
|
Quellcode |
1 |
<a href="#"><img src="foo.baar" /></a> |
Ich hoffe du verstehst was ich meine. Du kannst nur Hintergrundbilder austauschen. Also in etwa so dann:
|
|
Quellcode |
1 2 |
#home a:link { background-image:url (home_link.jpg); }
#home a:hover { background-image:url (home_hover.jpg); }
|
Don't Panic!
Echte Zombies rennen nicht!
Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Heini« (27. Oktober 2007, 22:53)
Sonntag, 28. Oktober 2007, 08:22
@Heini: ich verstehs nich.
ich hab das jetz mal so gemacht:
fnktioniert aber nicht.
kann mir nicht jemand den richtigen quelltext posten?
ich hab das jetz mal so gemacht:
|
|
Quellcode |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<style type="text/css">
<!--
-->
div { border:2px solid #999; }
#home { background-color:red; }
#home a:link { background-image:url (home_link.jpg); }
#home a:hover { background-image:url (home_hover.jpg); }
</style>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<div id="home"><a href="#"><img src="home_link.jpg" width="80" height="40" border="0" alt="Home" class="home"></a> </div>
</body>
</html>
|
fnktioniert aber nicht.
kann mir nicht jemand den richtigen quelltext posten?
Sonntag, 28. Oktober 2007, 09:33
|
|
Quellcode |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body{
color:#000;
background:#FFF;
}
div { border:2px solid #999; }
#home { background-color:#F00; }
#home a {
background:url(home_link.jpg) fixed no-repeat;
text-indent:-9999px;
display:block;
width:100%; /* Nach Bedarf setzen */
}
#home a:hover {
background-image:url(home_hover.jpg);
}
-->
</style>
</head>
<body>
<div id="home"><a href="#">Tolle Linkbeschreibung, die unsichtbar ist und die nur Suchmaschinen lesen</a></div>
</body>
</html>
|
Das wär das ganze mal in "schön".
Ich blicke nun in meine Kristallkugel und sehe, dass die Frage aufkommen wird, was man dagegen tun kann, dass die Grafiken beim 1. Hovern erst nachgeladen werden müssen. Ich sehe unnötige Java Script-Lösungen im Raum stehen, die man umgehen kann, wenn man die beiden Hintergrundbilder nebeneinander als 1 Bild speichert und bei :hover die background-position ändert.
~!__/
..o.o
This is Einkaufswagen.
Copy Einkaufswagen into your signature to help him on his way to world domination.
Zitat