www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 17

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

  1. #1

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



    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.
    Last edited by Ben The Cartoon; 04-24-2003 at 09:05 PM.

  2. #2

    Unhappy Is this not possible?

    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

  3. #3
    Join Date
    Nov 2002
    Location
    Hermantown, MN
    Posts
    1,777
    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.
    Compguy Pete
    The Benevolent Administrator

    No child should have to deal with a Brain Stem Tumor...
    http://www.OneAna.com

  4. #4
    Join Date
    Dec 2002
    Location
    Pleasanton, CA
    Posts
    2,132
    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!!

  5. #5

    OKay... Here's the deal.

    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

  6. #6

    OKay... Here's the deal.

    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.
    Last edited by Ben The Cartoon; 04-30-2003 at 08:47 PM.

  7. #7
    Join Date
    Dec 2002
    Location
    Pleasanton, CA
    Posts
    2,132
    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.

  8. #8
    Join Date
    Dec 2002
    Location
    Pleasanton, CA
    Posts
    2,132
    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.
    Last edited by Nedals; 05-01-2003 at 12:28 AM.

  9. #9

    thanks a bunch

    Hey thanks,

    I'll try that out posthaste!

    -Ben

  10. #10
    Join Date
    Dec 2008
    Posts
    5
    Quote Originally Posted by Nedals View Post
    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.

  11. #11
    Join Date
    Dec 2002
    Location
    Pleasanton, CA
    Posts
    2,132
    Try taking out the onclick="return false".

  12. #12
    Join Date
    Dec 2008
    Posts
    5

    Thanks!

    Thank you Nedals your a legend in your own lifetime!

    Cheers

  13. #13
    Join Date
    Dec 2008
    Posts
    5

    Still more assistance required

    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

  14. #14
    Join Date
    Dec 2008
    Posts
    5

    Code

    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>

  15. #15
    Join Date
    Dec 2008
    Posts
    5

    Anyone?

    Still looking for some help on this one.

    Thanks

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles