Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    OnMouseOver Hotspot Change Two Images

    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">
    <!--
    function MM_swapImgRestore() { //v3.0
    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_preloadImages() { //v3.0
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }

    function MM_findObj(n, d) { //v4.01
    var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
    if(!x && d.getElementById) x=d.getElementById(n); return x;
    }

    function MM_swapImage() { //v3.0
    var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </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">
    <!--

    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;
    }

    //-->
    </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!

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,184
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    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.

  • #3
    New to the CF scene
    Join Date
    May 2009
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #4
    New to the CF scene
    Join Date
    May 2009
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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!

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,184
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    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.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,184
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    Never mind...figured it out. It should be
    HP_INDU.png
    right?

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,184
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts

    Try this...

    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.

  • Users who have thanked Old Pedant for this post:

    Vetir39 (05-13-2009)

  • #8
    New to the CF scene
    Join Date
    May 2009
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thumbs up

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


  •  

    Tags for this Thread

    Posting Permissions

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