< webdesign.hkmusic.de - css image gallery

CSS Gallery

Idee: www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/.

This is a purely CSS based image gallery that displays larger versions of thumbnail images dynamically when the mouse hovers over them. A rich HTML caption can be added to the enlarged image, and every aspect of the Image Gallery exists as plain HTML on the page. The idea is to use CSS's ":hover" pseudo class to cause an element to react onMouseover. When that happens, an absolutely positioned container holding the enlarged image, anchored on the page by another container with position set to relative, is shown. Furthermore, it's possible to modify the behavior so the enlarged images are only shown onClick, though IE6 currently doesn't support this behavior well. The gallery works in IE6+, Firefox, Opera 8+.

Hier der Quellcode der CSS Hover Galerie

<div class="gallerycontainer">
<a class="thumbnail" href="#thumb"><img src="../screenpics/big/ck4_1.jpg" width="100px" height="66px" border="0" /><span>clasen koehler quartett<br />
<img src="../screenpics/big/ck4_1.jpg" /></span></a><br />
<a class="thumbnail" href="#thumb"><img src="../pics/01_java.gif" width="100px" height="66px" border="0" /><span>Java script! real!<br /><img src="../pics/01_java.gif" /></span></a><br />
<a class="thumbnail" href="#thumb"><img src="../pics/arbeit.jpg" width="100px" height="66px" border="0" /><span><img src="../pics/arbeit.jpg" /><br />you can work it out!</span></a><br />
<a class="thumbnail" href="#thumb"><img src="../pics/960_pics/20110326_highway.jpg" width="100px" height="66px" border="0" /><span><img src="../pics/960_pics/20110326_highway.jpg" /><br />big picture!</span></a><br />
<a class="thumbnail" href="#thumb"><p>text link zum fjord</p><span><img src="../pics/fjord.jpg" /><br />fjord</span></a><br />
<a class="thumbnail" href="#thumb"><p>big moon</p><span><img src="../pics/mond1.jpg" /><br />big moon</span></a><br />
</div>

top of page