Help (please): Rollover Image AND Hotspot

M

Martin Weil

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
 
J

Jonathan N. Little

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?
 
J

jim

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

Martin Weil

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

Martin Weil

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
 
A

Arne

D

dorayme

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,904
Latest member
HealthyVisionsCBDPrice

Latest Threads

Top