View Full Version : Overlapping image links

12-13-2007, 03:29 PM
How does one create links similar to those on the following site (bottom right):


What I’m looking for is having image links, but allowing them to overlap when rolled over as seen in that link. Is it hard to do? I was thinking having each image in a separate layer.:confused::rolleyes:

12-13-2007, 06:13 PM
You can see what they did by looking at their HTML source.

They are using a gazillion .jpg images with Javascripting to do mouse-overs.

View the HTML and then look at several of the .jpg images by themselves.

A very elaborate scheme for what it does ... whether or not there's a simpler way?
If the links were a little bit further apart so the mouse-over on one image doesn't
affect another ... that would be easier.

I guess I wouldn't have the patience to make all of those images for mouse-overs ...
but, it's their site not mine.

12-17-2007, 03:52 PM
I created a very simple page (http://www.actinia.me.uk/Surround/Surround.htm) that does this.

For each link, you need one image with the onmousover event defined. This makes the second image visible (display=block). This second image has an onmouseout defined, which makes it invisible (display=none). The second image is larger than the first, and will overlap adjacent images.

It is important that the second image is precisely aligned over the first, which is why I have used absolute positioning for all the images. All these images are gifs with transparent backgrounds (so that the first images show through). You could also do this with png files with transparency.

John Rostron

12-17-2007, 07:01 PM
Nefrit ... there you go ...
John has a terrific CSS method, which is 1000 times simpler than the 100% Javascript
method the other author used. You still use Javascripting for the mouse-over part.

John has a good example --> the power of CSS.