Help (please): Rollover Image AND Hotspot

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

my main page consist of seven images (rollover images). Each images
changes to another picture if you move the mouse over an redirects to
another site (onMouseOut, onMouseOver, etc.)

But now I have to extend this:

One of the pictures should contain several different links. I tried this
by adding a Hotspot (area shape="rect" coords=... etc.).
Unfortunately my rollover picture is gone, as soon as I enter one of the

Is there any way I can manage to get a rollover image with several links
in it?

Thanks for your advice

Re: Help (please): Rollover Image AND Hotspot

Martin Weil wrote:
Quoted text here. Click to load it

Martin, Martin, Martin. Look at you computer monitor. See you code?

That's right, it right there in front of you. Now think about it for a
moment, eh. Guess what we see? That is also right...nothing, because you
haven't supplied us a link to what you have written. How on earth would
you expect us to help you without your page source?

Take care,



My mistake :-)

This is the page and it is the third picture "Referenzen" /


Re: Help (please): Rollover Image AND Hotspot

Hi Martin,
Code is pasted down below; you have to get creative with this one.
First, you need 3 images: your viewed image, your mouseover image,
and your image for mapping.  The image for mapping is a transparent gif
is the same size/dimensions as the images you use for your mouseover

second: create a div box which is the same dimensions as your swapping
using css, set the background-image of that box to your viewable image.

(hope this is making sense...)
Next, create a mouseover/mouseout script which changes the background
images of your div box.

lastly, put your mapped transparent image inside the div box.
In the code below, i just created (3) 200x200 gifs: one red, one green,
and one transparent.
you can probably substitute your image names and locations in the code
to test it out, then create your own image map with links.

BTW, I created the image map in fireworks; does a great job at stuff
like that!!!

Hope that helps,

PS: I tested in f-fox prior to posting and it failed... UUGH!
But, it works great in explorer!

-----------C O D E   S A M P L E----------------------
<meta http-equiv="Content-Type" content="text/html;">
<body bgcolor="#ffffff">
<div  id="dvv"
    onmouseover = "'url(green.gif)'"
    onmouseout   =  "'url(red.gif)'"
    style="position:absolute; left:20px; top:20px; z-index:0; width:200px;
height:200px; background-image:url(red.gif);">
<img name="mapper" src="transparent.gif" width="200" height="200"
usemap="#m_Untitled-1" />
<map name="m_Untitled-1">
<area shape="circle" coords="135,136, 50" href=" "
title="espn" alt="espn" >

<area shape="poly" coords="139,11,91,61,194,61,139,11"
href=" "
target="_blank" title="abc news" alt="abc news" >

<area shape="rect" coords="2,60,81,200" href=" "
title="yahoo" alt="yahoo" >

<area shape="rect" coords="2,1,83,61" href=""
title="go google" alt="go google" >


Re: Help (please): Rollover Image AND Hotspot

jim schrieb:
Quoted text here. Click to load it

Thanks for that, I will get right on it and keep you postet...

Thanks very much

It works for me, too. Unfortunately only with IE, but most people still
using M$, so this won't be such a big problem.

Thanks for the code...


Re: Thanks very much

Once upon a time *Martin Weil* wrote:
Quoted text here. Click to load it


What (and who) are you talking about???????????

Don't look like you are replying to any post at all, still writing like
you are, but not quote it?

* How to quote:
* From Google: /


Proud User of SeaMonkey. Get your free copy:

Re: Thanks very much

Arne wrote:
Quoted text here. Click to load it

Not sure what will or won't work as well...

Take care,


Re: Thanks very much

Quoted text here. Click to load it

It is my pleasure, Martin. I am actually selling it now by the
foolscap page at 10pt. If you want any more, just shout again.


Site Timeline