RapidWeaver 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...

I'm not really happy with how this works since no matter what I try RapidWeaver keeps displaying the dotted line under a selected image. It may look good to some of you anyway so here's the tutorial...

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.

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

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 the last chapter of the
Basic web knowledge base.
3. This is the code I used for the example above:

<div style="position:absolute;top:735px;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:735px;left:75px;height:375px;width:500px;border: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:385px;"></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:735px;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:735px;left:75px;height:375px;width:500px;border: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 RapidWeaver how much space this album takes on the page. Otherwise the text which follows this presentation would display behind the images and you want to keep this from happening.

<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:385px;"></div>

is used to define the distance between the first row of thumbnails and the second row of thumbnails.

5. Once you added the code to RapidWeaver select it and go to "Format", "HTML" choose "Code".

In this example I moved the thumbnails to the left, added a


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 RapidWeaverFAQ.org E-Book (sample)

RapidWeaverFAQ.org - Tutorials, Tips & Tricks is made with RapidWeaver and for RapidWeaver.
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…