07 Hiding images

In its current form, the page displays all the images and text. The reason for this is that the images need to be displayed to allow them to preload. However, they need to be invisible on the page so they only appear on rollover. This is done by placing them in a container that is 1 x 1 pixels. This has the effect of only displaying the top left pixel of each image. Add the following code:

#container a.gallery span {
position:absolute;
width:1px;
height:1px;
top:5px;
left:5px;
overflow:hidden;
background:#fff;
}

Overflow hides the rest of the image outside the 1 x 1 container, and background determines the colour. Save the page and preview in your chosen browser. The page should now effectively be blank apart from a very small dot in the top left corner.

<ul>
<li>
<img src=”use/unionjack.jpg” alt=”Union Jack” title=”Union Jack” /><br />
This is where the accompanying text for the image is to be placed
</li>
</ul>

Now repeat the list tags for each image to be included in the gallery, eg,
<li>
<img src=”use/unionjack.jpg” alt=”Union Jack” title=”Union Jack” /><br />
This is where the accompanying text for the image is to be placed
</li>
<li><img src=”use/kinkyfriend.jpg” alt=”Kinky Friend” title=”Kinky Friend” /><br />

This is where the accompanying text for the image is to be placed.

08 Add thumbnails

It’s now time to start adding the thumbnail images. To do this, set them as the background image of the link surrounding the list image. The first piece of code to add is the following:

#container a.gallery, #container a.gallery:visited {
display:block;
color:#000;
text-decoration:none;
border:1px solid #000;
margin:1px 2px 1px 2px;
text-align:left;
cursor:default;
}

This determines how the link is displayed. Now comes the interesting part. Each image defined in the HTML unordered list needs to be defined in the style tags. Add the following code for each image (remembering to change the unique identifier, ie photoa, photob, photoc and image location):

#container a.photoa {
background:url(use/unionjackth.jpg);
height:80px;
width:80px;
}

09 Organise thumbnails

Now that the thumbnails have been put into place, it is time to organise them into the order. This is simply a matter of some more simple CSS. Add the following code, but note that the width and height can be adjusted to suit the size of the thumbnails:

#container ul {
width:180px;
height:340px;
}
#container li {
float:left;
}

Changing the width in #container ul will determine how many thumbnails are displayed in a row. For example, our thumbnails are 80 x 80 pixels. So to create a row with a single thumbnail, we would reduce the width to 90 pixels. The current width, 180px, displays two thumbnails in a row. Remember to adjust the height to match the thumbnails. The #container li code floats any content in a list to the left.

10 Create hover

We are now close to getting the basis of the image gallery working. Add the code:

#container a.gallery:hover span {
position:absolute;
width:450px;
height:350px;
top:10px;
left:170px;
color:#000;
background:#fff;
}

This code will make sure that when the mouse cursor is placed over a thumbnail, the main image will appear. However, various elements will need to modified to suit requirements. Width and height should be the same dimensions as the main image. Top and left position the main image; top defines how many pixels from the top of the window, while left determines how far from the left side of the window the main image is positioned. Adjust both until you get the desired effect.

11 Finishing touches

There are several tweaks that can be made to give the image gallery its final polished output. Currently, the thumbnails do not have a hover attribute attached to them and the border is black. To create the hover effect, add the following

#container a.gallery:hover { border:1px solid #fff;}

This will add a hover effect with a white border. To change the initial border, go to #container a.gallery, #container a.gallery:visited and change the border colour to the desired option. We have chosen #CCCCCC. Now head to #container a.gallery:hover and change the colour to #333333. Now head to #container a.gallery:hover span {position:absolute; width:454px; height:375px; top:10px; left:100px; color: #000; background: #EEEEEE;}. Adjust the height to include the text and adjust the width to include the border. Modify the colour to change the text colour and modify background to change the background colour in the text.

Pages: 1 2 3