Beste MouseOver-Technik gesucht

[WilliWusel]

Hi,

nachdem ihr mir zuletzt bei einem schwierigen PHP-Problem helfen konntet, habe ich wieder eine Anfrage an die Experten:

Auf unseren Seiten snd meistens 6 oder 7 Thumbnails zu sehen, die beim Überfahren mit der Maus immer an der gleichen Stelle immer in der gleichen Größe ein vergrößertes Bild anzeigen sollen. Früher habe ich das mit diversen Ebenen gelöst, bei denen dann so ein Quellcode zustande kam:

Code: Alles auswählen

<td width="67"><a href="javascript&#58;;"><img src="../../img/home/1_rkm_kl.jpg" alt="Produktion von Kroma-Pappen" title="Produktion von Kroma-Pappen" width="60" height="60" border="0" onMouseOver="MM_showHideLayers&#40;'top','','hide','Bild1','','show','Bild2','','hide','Bild3','','hide','Bild4','','hide','Bild5','','hide','Bild6','','hide'&#41;" onMouseOut="MM_showHideLayers&#40;'top','','show','Bild1','','hide','Bild2','','hide','Bild3','','hide','Bild4','','hide','Bild5','','hide','Bild6','','hide'&#41;"></a></td>
<td width="67"><a href="javascript&#58;;"><img src="../../img/home/2_rabolini_kl.jpg" alt="Stanz-Halbautomat" title="Stanz-Halbautomat" width="60" height="60" border="0" onMouseOver="MM_showHideLayers&#40;'top','','hide','Bild1','','hide','Bild2','','show','Bild3','','hide','Bild4','','hide','Bild5','','hide','Bild6','','hide'&#41;" onMouseOut="MM_showHideLayers&#40;'top','','show','Bild1','','hide','Bild2','','hide','Bild3','','hide','Bild4','','hide','Bild5','','hide','Bild6','','hide'&#41;"></a></td>
<td width="67"><a href="javascript&#58;;"><img src="../../img/home/3_werbemittel_kl.jpg" alt="Werbemittel-Entwicklung" title="Werbemittel-Entwicklung" width="60" height="60" border="0" onMouseOver="MM_showHideLayers&#40;'top','','hide','Bild1','','hide','Bild2','','hide','Bild3','','show','Bild4','','hide','Bild5','','hide','Bild6','','hide'&#41;" onMouseOut="MM_showHideLayers&#40;'top','','show','Bild1','','hide','Bild2','','hide','Bild3','','hide','Bild4','','hide','Bild5','','hide','Bild6','','hide'&#41;"></a></td>
<td width="67"><a href="javascript&#58;;"><img src="../../img/home/4_paradise_kl.jpg" alt="Thekendisplay" title="Thekendisplay" width="60" height="60" border="0" onMouseOver="MM_showHideLayers&#40;'top','','hide','Bild1','','hide','Bild2','','hide','Bild3','','hide','Bild4','','show','Bild5','','hide','Bild6','','hide'&#41;" onMouseOut="MM_showHideLayers&#40;'top','','show','Bild1','','hide','Bild2','','hide','Bild3','','hide','Bild4','','hide','Bild5','','hide','Bild6','','hide'&#41;"></a></td>
<td width="67"><a href="javascript&#58;;"><img src="../../img/home/5_plotter_kl.jpg" alt="CAD-Plotter" title="CAD-Plotter" width="60" height="60" border="0" onMouseOver="MM_showHideLayers&#40;'top','','hide','Bild1','','hide','Bild2','','hide','Bild3','','hide','Bild4','','hide','Bild5','','show','Bild6','','hide'&#41;" onMouseOut="MM_showHideLayers&#40;'top','','show','Bild1','','hide','Bild2','','hide','Bild3','','hide','Bild4','','hide','Bild5','','hide','Bild6','','hide'&#41;"></a></td>
<td width="155"><a href="javascript&#58;;"><img src="../../img/home/6_druckveredlung_kl.jpg" alt="Druckverarbeitung und -veredlung" title="Druckverarbeitung und -veredlung" width="60" height="60" border="0" onMouseOver="MM_showHideLayers&#40;'top','','hide','Bild1','','hide','Bild2','','hide','Bild3','','hide','Bild4','','hide','Bild5','','hide','Bild6','','show'&#41;" onMouseOut="MM_showHideLayers&#40;'top','','show','Bild1','','hide','Bild2','','hide','Bild3','','hide','Bild4','','hide','Bild5','','hide','Bild6','','hide'&#41;"></a> </td>

Ich habe dann mal eine Technik gesehen, die wesentlich eleganter war, aber leider die Unterlagen verloren. Wie geht der Profi diese Aufgabe an?

[kaisen]

Mach doch irgendwie so:

Code: Alles auswählen

<img src="blind.gif" name="big">

<a href="#" onmouseover="big.src='nummer1.jpg';" onmouseout="big.src='blind.gif';">Link</a>

<a href="#" onmouseover="big.src='nummer2.jpg';" onmouseout="big.src='blind.gif';">Link</a>

<a href="#" onmouseover="big.src='nummer3.jpg';" onmouseout="big.src='blind.gif';">Link</a>

Sollte gehen... (is ungetestet...)

[Wirths Media]

Vielleicht suchst Du auch nach a:hover siehe auch https://de.selfhtml.org/css/eigenschaft ... ver_active