nicht angemeldet
Mouseover und Mouseout-große und viele kleine Grafiken
Ich möchte auf einer Seite eine große Grafik darstellen.
Hinter dieser Grafik sind (zunächst versteckt) viele kleinere Grafiken. Wenn ich nun über den jeweiligen Bereich die Maus bewege, soll die jeweilige kleine Grafik sichtbar werden und wenn ich die Maus wegbewege, soll die kleine Grafik wieder in den Hintergrund und wenn ich wieder in den Bereich komme soll sie wieder sichtbar werden...usw.
Ich komme da einfach nicht weiter.
Enrico
-
Ich möchte auf einer Seite eine große Grafik darstellen.
Hinter dieser Grafik sind (zunächst versteckt) viele kleinere Grafiken. Wenn ich nun über den jeweiligen Bereich die Maus bewege, soll die jeweilige kleine Grafik sichtbar werden und wenn ich die Maus wegbewege, soll die kleine Grafik wieder in den Hintergrund und wenn ich wieder in den Bereich komme soll sie wieder sichtbar werden...usw.Hi !
Warum zerschnippelst Du die große Grafik nicht ? dann könntest Du einzelne Teile mit dem bekannten MOUSEOVER einfach ersetzen...
CIAO
Holger-
Warum zerschnippelst Du die große Grafik nicht ? dann könntest Du einzelne Teile mit dem bekannten MOUSEOVER einfach ersetzen...
Sicher der einfachste Weg , wenn man aber den Puzzle-Effekt
beim Laden nicht haben will müsste man sonst alles in
absolut positionierte Layer packen die man denn ein und
ausblendet.gruss
Jens
-
-
Hallo Enrico,
Zunächst einmal mußt Du die große Grafik in viele kleine zerschneiden und dann in einer Tabelle wieder zusammenfügen.
Nun kannst Du die kleinen Bildelemente gegen andere "gehighlightete" Bilder austauschen. Dazu kannst Du folgenden Code benutzen:
<script language="JavaScript">
var normal1 = new Image();
normal1.src="pfad/bild1.gif";
var highlight1 = new Image();
highlight1.src="pfad/bild1_hi.gif";
var normal2 = new Image();
normal2.src="pfad/bild2.gif";
var highlight2 = new Image();
highlight2.src="pfad/bild2_hi.gif";function bildwechsel(bildnr,bildobjekt){
document.images[bildnr].src=bildobjekt.src;
}
</script>
.
.
.
<body>
<a href="#" onmouseover="bildwechsel(0,highlight1)" onmouseout="bildwechsel(0,normal1)"><img src="pfad/bild1.gif"></a><a href="#" onmouseover="bildwechsel(1,highlight2)" onmouseout="bildwechsel(1,normal2)"><img src="pfad/bild2.gif"></a>
</body>
</html>-
Hallo Enrico,
wenn du keine Lust hast die große Graphik auseinander zuschnibbeln, kannst du die große Grapik als Hintergrundbild einer Tabelle angeben und die kleinen Bilder in den jeweiligen Zellen der Tabelle einfügen. Für die GIFs normal1, normal2 ... (wie Hartman beschrieben hat) mußt du dann halt transparente Gifs verwenden.
Gruß Ingo
-