Bildertausch per onmouseover
Ziehen Sie Ihren Mauszeiger auf ein Bild, um es zu vergrößern
Das JavaScript sieht wie folgt aus
Position der Präsentationstabelle in der html-Datei:
body
-Bereich. Über die Funktion
thumbtobig()
erfolgt der Bildwechsel.
<center> <table cellspacing="0" cellpadding="0" border="0" summary="Bilder der gesuchten Porzellan-Ware"> <tbody> <tr> <td><img border="1" color="#CCCCCC" alt="ansichten" src="" name="mybaseimg"></td> <td width="20"></td> <td width="220"><span class="a10">Klicken Sie auf ein Bild, um es zu vergrößern</span> <table summary=""> <tbody> <tr> <td></td> </tr> <tr> <td> <td width="104" height="80"><a onmouseover="thumbtobig('0')" href="javascript:void(0);"><img border="1" alt="" src="" width="100" name="myimg0" align="top"></a> </td> </tr> <tr> <td width="104" height="80"><a onmouseover="thumbtobig('1')" href="javascript:void(0);"><img border="1" alt="" src="" width="100" name="myimg1" align="top"></a> </td> </tr> <tr> <td width="104" height="80"><a onmouseover="thumbtobig('2')" href="javascript:void(0);"><img border="1" alt="" src="" width="100" name="myimg2" align="top"></a> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table>
Position des JavaScripts in der html-Datei:
body
-Bereich
nach
der Präsentationstabelle (!)
<script type="text/javascript"> <!-- simg0 = new Image(); simg0.src = "bild_1.jpg"; document.images['myimg0'].src= simg0.src; simg1 = new Image(); simg1.src = "bild_2.jpg"; document.images['myimg1'].src= simg1.src; simg2 = new Image(); simg2.src = "bild_3.jpg"; document.images['myimg2'].src= simg2.src; document.images['mybaseimg'].src= simg0.src; function thumbtobig(thumbs) { if(thumbs==0){document.images['mybaseimg'].src=simg0.src; document.images['mybaseimg'].width=simg0.width; document.images['mybaseimg'].height=simg0.height;} if(thumbs==1){document.images['mybaseimg'].src=simg1.src; document.images['mybaseimg'].width=simg1.width; document.images['mybaseimg'].height=simg1.height;} if(thumbs==2){document.images['mybaseimg'].src=simg2.src; document.images['mybaseimg'].width=simg2.width; document.images['mybaseimg'].height=simg2.height;} } //--> </script>
© 2002
