Website selber erstellen - Tools, Widgets, Zubehör
Slideshow / Bildergalerie Variante 7 - mit Fading-Wechsel
So hier eine Variante mit einem gefadeten Wechsel und etwas besserem Design..
 |
 |
 |
 |
 |
|
|
|
|
|||
|
|
||||
|
|
||||
|
|
||||
|
|
|
|
|
|
Als Weiterentwicklung der Variante 6, habe ich hier ein einfaches Fading beim Wechsel der Bilder realisiert und aufgrund von Beschwerden auch einmal das Design etwas aufgehübscht. (schönes neudeutsch)
Da ich faul bin heisst die Funktion immer noch picsmaller() und sie bekommt immer noch die Bildnummer als Parameter mit. Für onmouseout brauche ich hier keine Funktion mehr.
Welche wichtigen Änderungen gibt es? Das Design wurde mit box-shadow und border-radius aufgehübscht und ein paar unnötige Formate aus den verschiedenen Testläufen eliminiert. Wichtig ist vor allem die Zuordnung von position:relative zum <table>-Tag, da sonst die Positionierung der beiden Bilder in "imgbox" nicht funktioniert.
In "imgbox" wurden jetzt zwei Bilder angelegt. "imagefront" wurde absolut zum übergeordneten Bezugs-TAG für die Positionierung ausgerichtet. Das ist hier <table>, da <table> mit position:relative, das nächsthöhere positionierte Element ist. "imageback" wurde mit opacity=0 ausgeblendet.
Die Funktion picsmaller wechselt jetzt bei Aufruf die URL des unsichtbaren Bildes, blendet dieses ein und statt dessen das andere aus.
Das Ganze funktioniert einfach und kann problemlos in jedes beliebige Design eingebaut werden.
<table width="600px" align="center" bgcolor="cccccc" style="position:relative;border-radius:10px;border-collapse:separate;box-shadow:1px 1px 12px 12px #999;" >
<tr>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="picsmaller(0)" ></td>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="picsmaller(1)" ></td>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="picsmaller(2)" ></td>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="picsmaller(3)" ></td>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="picsmaller(4)" ></td>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="picsmaller(5)" ></td>
</tr>
<tr>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="picsmaller(1)" ></td>
<td colspan="4" rowspan="4" bgcolor="cccccc" style="border-radius:18px;box-shadow: inset 1px 1px 12px 12px #333;">
<div align="center" >
<img name="imagefront" class="imganzeige" style="position:absolute; top:150px; marginleft:70px;" src="Bild-URL">
<img name="imageback" class="imganzeige" style="opacity:0;" src="Bild-URL">
</div>
</td>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="picsmaller(4)" ></td>
</tr>
<tr>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="picsmaller(2)" ></td>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="picsmaller(3)" ></td>
</tr>
<tr>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="picsmaller(3)" ></td>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="picsmaller(2)" ></td>
</tr>
<tr>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="picsmaller(4)" ></td>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="picsmaller(1)" ></td>
</tr>
<tr>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="picsmaller(0)" ></td>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="picsmaller(1)" ></td>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="picsmaller(2)" ></td>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="picsmaller(3)" ></td>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="picsmaller(4)" ></td>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="picsmaller(5)" ></td>
</tr>
</table>