Web Design by Sheriar Designs: Impeccable Code | Beautiful Design

Working on a recent project, I was asked to create a “dock effect” (similar to the doc on a Mac) for a row of thumbnails. I hunted around for quite some time for a decent javascript for this and really came up empty handed. So I decided to use css to not exactly mimic this effect, but at least echo it. ;o) Here is what I came up with.

The XHTML

A straightforward list. Just give each image a unique ID (and better descriptive text than I have here).

<ul id="dock">
<li>Image 1</li>
<li>Image 2</li>
<li>Image 3</li>
<li>Image 4</li>
<li>Image 5</li>
<li>Image 6</li>
<li>Image 7</li>
<li>Image 8</li>
<li>Image 9</li>
<li>Image 10</li>
<li>Image 11</li>
</ul>

The Images

We create small and large versions of each image, making sure that any outside “empty” pixels are actually transparent. I saved mine with identical names in “small” and “large” folders, just to make pointing to the SRC a little bit easier.

The CSS

For the CSS we remove any bullets from the UL, as well as center it . Next we tell the LIs to float left so that they will line up horizontally rather than vertically. The A tags get a display of block so that we can give them height and width values, and a position of relative so that items within them can be positioned in relation to them; also we float them left to maintain the horizontal layout. Next we hide the text within the SPAN tags, and make sure our images have no borders on them. Finally we make sure that the image we are hovering on will sit on top of all others by giving it a high Z-INDEX.

#dock {
margin:0 auto;
list-style-type:none;
}
#dock li {
display:block;
float:left;
}
#dock li a {
display:block;
position:relative;
margin-right:8px;
}
#dock li a span {
position:absolute;
width:100px;
margin-left:-5000px;
}
#dock li a img {
border:0;
}
#dock li a:hover {
z-index:100;
}

Now we have to set the size and background image for each link:

#dock li a#img1 {
width:45px;
height:48px;
background:url(../_images/dock/small/1.gif) no-repeat;
}
#dock li a#img2 {
width:56px;
height:51px;
background:url(../_images/dock/small/2.gif) no-repeat
}
#dock li a#img3 {
width:32px;
height:53px;
background:url(../_images/dock/small/3.gif) no-repeat;
}
#dock li a#img4 {
width:45px;
height:55px;
background:url(../_images/dock/small/4.gif) no-repeat;
}
#dock li a#img5 {
width:31px;
height:54px;
background:url(../_images/dock/small/5.gif) no-repeat;
}
#dock li a#img6 {
width:55px;
height:55px;
background:url(../_images/dock/small/6.gif) no-repeat;
}
#dock li a#img7 {
width:52px;
height:54px;
background:url(../_images/dock/small/7.gif) no-repeat;
}
#dock li a#img8 {
width:50px;
height:94px;
background:url(../_images/dock/small/8.gif) no-repeat;
}
#dock li a#img9 {
width:45px;
height:97px;
background:url(../_images/dock/small/9.gif) no-repeat;
}
#dock li a#img10 {
width:45px;
height:101px;
background:url(../_images/dock/small/10.gif) no-repeat;
}
#dock li a#img11 {
width:52px;
height:84px;
background:url(../_images/dock/small/11.gif) no-repeat;
}

All that’s left is to set the rollover images. In addition to the new size and new path to the image, I have lovingly tweaked the position of each image by adjusting the LEFT, TOP, and MARGIN-RIGHT values. These values were arrived at through a lot of trial and error for each link. If you are working on a “dock” where all the images are the same size, you will only have to do this once.

#dock li a#img1:hover {
left:-13px;
top:-14px;
margin-right:-13px;
width:66px;
height:69px;
background:url(../_images/dock/large/1.gif) no-repeat;
}
#dock li a#img2:hover {
left:-14px;
top:-12px;
margin-right:-14px;
width:78px;
height:71px;
background:url(../_images/dock/large/2.gif) no-repeat;
}
#dock li a#img3:hover {
left:-7px;
top:-14px;
margin-right:-5px;
width:45px;
height:74px;
background:url(../_images/dock/large/3.gif) no-repeat;
}
#dock li a#img4:hover {
left:-10px;
top:-14px;
margin-right:-11px;
width:64px;
height:76px;
background:url(../_images/dock/large/4.gif) no-repeat;
}
#dock li a#img5:hover {
left:-4px;
top:-14px;
margin-right:-4px;
width:43px;
height:76px;
background:url(../_images/dock/large/5.gif) no-repeat;
}
#dock li a#img6:hover {
left:-8px;
top:-14px;
margin-right:-14px;
width:77px;
height:76px;
background:url(../_images/dock/large/6.gif) no-repeat;
}
#dock li a#img7:hover {
left:-14px;
top:-14px;
margin-right:-13px;
width:73px;
height:77px;
background:url(../_images/dock/large/7.gif) no-repeat;
}
#dock li a#img8:hover {
left:-12px;
top:-14px;
margin-right:-14px;
width:72px;
height:132px;
background:url(../_images/dock/large/8.gif) no-repeat;
}
#dock li a#img9:hover {
left:-9px;
top:-14px;
margin-right:-9px;
width:62px;
height:136px;
background:url(../_images/dock/large/9.gif) no-repeat;
}
#dock li a#img10:hover {
left:-7px;
top:-14px;
margin-right:-5px;
width:58px;
height:140px;
background:url(../_images/dock/large/10.gif) no-repeat;
}
#dock li a#img11:hover {
left:-8px;
top:-14px;
margin-right:-10px;
width:73px;
height:119px;
background:url(../_images/dock/large/11.gif) no-repeat;
}

Preload The Large Images

I probably could have created one image instead of two (as explained in this turorial) for the thumbnails, but I was pressed for time and so did what was fastest and easiest for me, which at the time meant going with the two sizes of images that were already created. Because of this, we will need to preload the larger images to avoid flicker on first-time hovering.

My favorite pre-load script goes like this (just fill in the dimentions [width,height] and the path):

if (document.images)
{
var pic1= new Image(0,0);
pic1.src="";

var pic2= new Image(0,0);
pic2.src="";

var pic3= new Image(0,0);
pic3.src="";

var pic4= new Image(0,0);
pic4.src="";

var pic5= new Image(0,0);
pic5.src="";
}

Save the file and then link to it in the head of your document.

And That’s A Wrap

See the dock in action! Granted, it’s not the Mac dock – it doesn’t fade, and the images on either side of the hovered link don’t bubble up slightly as well, but for pure XHTM/CSS, it does a nice little job. If any of you know of a good java script that you can recommend to do it better, I’d love to hear from you.

This entry was posted on Tuesday, May 30th, 2006 at 12:25 pm and is filed under CSS, Tips and Tricks, Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.