iWeb FAQ - Mouseover photo 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...

La stessa pagina in italiano                             Die gleiche Seite auf Deutsch

Note: If you're just looking for how to build rollover/mouseover buttons/images look at this tutorial instead.

You can also add more lines of thumbnails or have them both displaying at the top or the bottom of the image, reduce the number of thumbnails, increase it just as you wish.

1. Before you start it is recommended to resize all the images to a certain dimension. Otherwise some of them will probably display as squeezed in one way or another. If you have mixed images horizontal and vertical orientation I would recommend you to turn the vertical ones into horizontals with transparent backgrounds filling in the missing horizontal space and use a vertical image displaying when no other image is selected.

2. Take the pictures you want to use in this presentation, upload them to your server and get their URL. If you don't know how to do that read it here.

3. This is the code I used for the example above:

<div style="position:absolute;top:80px;left:75px;"><img src="http://iwebfaq.org/images/thumbstrip17.jpg" style="height:375px;width:500px;"></div>

<style type="text/css">

img.mini {border:none}

div#minis a img.big {height: 0; width: 0; border-width: 0}

div#minis a:hover img.big {position:absolute;top:80px;left:75px;height:375px;width:500px;border:none; text-decoration:none;}

div#minis a img.mini {height: 50px; width: 50px; border-width: 0}


<div id="presentation" style="width:850;height:525px;">


<div id="minis" class="minislinks" style="margin-left:10px; margin-top:0px;">

<a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/gallery1.jpg" alt="Name" /><img class="big" src="http://iwebfaq.org/images/gallery1.jpg" /></a>

<a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip06.jpg" 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" 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/thumbstrip17.jpg" 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/gallery2.jpg" alt="Name" /><img class="big" src="http://iwebfaq.org/images/gallery2.jpg" /></a>

<a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip07.jpg" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip07.jpg" /></a>

<a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip18.jpg" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip18.jpg" /></a>

<a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip19.jpg" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip19.jpg" /></a>

<a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/gallery3.jpg" alt="Name" /><img class="big" src="http://iwebfaq.org/images/gallery3.jpg" />

<a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip09.jpg" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip09.jpg" /></a>

<a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip20.jpg" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip20.jpg" /></a>

<a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip21.jpg" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip21.jpg" /></a>

<div style="height:400px;"></div>

<a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip04.jpg" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip04.jpg" /></a>

<a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip11.jpg" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip11.jpg" /></a>

<a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip22.jpg" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip22.jpg" /></a>

<a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip23.jpg" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip23.jpg" /></a>

<a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip12.jpg" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip12.jpg" /></a>

<a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip13.jpg" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip13.jpg" /></a>

<a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip02.jpg" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip02.jpg" /></a>

<a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip03.jpg" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip03.jpg" /></a>

<a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip14.jpg" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip14.jpg" /></a>

<a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip15.jpg" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip15.jpg" /></a>

<a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip24.jpg" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip24.jpg" /></a>

<a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/thumbstrip05.jpg" alt="Name" /><img class="big" src="http://iwebfaq.org/images/thumbstrip05.jpg" /></a>



Looks scary so let's go on and point out the important things...

4. Copy and paste the code into TextWrangler or TextEdit for you to edit it. The first line

<div style="position:absolute;top:80px;left:75px;"><img src="http://iwebfaq.org/images/thumbstrip17.jpg" style="height:375px;width:500px;"></div>

is used to add the image which displays when the page loads and none of the thumbnails is selected. The top and left parameters are used to position the image on the page. What follows is the URL to the image to display and the width and height parameters used to define how big the image should display on the page.

These parameters should be identical with the ones in the third line of the code

div#minis a:hover img.big {position:absolute;top:80px;left:75px;height:375px;width:500px;border:none; text-decoration:none;}

which is used to tell where the big version of the thumbnails displays when they are selected. Since the image should display on top of the image displaying when the page loads the parameters for the position and the size should be the same for both.

Next is this line is:

div#minis a img.mini {height: 50px; width: 50px; border-width: 0}

which is used to define the size of the thumbnails. You can either increase or decrease the size of the thumbnails.

<div id="presentation" style="width:850;height:525px;">

is where you tell iWeb how much space this album takes on the page.

<div id="minis" class="minislinks" style="margin-left:10px; margin-top:0px;">

is used to define the position of the thumbnails from the left (margin-left) and if needed you can also move them vertically (margin-top) however vertically they display where you pasted the code in the page so you shouldn't need to move them vertically by making use of the code.

Now for each photo there is this code:

<a class="photo" title="Name"><img class="mini" src="http://iwebfaq.org/images/gallery1.jpg" alt="Name" /><img class="big" src="http://iwebfaq.org/images/gallery1.jpg" /></a>

in which you can specify the title for the image by replacing Name twice in the code and in which you have to enter twice the URL to the image.

You can reduce the number of lines like the previously posted one to decrease the number of thumbnails or add more lines like the one above to increase the number of thumbnails.

The empty div you see in the middle of all the pictures

<div style="height:400px;"></div>

is used to define the distance between the first row of thumbnails and the second row of thumbnails. To simplify the tutorial the code for each image starts on a new line. If you put this in an HTML Snippet this results in having a space between the thumbnails so if you would like to have them all together as in the example above you would have to put them all on the same line.

5. Once you're done editing the code paste the code into an HTML Snippet or add it to your page using Alternative HTML.

Here's another example of this:

In this example I moved the thumbnails to the left, added a <br> where I wanted to have the thumbnails starting on a new line, removed the empty div which I had added to create the empty room between the two lines of thumbnails and finally increased the left: parameter which defines where the bigger image displays.

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

iWebFAQ.org - Tutorials, Tips & Tricks is made with iWeb and for iWeb.

It’s an EBookStoreToday.com company. It’s presented by Cédric Giger and hosted by HostGator.

Thank you for visiting and supporting my website,

- Cédric -