How do I put multiple rollover image flips on an image map?

[Ben The Cartoon]

On my site, www.dudworks.com, in the top right corner is a graphical menu. I had to put each link picture as hotlinks on an image map because they weren't positioned in a way that I could break them up into separate pictures.

I want to have each circle change into a picture when it's rolled over, but can't figure out how to do that without having the whole image change.

Help?

-Ben Dudden

Thanks.

[Ben The Cartoon]

So, I'm assuming since no one is responding at all to me, that it might not be possible at all.

If it is (or isn't) could somebody please let me know?


Thanks a lot,
Ben Dudden

[Compguy Pete]

what your looking for has to be done in 1 of 2 ways...

1. Use Flash

2. dont allow the images to overlap however make sure all the images use the same height.

Also Ben sometimes to get an answer you need to wait longer than an hour... To expect much more is not realistic.

[Nedals]

Your page could not be found!! So I do not know if this will work for you.

I want to have each circle change into a picture when it's rolled over, but can't figure out how to do that without having the whole image change

I suggest you break up your image into squares and use an image map on each square to give you the circle 'live' area. Now you can do a rollover to change the square image where only the area inside the circle changes.

Maybe that will work!!

[Ben The Cartoon]

Okay, the link got screwed up because of the comma. www.dudworks.com is the correct address.

Sorry if I had come off as sarcastic or impatient. (It actually had been two days between posts, not an hour.) I was just trying to be concise, lol.

Anyway, the image is set up so that separating squares of the image would be kind of difficult because they would overlap.

Now, I had originally wanted each circle to chance into a circle picture of the same size using image flip technology, and was wondering if it was possible to just change the circle section hotlinked in the image map instead of having a whole new picture load.

I am thinking instead, to have all of the other circles change as well to pictures of the highlighted circle. I think I know how to do this. But only if the other way isn't possible.

-Suggestions?

(Check the site to see what I'm talking about.)

-Ben

[Ben The Cartoon]

Okay, the link got screwed up because of the comma. www.dudworks.com is the correct address.

Sorry if I had come off as sarcastic or impatient. (It actually had been two days between posts, not an hour.) I was just trying to be concise, lol.

Anyway, the image is set up so that separating squares of the image would be kind of difficult because they would overlap.

Now, I had originally wanted each circle to chance into a circle picture of the same size using image flip technology, and was wondering if it was possible to just change the circle section hotlinked in the image map instead of having a whole new picture load.

I am thinking instead, to have all of the other circles change as well to pictures of the highlighted circle. I think I know how to do this. But only if the other way isn't possible.

-Suggestions?

(Check the site to see what I'm talking about.)

-Ben



P.S. Now for some reason, my image swap isn't working in Netscape. No idea why. It works in Internet Explorer though.
That's never happened before.

Gah.

[Nedals]

Now that I can see your page, I understand the problem. If you still want to mess with this to get the effect you originally wanted, here's how I would go about it...

First divide your image into vertical slices such that each new image would contain bits of the image on each side. Now create a image map for each slice that is 'hot' for the major part of the picture (you will loose the hot area to the left and right). Now on mouseover, you change 3 images at once, giving you the picture you want.

A lot of messing around, but it might work for you.

[Nedals]

Some time ago I posted a technique for creating 'hot spots' on a background image, but never actually tried it. Your problem presented a similar solution. So with a little time to spare I came up with this. It creates 'hot spots' only on your images and allows you to add the links. If you are up to it, you could create seperate images for the rollovers.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- saved from url=(0024)http://www.dudworks.com/ -->
<html><head><title>DudWorks.com</title>
<style type="text/css">
body { background:#fff; }
</style>
</head>

<body>
<div style="position:absolute; top:100px; left:100px">
<img name="theImg" src="images/toprightmenu.gif" width=500 height=120 border=0>
</div>

<div style="position:absolute; top:100px; left:100px">
<img name="imgOver" src="images/spacer.gif" width=500 height=120 border=0 usemap="#mapname">
<map name="mapname">
<area shape="circle" coords="46,42,36" href="#" onClick="return false"
onmouseover="imgOver.src='images/toprightmenu1.gif'" onmouseout="imgOver.src='images/spacer.gif'">
<area shape="circle" coords="115,82,36" href="#" onClick="return false"
onmouseover="imgOver.src='images/toprightmenu1.gif'" onmouseout="imgOver.src='images/spacer.gif'">
<area shape="circle" coords="182,40,36" href="#" onClick="return false"
onmouseover="imgOver.src='images/toprightmenu1.gif'" onmouseout="imgOver.src='images/spacer.gif'">
<area shape="circle" coords="250,82,36" href="#" onClick="return false"
onmouseover="imgOver.src='images/toprightmenu1.gif'" onmouseout="imgOver.src='images/spacer.gif'">
<area shape="circle" coords="317,40,36" href="#" onClick="return false"
onmouseover="imgOver.src='images/toprightmenu1.gif'" onmouseout="imgOver.src='images/spacer.gif'">
<area shape="circle" coords="387,82,36" href="#" onClick="return false"
onmouseover="imgOver.src='images/toprightmenu1.gif'" onmouseout="imgOver.src='images/spacer.gif'">
<area shape="circle" coords="455,40,36" href="#" onClick="return false"
onmouseover="imgOver.src='images/toprightmenu1.gif'" onmouseout="imgOver.src='images/spacer.gif'">
</map>
</div>

</body>
</html>

PS: spacer.gif is a 1x1 pixel transparant image.

[Ben The Cartoon]

Hey thanks,

I'll try that out posthaste!

-Ben

[2orak]

Originally Posted by Nedals

Some time ago I posted a technique for creating 'hot spots' on a background image, but never actually tried it. Your problem presented a similar solution. So with a little time to spare I came up with this. It creates 'hot spots' only on your images and allows you to add the links. If you are up to it, you could create seperate images for the rollovers.

Nedals - great post I have searched all day for a way to do this and finally came upon this post. Thanks for the code, I know it is only *cough* 5 years old, wow where did all that time go?

Anyway the code works perfectly for me with the exception of one odd glitch - when you click on the link nothing loads. If you SHIFT/Click then it opens just fine in the new window. Wondering if you have any insight into this?

Here is a snippet of code:

<area shape="RECT" coords="111,4,183,54" href="thermostat.html" onClick="return false"
onmouseover="imgOver.src='images/thermostat.jpg'" onmouseout="imgOver.src='images/trans.gif''">

Any thoughts?

Thanks in advance.

[Nedals]

Try taking out the onclick="return false".

[2orak]

Thank you Nedals your a legend in your own lifetime!

Cheers

[2orak]

Hi again.

Is there any reason that you can't use two of these on the one page? Different map name, different images names etc. The initial images load but no images change when you mousover either map. Links all work, pages open as they should, no broken image tags so everything does as it should with the exception of the image change. If I remove one map at a time, the other works correctly.

Thanks

[2orak]

Here is the code, its a bit messy but shouldn't stop the code from working...

<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
<TITLE>-</TITLE>
<style type="text/css">
</style>

</HEAD>

<body bgcolor="#DCDCE4" text="#000000" link="#ff0000" vlink="#F26D2C" alink="#2C56A0" LEFTMARGIN=0 RIGHTMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 TOPMARGIN=0>

<div style="position:absolute; top:0px; left:60px"><table BORDER="0" CELLPADDING="0" CELLSPACING=0 bgcolor="ffffff">
<tr><TD VALIGN=TOP><center><IMG SRC="images/image1.jpg" BORDER=0></A></center>

<BR>

<!-- BEGIN BODY -->

<table BORDER="0" CELLPADDING="0" CELLSPACING=0 bgcolor="ffffff" WIDTH=890>

<TR>
<TD ALIGN=LEFT VALIGN=TOP WIDTH=890><center>

<!-- START MAP 1 -->

<table BORDER="0" CELLPADDING="0" CELLSPACING=0 bgcolor="ffffff" WIDTH=870>
<tr><TD ALIGN=CENTER VALIGN=TOP WIDTH=870>

<div style="position:absolute; top:320px; left:111px">
<img name="351Cout" src="images/351Cout.jpg" width=672 height=550 border=0>
</div>

<div style="position:absolute; top:320px; left:111px">
<img name="imgOver" src="images/trans.gif" width=672 height=550 border=0 usemap="#351Cout">
<map name="351Cout">

<AREA SHAPE=POLY COORDS="142,267,126,215,114,200,111,189,133,0,29,1,105,192,119,214,138,269,142,267" HREF="accessories.html" ALT="Accessories"
onmouseover="imgOver.src='images/accessories.jpg'" onmouseout="imgOver.src='images/trans.gif'">

<AREA SHAPE=POLY COORDS="144,321,209,368,241,357,342,299,359,311,375,303,366,248,342,212,292,195,172,243,145,266,146, 322,146,322,146,322" HREF="block.html" ALT="Block" onmouseover="imgOver.src='images/block.jpg'" onmouseout="imgOver.src='images/trans.gif'">

<AREA SHAPE=POLY COORDS="153,53,223,105,360,54,351,40,290,11,154,48" HREF="intake.html" ALT="Intake" onmouseover="imgOver.src='images/intake.jpg'" onmouseout="imgOver.src='images/trans.gif'">

<AREA SHAPE=POLY COORDS="157,136,171,150,200,166,213,168,226,180,339,133,290,94,159,134" HREF="gaskets.html" ALT="Gaskets" onmouseover="imgOver.src='images/gaskets.jpg'" onmouseout="imgOver.src='images/trans.gif'">

<AREA SHAPE=POLY COORDS="113,192,194,165,203,168,211,167,217,172,228,183,128,221,123,208,117,202" HREF="heads.html" ALT="Heads" onmouseover="imgOver.src='images/heads.jpg'" onmouseout="imgOver.src='images/trans.gif'">

<AREA SHAPE=POLY COORDS="105,231,122,225,118,215,107,198,99,202,101,225,103,231" HREF="heads.html" ALT="Heads" onmouseover="imgOver.src='images/heads.jpg'" onmouseout="imgOver.src='images/trans.gif'">

<AREA SHAPE=POLY COORDS="310,332,345,389,352,391,455,316,454,304,425,262,407,273,406,286,339,328,326,322,313,326,311, 329" HREF="gaskets.html" ALT="Gaskets" onmouseover="imgOver.src='images/gaskets.jpg'" onmouseout="imgOver.src='images/trans.gif'">

<AREA SHAPE=POLY COORDS="386,380,430,441,545,341,545,330,534,312,508,291,502,291,386,378" HREF="heads.html" ALT="Heads" onmouseover="imgOver.src='images/heads.jpg'" onmouseout="imgOver.src='images/trans.gif'">

<AREA SHAPE=POLY COORDS="525,390,529,397,522,402,523,407,543,430,551,434,563,430,654,367,659,376,556,449,535,439,511, 408,511,396,519,389,527,386" HREF="gaskets.html" ALT="Gaskets" onmouseover="imgOver.src='images/gaskets.jpg'" onmouseout="imgOver.src='images/trans.gif'">

<AREA SHAPE=POLY COORDS="551,311,553,331,560,337,574,338,584,328,581,311,573,305,561,306" HREF="accessories.html" ALT="Accessories" onmouseover="imgOver.src='images/accessories.jpg'" onmouseout="imgOver.src='images/trans.gif'">

<AREA SHAPE=POLY COORDS="523,379,525,387,544,416,559,426,565,426,573,423,666,356,670,348,668,328,650,303,641,301,605, 322,540,362,524,376" HREF="rockerpan.html" ALT="Valve Covers - Pans" onmouseover="imgOver.src='images/rockerpan.jpg'" onmouseout="imgOver.src='images/trans.gif'">

<AREA SHAPE=POLY COORDS="4,396,9,414,28,419,39,415,68,461,77,473,98,463,153,417,157,410,159,353,127,301,116,298,84,31 1,21,338" HREF="accessories.html" ALT="Accessories" onmouseover="imgOver.src='images/accessories.jpg'" onmouseout="imgOver.src='images/trans.gif'">

<AREA SHAPE=POLY COORDS="155,432,163,501,203,533,212,538,227,538,307,538,310,535,351,424,357,401,296,369,285,370,251, 386,242,387,157,427" HREF="rockerpan.html" ALT="Oil Pans" onmouseover="imgOver.src='images/rockerpan.jpg'" onmouseout="imgOver.src='images/trans.gif'">

</MAP>
</div>

<br><img src="images/trans.gif" width=672 height=800 border=0>

</td></tr>
</table>


<!-- START MAP 2 -->


<table BORDER="0" CELLPADDING="0" CELLSPACING=0 bgcolor="ffffff" WIDTH=870>
<tr><TD ALIGN=CENTER VALIGN=TOP WIDTH=870>

<div style="position:absolute; top:1050px; left:111px">
<img name="351Cin" src="images/351CIn.jpg" width=672 height=550 border=0>
</div>

<div style="position:absolute; top:1050px; left:111px">
<img name="imgOver" src="images/trans.gif" width=672 height=550 border=0 usemap="#351Cin">
<map name="351Cin">

<AREA SHAPE=RECT COORDS="8,8,208,143" HREF="accessories.html" ALT="Accessories"
onmouseover="imgOver.src='images/351CIaccessories.jpg'" onmouseout="imgOver.src='images/trans.gif'">

<AREA SHAPE=RECT COORDS="539,391,666,545" HREF="accessories.html" ALT="Accessories" onmouseover="imgOver.src='images/351CIaccessories.jpg'" onmouseout="imgOver.src='images/trans.gif'">

<AREA SHAPE=RECT COORDS="414,469,435,510" HREF="accessories.html" ALT="Accessories" onmouseover="imgOver.src='images/351CIaccessories.jpg'" onmouseout="imgOver.src='images/trans.gif'">

<AREA SHAPE=POLY COORDS="112,446,135,489,148,507,162,512,177,507,187,491,185,478,138,442,117,442" HREF="accessories.html" ALT="Accessories" onmouseover="imgOver.src='images/351CItimingcover.jpg'" onmouseout="imgOver.src='images/trans.gif'">

<AREA SHAPE=POLY COORDS="48,235,4,280,11,295,74,284,268,170,259,165,259,162,275,154,279,154,286,151,287,141,282,135,2 78,132,268,137,268,140,256,144,247,143,48,234,48,234" HREF="camtiming.html" ALT="Cam and Timing" onmouseover="imgOver.src='images/351CIcamtiming.jpg'" onmouseout="imgOver.src='images/trans.gif'">

<AREA SHAPE=POLY COORDS="171,375,188,445,197,459,206,460,237,439,233,422,205,376,181,372,172,374" HREF="camtiming.html" ALT="Cam and Timing" onmouseover="imgOver.src='images/351CIcamtiming.jpg'" onmouseout="imgOver.src='images/trans.gif'">

<AREA SHAPE=POLY COORDS="422,292,436,306,490,367,601,276,565,207,488,197,431,281" HREF="crankends.html" ALT="Crank Accessories" onmouseover="imgOver.src='images/351CIcrankends.jpg'" onmouseout="imgOver.src='images/trans.gif'">

<AREA SHAPE=POLY COORDS="37,544,99,544,144,507,118,462,68,484,36,526,36,531" HREF="crankends.html" ALT="Crank Accessories" onmouseover="imgOver.src='images/351CIcrankends.jpg'" onmouseout="imgOver.src='images/trans.gif'">

<AREA SHAPE=POLY COORDS="154,445,164,460,175,472,190,479,201,466,178,432,164,438,161,441" HREF="crankends.html" ALT="Crank Accessories" onmouseover="imgOver.src='images/351CIcrankends.jpg'" onmouseout="imgOver.src='images/trans.gif'">

<AREA SHAPE=POLY COORDS="254,142,250,101,265,89,354,49,358,87,346,95,345,99,346,102,349,103,351,104,359,97,362,95,364 ,187,350,197,342,198,320,206,308,196,309,178,300,167,288,173,272,163,264,167,260,164,260,162,275,155 ,278,155,284,154,287,150,287,144,287,139,279,131,275,131,267,136,266,139,257,142" HREF="block.html" ALT="Block" onmouseover="imgOver.src='images/351CIblock.jpg'" onmouseout="imgOver.src='images/trans.gif'">

<AREA SHAPE=POLY COORDS="354,48,358,87,361,88,363,90,363,94,362,95,361,96,364,186,419,151,393,110,393,109,463,68,451, 48,429,43,415,31,395,33,355,48" HREF="block.html" ALT="Block" onmouseover="imgOver.src='images/351CIblock.jpg'" onmouseout="imgOver.src='images/trans.gif'">

<AREA SHAPE=POLY COORDS="393,109,419,150,431,175,440,171,553,90,556,79,554,64,525,32,394,108" HREF="heads.html" ALT="Heads" onmouseover="imgOver.src='images/351CIheads.jpg'" onmouseout="imgOver.src='images/trans.gif'">

<AREA SHAPE=POLY COORDS="346,95,345,98,346,101,349,102,351,102,361,95,363,91,362,89,359,87,347,94" HREF="valvetrain.html" ALT="Valve Train" onmouseover="imgOver.src='images/351CIvalvetrain.jpg'" onmouseout="imgOver.src='images/trans.gif'">

<AREA SHAPE=POLY COORDS="554,58,637,3,658,5,659,12,656,23,630,35,633,47,630,61,582,104,570,96,554,58" HREF="valvetrain.html" ALT="Valve Train" onmouseover="imgOver.src='images/351CIvalvetrain.jpg'" onmouseout="imgOver.src='images/trans.gif'">

<AREA SHAPE=POLY COORDS="362,197,373,210,380,211,409,175,401,166,366,195" HREF="valvetrain.html" ALT="Valve Train" onmouseover="imgOver.src='images/351CIvalvetrain.jpg'" onmouseout="imgOver.src='images/trans.gif'">

<AREA SHAPE=POLY COORDS="522,183,542,196,601,195,608,189,613,159,576,125,551,127,533,160,526,174" HREF="oilpump.html" ALT="Oil Pump" onmouseover="imgOver.src='images/351CIoilpump.jpg'" onmouseout="imgOver.src='images/trans.gif'">

<AREA SHAPE=POLY COORDS="335,280,346,275,327,203,318,206,336,275" HREF="oilpump.html" ALT="Oil Pump" onmouseover="imgOver.src='images/351CIoilpump.jpg'" onmouseout="imgOver.src='images/trans.gif'">

<AREA SHAPE=POLY COORDS="182,311,223,294,223,220,235,210,254,210,269,214,277,226,273,326,399,251,407,236,417,234,428, 240,435,252,438,260,414,287,423,295,438,310,440,322,447,407,466,419,461,430,404,475,337,528,247,489, 228,450,232,442,236,440,233,418,230,331,180,323,183,312" HREF="rotating.html" ALT="Rotating Assembly" onmouseover="imgOver.src='images/351CIrotating.jpg'" onmouseout="imgOver.src='images/trans.gif'">

</MAP>
</div>

<br><center><img src="images/trans.gif" width=672 height=550 border=0></center>

</td></tr>

</table>


<!-- END MAP 2 -->

</td></tr>

<tr><TD ALIGN=LEFT VALIGN=TOP>
<br><br><br><br>

</FONT></TD>
</tr>

</TD>
</tr>

</table></center>


<!-- END BODY -->
<br>

<br><br><br>
</TD>
</tr>
</table></div>

</body>
</html>

[2orak]

Still looking for some help on this one.

Thanks