Website selber erstellen - Tools, Widgets, Zubehör
Slideshow / Bildergalerie Variante 6 - mit Zoom-Effekt
Ein kleiner Bewegungseffekt, damit es nicht so langweilig wird.
 |
 |
 |
 |
 |
|
|
|
|
|||
|
|
||||
|
|
||||
|
|
||||
|
|
|
|
|
|
Der HTML-Code ist fast derselbe wie in Variante5. Diesmal wird aber statt der Funttion für den Bildwechsel eine Funktion zum Verkleinern des Bildes initiiert. (die dann auch für die Vergößerung sorgt) und wichtig: mit onmouseout wird eine Funktion killinterval aufgerufen, die die Größenänderung des vorigen Bildes stoppt. Sonst würden, wenn man die Maus schnell über die Bilder zieht, bevor ein Bildwandel beendet ist, ständig neue Bildwechsel gestartet und alles würde aus dem Ruder laufen.
<table width="600px" height="600px" align="center" border="6" rules="none" bordercolor="#888888">
<tr>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="picsmaller(0)" onmouseout="killinterval()"></td>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="picsmaller(1)" onmouseout="killinterval()"></td>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="picsmaller(2)" onmouseout="killinterval()"></td>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="picsmaller(3)" onmouseout="killinterval()"></td>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="picsmaller(4)" onmouseout="killinterval()"></td>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="picsmaller(5)" onmouseout="killinterval()"></td>
</tr>
<tr>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="picsmaller(1)" onmouseout="killinterval()"></td>
<td colspan="4" rowspan="4" bgcolor="000000">
<div align="center">
<img name="image" width="250" height="auto" align="center" valign="center" src="http://selber-machen-homepage.de/katzen/amor4wochen.jpg">
</div>
</td>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="picsmaller(4)" onmouseout="killinterval()"></td>
</tr>
<tr>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="picsmaller(2)" onmouseout="killinterval()"></td>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="picsmaller(3)" onmouseout="killinterval()"></td>
</tr>
<tr>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="picsmaller(3)" onmouseout="killinterval()"></td>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="picsmaller(2)" onmouseout="killinterval()"></td>
</tr>
<tr>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="picsmaller(4)" onmouseout="killinterval()"></td>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="picsmaller(1)" onmouseout="killinterval()"></td>
</tr>
<tr>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="picsmaller(0)" onmouseout="killinterval()"></td>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="picsmaller(1)" onmouseout="killinterval()"></td>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="picsmaller(2)" onmouseout="killinterval()"></td>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="picsmaller(3)" onmouseout="killinterval()"></td>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="picsmaller(4)" onmouseout="killinterval()"></td>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="picsmaller(5)" onmouseout="killinterval()"></td>
</tr>
</table>