- 1). Open your web page in your favorite text or HTML code editor.
- 2). Add the following HTML code into your web page where you want your gallery to appear:
<div>
<ul>
<li>
<a>
<span></span>
<img src="thumbs/myimage1.jpg"/></a>
</li>
<li>
<a>
<span></span>
<img src="thumbs/myimage2.jpg"/></a>
</li>
<li>
<a>
<span></span>
<img src="thumbs/myimage3.jpg"/></a>
</li>
</ul>
</div> - 3). Edit the list item codes so the image tags in each list item references your gallery thumbnail image files. If you need additional list items for more images, copy and paste one of the list items, and change the "pic#" class so the "#" continues counting up (giving each link a unique style class).
- 4). Add the following CSS code to the style section of your web page. This styles the gallery area and will cause the images to align correctly within the gallery area:
div.gallery {
position: relative ;
border: 1px solid silver ;
height: 350px ;
width: 750px ;
} - 5). Add the following CSS code to the style section. This styles the thumbnails into a free-flowing grid to the right of the main image area:
ul.thumbs {
list-style-type:none;
width: 250px ;
float: right ;
}
ul.thumbs li {
float: left ;
} - 6). Add the following CSS code to the style section. This moves and stacks the empty span tags on the left side of the gallery area, and effectively hides them:
span.fullpic {
width: 1px ;
height: 1px ;
position: absolute ;
top: 5px ;
left: 5px ;
} - 7). Add the following CSS code to the style section. This creates the roll-over effect. When the mouse cursor hovers over a thumbnail (identified by the class "pic#" link), the associated span tag is expanded so it is visible. The associated larger sized image is set as the span's background, making it look like the image magically appeared on the left side of the gallery area.
a.pic1:hover span.fullpic {
background:url(images/myimage1.jpg);
background-repeat: no-repeat ;
height:300px;
width:300px;
}
a.pic2:hover span.fullpic {
background:url(images/myimage2.jpg);
background-repeat: no-repeat ;
height:300px;
width:300px;
}
a.pic3:hover span.fullpic {
background:url(images/myimage3.jpg);
background-repeat: no-repeat ;
height:300px;
width:300px;
} - 8). Edit the background image references in the CSS code. Note the "pic#" link styles. These styles correspond to the links around the thumbnail images and span tags in the the page's HTML code. Set the background image "URL" to the larger-sized image file corresponding to the thumbnail you associated with each "pic#" link. If you added more thumbnails in the earlier step, add corresponding "a.pic#:hover span" styles.
SHARE
