OnMouseOver Hotspot Change Two Images

Vetir39 · 05-11-2009, 09:51 PM

Hello, I am trying to create a rollover on a stock index graph when I rollover one of three geographic areas (Americas, Asia, Europe) on a separate image . So far I have been only able to create the rollover for the separate countries, without the second image. Here is the code I found and adapted:

<script type="text/javascript">

</script>

<img alt="Bloomberg Tab" border="0" usemap="#Asia_map" height="30" src="http://images.bloomberg.com/r06/homepage/asia_home_tab.gif" id="Asia_pic" width="342" name="Asia_pic" class="flt_lft"/>
<map id="Asia_map" name="Asia_map">
<area shape="rect" coords="172,10,260,30" onmouseover="MM_swapImage('Asia_pic','','http://images.bloomberg.com/r06/homepage/europe_home_tab.gif',1)" alt="Euro Tab" onmouseout="MM_swapImgRestore()" href="http://www.bloomberg.com/index_eu.html"/>

<area shape="rect" coords="0,10,105,30" onmouseover="MM_swapImage('Asia_pic','','http://images.bloomberg.com/r06/homepage/us_home_tab.gif',1)" alt="US Tab" onmouseout="MM_swapImgRestore()" href="http://www.bloomberg.com/index_americas.html"/></map>

Also, I have been able to connect the two images by using the following code, but this only allows viewing two regions/corresponding graphs, instead of three - and it works only by rolling over the entire tab graph, instead of specific regions (hotspots):

<script type="text/javascript">

</script>

<a
onmouseover="roll('sub1', 'http://images.bloomberg.com/r06/homepage/europe_home_tab.gif', 'sub2', 'http://images.bloomberg.com/r06/homepage/HP_UKX.png')"
onmouseout="roll('sub1', 'http://images.bloomberg.com/r06/homepage/us_home_tab.gif', 'sub2', 'http://images.bloomberg.com/r06/homepage/HP_INDU.png')" href="http://images.bloomberg.com/r06/homepage/HP_INDU.png">

<img border="0" width="325"
height="30" src="http://images.bloomberg.com/r06/homepage/us_home_tab.gif" name="sub1" align="top"/>
</a>

<img width="325" src="http://images.bloomberg.com/r06/homepage/HP_INDU.png" name="sub2" height="175" align="left"/>

I have tried combining the two codes in various ways but so far without any luck. Any suggestions would be much appreciated!

Thanks!

Old Pedant · 05-11-2009, 10:29 PM

Ummm...you are declaring this function to take *THREE* PAIRS of image names and image file names:

Code:

function roll(img_name1, img_src1, img_name2, img_src2,img_name3, img_src3)
{
    document[img_name1].src = img_src1;
    document[img_name2].src = img_src2;
    document[img_name3].src = img_src3;
}

But then when you *call* that function you only pass *TWO* pairs:

Code:

<a
onmouseover="roll(
    'sub1', 'http://images.bloomberg.com/r06/homepage/europe_home_tab.gif',
    'sub2', 'http://images.bloomberg.com/r06/homepage/HP_UKX.png')"
...

So why are you surprised that nothing happens in the third image???

Try again, this time passing THREE pairs.

But I don't understand why you WANT to change 3 images. Your first paragraph only talks about changing two images.

Vetir39 · 05-11-2009, 11:05 PM

Thank you so much for your reply - you have a very quick eye for detail.

The reason why I didn't go with the second method is that it does not allow to put hotspots on each region (Americas, Asia, Europe). I need some sort of way of combining the two methods (i.e. rolling over two images synchronously). I put the third pair in the function when I was playing around with it - but it does not seem to effect the function when using 2 pairs.

You are absolutely correct that I need only two rollovers, so my difficulty is not with passing a third pair, but with getting OnMouseOver to perform two functions at once. Or could there be a different, and more elegant solution?

My knowledge in programming is very basic - please excuse.

Vetir39 · 05-12-2009, 08:43 PM

