Mouseover photos album

How can I have some thumbnails displaying at the top and the bottom of a bigger image and when people point their mouse over the thumbnails the image displays in the area of the bigger image? Or just another way to display photos on your website...


The code of the above presentation is:

<!--start_raw-->
<style>
#mouseovergallery {position:relative; height:400px;}
img.mini {border:none}
#minis {position:absolute; top:50px; left:0px; width:200px;}
div#minis a:hover {background:White}
div#minis a img.big {height: 0; width: 0; border-width: 0}
div#minis a:hover img.big {position:absolute; top:-40px;left:175px;z-index:100; width:500px; height:350px; border:none}
div#minis img.biginitial {position:absolute; top:-40px;left:175px; width:500px; height:350px; border:none}
</style>
<div id="mouseovergallery">
<div id="minis">
<img class="biginitial" src="http://iwebfaq.org/images/gallery1.jpg"/>
<a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/gallery1.jpg" style="width:50px; height:50px" alt="Name" /><img class="big" src="http://iwebfaq.org/images/gallery1.jpg" /> <a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip06.jpg" style="width:50px; height:50px" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip06.jpg" /></a> <a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip16.jpg" style="width:50px; height:50px" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip16.jpg" /></a><br>
<a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip06.jpg" style="width:50px; height:50px" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip06.jpg" /></a> <a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip17.jpg" style="width:50px; height:50px" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip17.jpg" /></a> <a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip08.jpg" style="width:50px; height:50px" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip08.jpg" /></a><br>
<a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip16.jpg" style="width:50px; height:50px" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip16.jpg" /></a> <a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/gallery1.jpg" style="width:50px; height:50px" alt="Name" /><img class="big" src="http://iwebfaq.org/images/gallery1.jpg" /> <a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip09.jpg" style="width:50px; height:50px" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip09.jpg" /></a><br>
<a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip17.jpg" style="width:50px; height:50px" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip17.jpg" /></a> <a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip06.jpg" style="width:50px; height:50px" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip06.jpg" /></a> <a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip11.jpg" style="width:50px; height:50px" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip11.jpg" /></a><br>
<a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/gallery1.jpg" style="width:50px; height:50px" alt="Name" /><img class="big" src="http://iwebfaq.org/images/gallery1.jpg" /> <a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip06.jpg" style="width:50px; height:50px" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip06.jpg" /></a> <a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip16.jpg" style="width:50px; height:50px" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip16.jpg" /></a>
</div>
</div>
<!--end_raw-->

The following code...

#mouseovergallery {position:relative; height:400px;}

is used to give the photo gallery the room it needs to work properly.

#minis {position:absolute; top:50px; left:0px; width:200px;}

refers to the position of the small images on the left.

div#minis a:hover img.big {position:absolute; top:-40px;left:175px;z-index:100; width:500px; height:350px; border:none}

Refers to the position where the big image displays when hovering over a small image and its size.

div#minis img.biginitial {position:absolute; top:-40px;left:175px; width:500px; height:350px; border:none}

Refers to the size and the position of the big image displaying when the page loads and when not hovering over a small image. The parameters of this must equal the ones which refer to the position where the big image displays hovering over a small image.

First you define which image should display when the page loads

<img class="biginitial" src="http://iwebfaq.org/images/gallery1.jpg"/>

Then every image has the following code

<a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/gallery1.jpg" style="width:50px; height:50px" alt="Name" /><img class="big" src="http://iwebfaq.org/images/gallery1.jpg" />

In there you see twice the URL to the image.


This FAQ is also discussed in my WPFAQ.org E-Book (sample)


© WPFAQ.org - Tutorials, Tips & Tricks is made with WordPress and for WordPress.
It's an EBookStoretoday.com company. It’s presented by Cédric Giger and hosted by HostGator.com

Thank you for visiting and supporting my website,
- Cédric -




Now share it…

Share

Comments are closed.