Website selber erstellen - Tools, Widgets, Zubehör
Slideshow / Bildergalerie Variante 3
So diesmal auch eine einfache Variante, besonders geignet wenn man nur wenige Bilder hat.
 |
 |
 |
 |
 |
|
Der HTML-Code selbst besteht nur aus einer Tabelle. Es sind diesmal drei neue Elemente verwendet worden. Zum einen wurde dem <td>-Tag mit class="imgbox" eine Formatierung per CSS zugewiesen und wir finden im <img>-Tag Definitionen für das Ereignis "onmouesover" und "onmouseout". Damit wird beim Überfahren bzw. Entfernen des Mauszeigers vom Objekt jeweils eine andere Funktion aufgerufen, welche die Größe der Bilder entsprechend ändert.
Jedes der Bilder wurde jetzt mit id="picX" benannt und der Name wird beim Aufruf an die Funktionen übergeben, damit diese das richtige Bild verändern.
Den Scriptcode findet ihr unten über den Button.
<br><br>
<table align="center" border="6" >
<tr>
<td class="imgbox"><img id="pic1" src="http://selber-machen-homepage.de/katzen/amor4wochen.jpg" width="60px" height="auto" onmouseover="mouseoverpic('pic1')" onmouseout="mouseoutpic('pic1')"></td>
<td class="imgbox"><img id="pic2" src="http://selber-machen-homepage.de/katzen/andy4wochen.jpg" width="60px" height="auto"onmouseover="mouseoverpic('pic2')" onmouseout="mouseoutpic('pic2')"></td>
<td class="imgbox"><img id="pic3" src="http://selber-machen-homepage.de/katzen/artur4wochen.jpg" width="60px" height="auto" onmouseover="mouseoverpic('pic3')" onmouseout="mouseoutpic('pic3')"></td>
<td class="imgbox"><img id="pic4" src="http://selber-machen-homepage.de/katzen/aron4wochen.jpg" width="60px" height="auto" onmouseover="mouseoverpic('pic4')" onmouseout="mouseoutpic('pic4')"></td>
<td class="imgbox"><img id="pic5" src="http://selber-machen-homepage.de/katzen/annabell4wochen.jpg" width="60px" height="auto" onmouseover="mouseoverpic('pic5')" onmouseout="mouseoutpic('pic5')"></td>
<td class="imgbox"><img id="pic6" src="http://selber-machen-homepage.de/katzen/amor4wochen.jpg" width="60px" height="auto" onmouseover="mouseoverpic('pic6')" onmouseout="mouseoutpic('pic6')"></td>
</tr>
</table>
<br><br>
Und hier noch kurz die CSS-Definition für die Tabellenzellen. (im Head speichern)
padding - der Innenabstand vom Bild zum Zellenrand
background - Hintergundfarbe
valign, align - die vertikale und horizontale, also mittige Ausrichtung des Bildes
imgbox.hover - bewirkt den Farbwechsel wenn die Maus auf dem Bild ist - der helle Rahmen
<style type="text/css">
.imgbox{ padding:5px; background:#000000; vertical-align:center; text-align:center;}
.imgbox:hover{background:#555;}
</style>
Wer genau beobachtet hat, hat vielleicht gemerkt, das es eine kleine Unschönheit gibt. Da hier im Beispiel auch ein Bild im Querformat genutzt wird (Bild5), kann es sein, dass es nicht sofort aufblendet, da man ja mit der Maus direkt das Bild treffen muss. Wer also mit dem Mauszeiger im oberen oder unteren Bereich der Bilder sich bewegt, erwischt nicht das Bild, sondern den freien Raum der Zelle und muss nachpositionieren.
Es macht daher Sinn, die onmouseover und onmouseout-Anweisungen statt im <img>Tag in den <td>-Tag zu notieren. Und schon ist das Problem gelöst.
Diese Variante stößt an ihre sinnvolle Grenze, sobald die Vergrößerung deutlich erhöht wird, da dann bei der Vergrößerung der Nutzer beim Verlassen des Bildes auch den Tabellenbereich verlässt und man dann jedes Bild wieder extra anwählen muss und man nicht einfach über die Bilder "fahren" kann.