In case it may be able to help - here is the site where the two versions of the code are placed: http://saedias.blogspot.com/

The graph is located on left-hand side right below the profile info. Again, I'd like to have the ability to use the tab with the three regions as hotspots that link to the appropriate graphs. The graph below the tab only allows viewing two regions and it works by rolling over the entire tab, instead of the region-specific hotspots.

Thank you for any suggestions!

Old Pedant · 05-13-2009, 01:52 AM

Okay, so the idea is that when the person rolls over "Americas" then the stock chart for "Americas" appears. Ditto for "Europe" and "Asia". Right??

But *WHY* do you then want to REVERT BACK to the prior image when you mouse off one of the words??? Why not just leave the current stock there, as is??

So why do we need any "image map"? Why can't we just use <span>s and be happy? And what is the URL of the third graph??? I can't demo the code to you with only the two images.

************

Incidentally, your page there has a virus. When I right-clicked and downloaded the image file (HP_NKY.png), it also tried to hand me a Trojan virus that my virus scan software detected and killed.

You need to clean up that page and/or site, it would seem.

Old Pedant · 05-13-2009, 02:02 AM

Never mind...figured it out. It should be
HP_INDU.png
right?

Old Pedant · 05-13-2009, 02:41 AM

Surely lots and lots of other ways to do this, but this scheme is actually very efficient. Ensures that the images will all be there when the mouse is used, for example.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<style>
div#GHOLD { position: relative; width: 325px; height: 204px; 
            background-color: black; font-family: arial, helvetica, sans-serif; font-size: 16px; font-weight: bold;
          }
div.gname { position: absolute; top: 7px; left: 0px; height: 23px;  text-align: center;
            background-color: blue; color: orange; border: solid white 1px; padding-top: 4px;
            z-index: 20;
          }
div.bname { position: absolute; top: 3px; left: 0px; height: 27px;  text-align: center;
            background-color: black; color: white; border: solid white 1px; padding-top: 4px;
            border-bottom: solid black 1px;
            z-index: 25;
          }
div.ihold { position: absolute; top: 36px; left: 0px; 
            width: 325px; height: 168px; z-index: 10; 
          }
img.bgraph { border: none; width: 325px; height: 168px; z-index: 10; }
</style>
<script>
function graphShow(which)
{
    var ghold = document.getElementById("GHOLD");
    var gdivs = ghold.getElementsByTagName("DIV");
    gdivs[0].className = gdivs[1].className = gdivs[2].className = "gname";
    gdivs[which].className = "bname";
    gdivs[3].style.zIndex = gdivs[4].style.zIndex = gdivs[5].style.zIndex = 10;
    gdivs[which+3].style.zIndex = 15;
}
</script>
</head>
<body>
<div id="GHOLD">
<div class="bname" style="width: 135px;" onmouseover="graphShow(0);">
    AMERICAS
</div>
<div class="gname" style="left: 135px; width: 75px;" onmouseover="graphShow(1);">
    ASIA
</div>
<div class="gname" style="left: 210px; width: 113px;" onmouseover="graphShow(2);">
    EUROPE
</div>
<div class="ihold" style="z-index: 15;">
<img class="bgraph" src="http://images.bloomberg.com/r06/homepage/HP_INDU.png" alt="DOW chart">
</div>
<div class="ihold">
<img class="bgraph" src="http://images.bloomberg.com/r06/homepage/HP_NKY.png" alt="NIKKEI chart" style="z-index: 10;">
</div>
<div class="ihold">
<img class="bgraph" src="http://images.bloomberg.com/r06/homepage/HP_UKX.png" alt="STOXX chart" style="z-index: 10;">
</div>
</div>
</body>
</html>

Only tested in MSIE 6 and FireFox. Should be checked in other browsers.

Vetir39 · 05-13-2009, 09:08 AM

Thank you so much, OP!!

That is incredibly gracious of you. I adapted the code a little bit and it appears to work well in both Firefox and IE.

Thank you!!