Website selber erstellen - Tools, Widgets, Zubehör
Slideshow / Bildergalerie Variante 8 - Zoom, Transparenz und Motion
So hier eine Variante als Kombination mehrerer Effekte, die natürlich einfach mal als Weiterentwickung der vorigen Beispiele daherkommt. Das Grundgerüst ist also geblieben und wurde "nur" etwas angepasst
 |
 |
 |
 |
 |
|
|
|
|
|||
|
|
||||
|
|
||||
|
|
||||
|
|
|
|
|
|
Die Tabelle als Grundgerüst ist geblieben. Die Bilder wurden alle absolut positioniert, also etwas Rechenarbeit, vor allem wenn die Bilder nicht gleich groß sind. Zusätzlich haben die Bilder eine separate CSS-class erhalten die jetzt die Größenvorgaben, Style und Transitionvorgaben enthalten.
<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"> </td>
<td class="imgbox"><img class="img1" id="img1" style="position:absolute; top:10px; left:115px;" src="BILD-URL" onmouseover="picsmaller(1)" ></td>
<td class="imgbox"><img class="img1" id="img2" style="position:absolute; top:5px; left:215px;" src="BILD-UR" onmouseover="picsmaller(2)" ></td>
<td class="imgbox"><img class="img1" id="img3" style="position:absolute; top:10px; left:315px;" src="BILD-UR" onmouseover="picsmaller(3)" ></td>
<td class="imgbox"><img class="img1" id="img4" style="position:absolute; top:30px; left:415px;" src="BILD-UR" onmouseover="picsmaller(4)"></td>
<td class="imgbox"><img class="img1" id="img5" style="position:absolute; top:10px; left:515px;" src="BILD-UR" onmouseover="picsmaller(5)" ></td>
</tr>
<tr>
<td class="imgbox"><img class="img1" id="img6" style="position:absolute; top:110px; left:15px;" src="BILD-UR" onmouseover="picsmaller(6)" ></td>
<td colspan="4" rowspan="4" bgcolor="cccccc" style="border-radius:18px;box-shadow: inset 1px 1px 12px 12px #333;">
<div >
<img class="img1" id="img0" style="position:absolute; top:150px; left:175px;width:250px;opacity:1" src="BILD-UR" height="auto" onmouseover="picsmaller(0)" >
</div>
</td>
<td class="imgbox"><img class="img1" id="img11" style="position:absolute; top:130px; left:515px;"src="BILD-URL" onmouseover="picsmaller(11)" ></td>
</tr>
<tr>
<td class="imgbox"><img class="img1" id="img7" style="position:absolute; top:202px; left:15px;" src="BILD-URL" onmouseover="picsmaller(7)" ></td>
<td class="imgbox"><img class="img1" id="img12" style="position:absolute; top:202px; left:515px;" src="BILD-URL" onmouseover="picsmaller(12)" ></td>
</tr>
<tr>
<td class="imgbox"><img class="img1" id="img8" style="position:absolute; top:310px; left:15px;" src=BILD-URL" onmouseover="picsmaller(8)" ></td>
<td class="imgbox"><img class="img1" id="img13" style="position:absolute; top:305px; left:515px;" src="BILD-URL" onmouseover="picsmaller(13)" ></td>
</tr>
<tr>
<td class="imgbox"><img class="img1" id="img9" style="position:absolute; top:420px; left:15px;" src="BILD-URL" onmouseover="picsmaller(9)" ></td>
<td class="imgbox"><img class="img1" id="img14" style="position:absolute; top:410px; left:515px;" src="BILD-URL" onmouseover="picsmaller(14)" ></td>
</tr>
<tr>
<td class="imgbox"><img class="img1" id="img10" style="position:absolute; top:505px; left:15px;" src="BILD-URL" onmouseover="picsmaller(10)" ></td>
<td class="imgbox"><img class="img1" id="img16" style="position:absolute; top:510px; left:115px;" src="BILD-URg" onmouseover="picsmaller(16)" ></td>
<td class="imgbox"><img class="img1" id="img17" style="position:absolute; top:505px; left:215px;" src="BILD-URL" onmouseover="picsmaller(17)" ></td>
<td class="imgbox"><img class="img1" id="img18" style="position:absolute; top:510px; left:315px;" src="BILD-URL" onmouseover="picsmaller(18)" ></td>
<td class="imgbox"><img class="img1" id="img19" style="position:absolute; top:525px; left:415px;" src="BILD-URL" onmouseover="picsmaller(19)" ></td>
<td class="imgbox"><img class="img1" id="img15" style="position:absolute; top:505px; left:515px;" src="BILD-URL" onmouseover="picsmaller(15)" ></td>
</tr>
</table>