Hilfe bei spezial Rollover

H

hornet1410

Erfahrenes Mitglied
Morgen erst mal :o)

Hab ein kleines Problem wo ich keine Lösung finde. Vielleicht kommt einer von euch drauf?
Hab verschiedene Links neben einander die ich gerne in Rauten förmigen Hintergrundbildern hätte. Diese sollen sich beim darüber fahren farblich verändern!
Hier das Bild:
links.jpg

Es sind natürlich alle weiß! Außer der Link auf dem ich mich befinde.

Jetzt kann ich aber nicht einzelne Bilder mit Rollover benutzen weil mir sonst die Ecken fehlen!? Müsste also jedes mal das ganze Bild ändern. Aber für jeden link bräuchte ich ein extra Bild (über die ganze breite) und das müsste sich auch nur ändern wenn ich über einen Link fahre.

Habt ihr da ne Idee?
 
Hi,

Du könntest mit transparenten GIFs arbeiten: Im Originalzustand ist der Hintergrund transparent (weißer Seitenhintergrund scheint durch) und nur die Schrift zu sehen. Beim RollOver hast Du dann ein Bild mit dem grauen rautenförmigen Hintergrund. Damit die Rauten komplett angezeigt werden, müssen sich die Bilder etwas überlappen, sprich: in DIVs mit unterschiedlichem z-Index gesetzt werden. Um ein gleichmäßiges RollOver zu bekommen, könntest Du über das Ganze noch ein transparentes Bild mit einer ImageMap legen. ... ich weiß, ist viel Fummelei. Eine einfacherere (aber speicherintensivere) Methode wäre, 6 Bilder in der Größe des ganzen Menüs zu verwenden (für jeden Menüpunkt eins) und ebenfalls mit einer ImageMap zu arbeiten, wobei beim RollOver das gesamte Bild ausgetauscht wird.

Gruß
.
 
--> Datic

Danke schon mal für deine Idee! :o)
Die letztere hat mir am besten gefallen! (6 Bilder) Ist am einfachsten! Aber wie funktioniert das?
Er muß wissen das wenn ich über den Link Home fahre auch das passende Bild zu Home erscheint?
 
Hi,

Ein Beispiel (ungetestet):
HTML: 
<script language="JavaScript" type="text/javascript">
function setImg(pname) {
    document.getElementById("menuPic").src = pname;
}
</script>
<body>
<img src="bild0.gif" alt="" name="menu" id="menuPic" width="320" height="30" border="0" usemap="#menuMap" onMouseOut="setImg('bild0.gif')"> 
<map name="menuMap">
<area shape="poly" coords="1,1,80,1,60,29,1,29" href="#" onMouseOver="setImg('bild1.gif')">
<area shape="poly" coords="81,1,160,1,140,29,61,29" href="#" onMouseOver="setImg('bild2.gif')">
<area shape="poly" coords="161,1,240,1,220,29,141,29" href="#" onMouseOver="setImg('bild3.gif')">
<area shape="poly" coords="241,1,319,1,319,29,221,29" href="#" onMouseOver="setImg('bild4.gif')">
</map>
</body>

Gruß
.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück