Help (please): Rollover Image AND Hotspot

Martin Weil · Dec 14, 2006

Hi,

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
Hotspots.

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

Thanks for your advice
Martin

Jonathan N. Little · Dec 14, 2006

Martin said:
Hi,

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
Hotspots.

Is there any way I can manage to get a rollover image with several links
in 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?

Martin Weil · Dec 14, 2006

My mistake

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

http://www.martinweil.de/ESD-PV/

Martin

jim · Dec 15, 2006

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
which
is the same size/dimensions as the images you use for your mouseover
image-swap.

second: create a div box which is the same dimensions as your swapping
images.
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,

Jim
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----------------------
<html>
<head>
<title>Untitled-1</title>
<meta http-equiv="Content-Type" content="text/html;">
</head>
<body bgcolor="#ffffff">
<div id="dvv"
onmouseover = "this.style.backgroundImage='url(green.gif)'"
onmouseout = "this.style.backgroundImage='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"
border="0"
usemap="#m_Untitled-1" />
</div>
<map name="m_Untitled-1">
<area shape="circle" coords="135,136, 50" href="http://www.espn.com"
target="_blank"
title="espn" alt="espn" >

<area shape="poly" coords="139,11,91,61,194,61,139,11"
href="http://www.abcnews.com"
target="_blank" title="abc news" alt="abc news" >

<area shape="rect" coords="2,60,81,200" href="http://www.yahoo.com"
target="_blank"
title="yahoo" alt="yahoo" >

<area shape="rect" coords="2,1,83,61" href="http://www.google.com"
target="_blank"
title="go google" alt="go google" >

</map>
</body>
</html>

Martin Weil · Dec 16, 2006

jim said:
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
which
is the same size/dimensions as the images you use for your mouseover
image-swap.

second: create a div box which is the same dimensions as your swapping
images.
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,

Jim
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----------------------
<html>
<head>
<title>Untitled-1</title>
<meta http-equiv="Content-Type" content="text/html;">
</head>
<body bgcolor="#ffffff">
<div id="dvv"
onmouseover = "this.style.backgroundImage='url(green.gif)'"
onmouseout = "this.style.backgroundImage='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"
border="0"
usemap="#m_Untitled-1" />
</div>
<map name="m_Untitled-1">
<area shape="circle" coords="135,136, 50" href="http://www.espn.com"
target="_blank"
title="espn" alt="espn" >

<area shape="poly" coords="139,11,91,61,194,61,139,11"
href="http://www.abcnews.com"
target="_blank" title="abc news" alt="abc news" >

<area shape="rect" coords="2,60,81,200" href="http://www.yahoo.com"
target="_blank"
title="yahoo" alt="yahoo" >

<area shape="rect" coords="2,1,83,61" href="http://www.google.com"
target="_blank"
title="go google" alt="go google" >

</map>
</body>
</html>

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

Martin Weil · Dec 17, 2006

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...

Martin

Arne · Dec 17, 2006

Once said:
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...

???????????????????????????????

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: http://www.netmeister.org/news/learn2quote.html#toc2
* From Google: http://www.safalra.com/special/googlegroupsreply/

Jonathan N. Little · Dec 17, 2006

Arne said:
???????????????????????????????

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: http://www.netmeister.org/news/learn2quote.html#toc2
* From Google: http://www.safalra.com/special/googlegroupsreply/

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

dorayme · Dec 17, 2006

Martin Weil said:
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...

Martin

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.

combind hotspot and rollover?	6	Nov 9, 2003
image map, javascript	9	Jun 19, 2009
rollover/image.usemap crashes IE	0	Jun 7, 2004
image map	1	Mar 9, 2006
Please help	1	Sep 16, 2004
RollOver and onMouseOver?	4	Jan 13, 2006
trouble with rollover buttons on master page	4	Mar 27, 2008
Rollover image work in Netscape 7 but not work in Internet Explorer 6	2	Apr 28, 2004

Help (please): Rollover Image AND Hotspot

Martin Weil

Jonathan N. Little

Martin Weil

jim

Martin Weil

Martin Weil

Arne

Jonathan N. Little

dorayme

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads