mehrere Rollover Bilder mit CSS
Steffanie
- css
0 Ingo Turski0 Steffi
Hallo,
ich möchte eine Navigation mit mehreren Rollover Bildern machen. Habe dazu hier auch schon folgenden Code gefunden
a { display:block;
background-image:url(button.gif);
width:120px; height:30px }
a:hover { background-image:url(button_on.gif); }
und:
<a href="#"> </a>
Das glabt auch ganz gut, nur brauche ich verschiedene Bilder.
Also ich habe die Bilder "menu_1.jpg", "menu_2.jpg", "menu_3.jpg" und wenn ich über Bild 1 fahre soll "menu_1a.jpg" erscheinen, bei Bild 2 "menu_2a.jpg" usw. Und das eben ohne Javascript, sondern mit CSS.
Kann mir jemand helfen? Danke!
Gruß Steffi
Hi,
Das glabt auch ganz gut, nur brauche ich verschiedene Bilder.
Dann solltest Du diese über IDs individuell angeben.
Und das eben ohne Javascript, sondern mit CSS.
Löblich. Allerdings übersiehst Du zwei Probleme:
1. die hover-Bilder müssen erst geladen werden, was zu einer gewissen Verzögerung führt, in der kein Bild sichtbar ist,
2. "menu_1.jpg", "menu_2.jpg" etc. legt den Schluß nahe, daß es sich um eine Navigation handelt. Nur was ist, wenn beim Client keine Bilder angezeigt werden? Ohne Alternativtext keine Navigation. Schau Dir mal http://www.1ngo.de/web/bildwechsel.html hierzu an.
freundliche Grüße
Ingo
Hi,
danke für die Hilfe und den coolen Link. Die Problematik mit dem nachladen habe ich schon ganz "unsauber" gelöst, indem ich die hover-Bilder an einer anderen Stelle mit 1x1 Pixel Größe eingefügt :-)
Danke, Gruß Steffi