Flyover Gallery

Jewelry Luv is pleased to present our rather ingenious method of displaying merchandise thumbnail images. Are you interested in displaying photos in a concise manner but with flyover effects that give detailed explanations when a mouse hovers over a particular image? Want that dynamic text to be indexed by search engines? Then please take a look at the example below. Please be sure to drag your mouse over each of the images:

Preface

This article tells you everything you need to know to recreate this Flyover Gallery technique on your own web pages. The following hyperlinks provide a quick jump to important parts of this tutorial:

CSS code

Copy and paste the following CSS into a file ending with a ".css" extension (ex: gallery.css). This is where the "layout" is designed. Instead of using <TABLE> tags, which clutter and mixup your "content", we are separating the layout instructions into their own CSS file:

ul#gallery, #gallery ul{
list-style-type: none;
width: 710px;
margin: auto;
padding: 0;
}

ul#gallery li.galChild{
float: left;
margin: 10px;
width: 120px;
height: 125px;
border: 1px solid transparent;
}

/* IE hack */
* html ul#gallery li.galChild
{
width: 120px;
margin: 0px;
border: none;
}

ul#gallery li.galChild span
{
    font-size: 90%;
    text-align: center;
}

ul#gallery li.galChild ul{
padding: .8em;
margin-top: -2em;
margin-left: -45px;
border: 1px solid #000;
background-color: #EEE;
color: #000;
font-size: 90%;
width: 200px;
display: none;
position: absolute;
}

/* IE hack */
* html ul#gallery li.galChild ul
{
margin-left: -110px;
width: 202px;
}

ul#gallery li.galChild ul li{
margin-top: 2px;
}

ul#gallery li.galChild ul li span
{
    color: red;
    font-weight: bold;
}

.textLeft
{
    text-align: left;
}

ul#gallery li.galChild:hover, ul#gallery li.over{
color: #369;
border-color: #369;
}

ul#gallery li.galChild:hover ul, ul#gallery li.over ul{
display: block;
list-style-type: none;
}

ul#gallery ul:after{
content: "(click image to see more detailed info)";
font-size: 90%;
text-align: center;
border-top: 1px solid #999;
display: block;
margin-top: 1em;
}

ul#gallery img{
margin: auto;
display: block;
width: 120px;
height: 120px;
}

img,a img{
border: 0;
}

ul#gallery:after{
content: ".";
display: block;
height: 0;
overflow: hidden;
clear: both;
visibility:hidden;
}

HTML code

Copy and paste the following HTML into your web page to display the thumbnail gallery. Notice how minimalistic the code is. Practically all you see here is "content" such as the image and descriptive text. Had we used <TABLE> tags, this code would be much harder to read and maintain:

<ul id="gallery">

<li CLASS="galChild">
<a href="#"><img src="fish.jpg"></a>
<span>$6.95</span><br>
<UL><li><strong>Adorable Fish Necklace</strong></li>
<li class="textLeft">This ensemble of dangling fish has the benefit 
of being both elegant yet extremely cute at the same time. </li>
<li><span>Price: $6.95</span></li>
<li>Click
<a href="#">here</a>
for more information.</li></UL>
</li>
        
<li CLASS="galChild">
<a href="#"><img src="skate.jpg"></a>
<span>$8.95</span><br>
<UL><li><strong>Skater's Black Timepiece Necklace</strong></li>
<li class="textLeft">Adorable rollerblade pendant with integrated 
clock.</li>
<li><span>Price: $8.95</span></li>
<li>Click
<a href="#">here</a>
for more information.</li></UL>
</li>
        
<li CLASS="galChild">
<a href="#"><img src="butterfly.jpg"></a>
<span>$6.95</span><br>
<UL><li><strong>Blue Butterfly Necklace</strong></li>
<li class="textLeft">Stunning necklace with 7 gem stones.</li>
<li><span>Price: $6.95</span></li>
<li>Click
<a href="#">here</a>
for more information.</li></UL>
</li>			

</ul>

Internet Explorer Hack

Microsoft's Internet Explorer needs you to include a javascript file to make the flyover gallery work. Gecko and KHTML browsers like FireFox and Safari do not need this step. Copy the following javascript into a file ending with the ".js" extension such as "ieGalleryHover.js":

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("gallery");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace
        (" over", "");
   }
   }
  }
 }
}
window.onload=startList;

<HEAD> tag

The following code will need to be put within the <HEAD></HEAD> tags of your HTML file. This should be right above your <BODY></BODY> tags.

<HEAD>
	<style type="text/css">
		@import url("gallery.css");
	</style>

	<script language="JavaScript" src="ieGalleryHover.js">
	</script>
</HEAD>

Putting It All Together

Without much hand-holding, you can probably cut and paste the the source code and quickly be up with a working gallery. It really is that simple. The important pieces of code are separated well and it will all just magically work. Still, it will be well worth your time to read this section of the tutorial to gain a deeper insight into how and why this solution works. For your convenience, I have zipped up all the source code into one downloadable archive file which you can download here. After you download and unarchive this file, open "test.html" to see the example in action.

This is a CSS based solution (Cascading-Style-Sheets). To brush up on what this means please read our article titled "Why CSS?" The .css file we asked you to create holds all the layout instructions. It defines margins, spacing, colors, backgrounds, etc. It totally replaces <TABLE> tags and rests in its own file. This means you will later be able to make global updates to your website's layout of the flyover gallery and not have to worry about the content you have in your HTML file (or dynamically generated HTML from PHP, JSP, WebObjects, etc.). We will not pick a part what each line of the flyover gallery CSS does and what it means. If you are new to CSS and just want to use this solution, feel free to plug and chug with it. Deeper knowledge of CSS is the topic of another article and there are many good CSS primers on the Internet.

Standards compliant browsers generally do a good job with CSS. This includes browsers which use the Gecko and KHTML rendering engines such as Mozilla Firefox and Apple's Safari. Other browsers, most notably Microsoft's Internet Explorer, offer incomplete support. The flyover gallery makes use of the CSS :hover event. Internet Explorer only provides support for :hover with <a href> tags only. Did that leave us out of luck? No, The clever javascript we included in this tutorial gives Internet Explorer a swift kick in the butt to knock it in line. This javascript actually walks over elements in the flyover gallery and replaces any CSS classes named "over" with a javascript "mouseover" event which will unhide the descriptive text. Internet Explorer is good with javascript so that is why this solution works. Notice that the javascript is invoked by the "window.onload" event but then it immediately craps out in the first "if" statement for all browsers BUT Internet Explorer. This means that standards compliant Web browsers like Firefox and Safari, as well as Google's spider, will use the CSS and not a lick of javascript. Internet Explorer, on the other hand, uses this javascript as a crutch to help it along.

The <HEAD> tag is where you should put all your CSS declarations. Some people put them anywhere they like, and it will still work in most web browsers, but it is clean and right to put them in the <HEAD> tag. The @import url command is used to grab your CSS file, and cache it. That means it will only be downloaded once no matter how many pages people view on your web site. That can really help with cutting bandwidth and it makes it easy to do global updates for the look and feel of your site.

Special Thanks

Many thanks to Lim Chee Aun for his insight on CSS and the initial idea to use CSS to great a flyover image gallery. His code was the basis for what we have done at Jewelry Luv but his version only worked in standards compliant browsers, such as Firefox.

A big hug goes out to Patrick Griffiths and Dan Webb who provided the creative javascript to get Internet Explorer to "fake" that it can handle CSS :hover events just as good as other standards compliant web browsers. This is a nifty javascript to keep in your library and use anywhere else you want Internet Explorer to understand the :hover property correctly.