nicht angemeldet
Bildwechsel an zwei Stellen der Seite
Hallo,
hat jemand eine Idee, wie man es schaffen kann, dass bei einem Mouseover sich nicht nur das Bild an der Stelle die berührt wird verändert, sondern auch noch an einer anderen Stelle sich gleichzeitig ein Bild verändert ?
vielen Dank
Mit freundlichen Grüßen
Franz G.
-
Hallöchen,
wie muß man sich das Ganze denn vom Aufbau her vorstellen ? Soll es sich um zwei Grafik-Links handeln, bei denen wechselseitig beide Grafiken ausgetauscht werden oder soll es ein Grafik-Link sein, bei dem onmouseover die Link-Grafik geändert und irgendwo auf der Seite noch eine weitere Grafik geändert werden soll, die allerdings keine Link-Funktionalität besitzt ?
Wenn das zweite der Fall ist, hätte ich spontan eine Lösung, die auf jeden Fall beim Arbeiten mit Layern funzt:
Irgendwo auf der Seite ist der Grafik-Link und irgendwo anders auf der Seite wird die in einem Layer positionierte Grafik_A angezeigt, die bei onmouseover ebenfalls geändert werden soll. Es ist ein weiterer Layer mit denselben Koordinaten des Layers der Grafik_A zu definieren, der die Grafik_B enthält und dessen visibility auf hidden gesetzt wird. Der zweite Layer ist im Quellcode der Seite nach dem ersten Layer zu positionieren !
Im Head müssen dann drei Scripte untergebracht werden:
1.) Rollover-Script (Cross-Browser)
<!--
if (document.images) {
image1 = new Image;
image1a = new Image;
image1.src = 'bild_1_normal.gif';
image1a.src = 'bild_1_over.gif';
image2 = new Image;
image2a = new Image;
image2.src = 'bild_2_normal.gif';
image2a.src = 'bild_2_over.gif';
} //und so weiter ...
else {
image1 = '';
image1a = '';
image2 = '';
image2a = '';
document.rollimg = '';
document.rollimg1a = '';
document.rollimg2a = '';
} // und so weiter ...//-->
2.) Script für die Änderung der visibility von Layern © Eddie Traversa (nirvana.media3.net) - ebenfalls Cross-Browser
<!--
function toggleVisibility(id, NNtype, IEtype, WC3type) {
if (document.getElementById) {
eval("document.getElementById(id).style.visibility = "" + WC3type + """);
} else {
if (document.layers) {
document.layers[id].visibility = NNtype;
} else {
if (document.all) {
eval("document.all." + id + ".style.visibility = "" + IEtype + """);
}
}
}
}//-->
3.) Preloading für die Alternativ-Grafiken
Der Code für den ersten Grafik-Link sieht dann wie folgt aus:
<a href="irgendwo.html" onmouseover="document.rollimg1a.src=image1a.src;toggleVisibility('layer_grafik_b','show','visible','visible')" onmouseout="document.rollimg1a.src=image1.src;toggleVisibility('layer_grafik_b','hidden','hidden','hidden')">
Also bei den entsprechenden mouse-events einfach zwei Funktionen aufrufen !
Gruß :o)
Olaf