dcsimg
CodeGuru Home VC++ / MFC / C++ .NET / C# Visual Basic VB Forums Developer.com
Results 1 to 2 of 2

Thread: Multiple image swap on rollover

  1. #1
    Join Date
    Sep 2004
    Posts
    12

    Multiple image swap on rollover

    Think this is possible, but head is sore from banging on the desk. Want to do two swaps in two different areas. Top is large state image with image map hrefs. Underneath is list of cities with a 'blank' image. When the mouse is over the city name, I want the 'blank' image to switch to arrow and the large state map to switch highlighting county. I've got top part to work, but not the flashing arrow. Tried it without all of the arr array - didn't seem needed, but didn't work. Any Help? Here it is:


    In header:
    function swapover(n) // swaps the images on each mouseover
    {
    document.images['m'].src = eval("m" + n + ".src");
    document.images['arr'+n ].src= eval("arr1.src");
    }
    function swapout(n) // swaps the images back on each mouseout
    {
    document.images['m'].src = eval("m0.src");
    document.images['arr'+n ].src = eval("arr0.src");
    }

    // --></script>
    </head>
    <body topmargin="5" leftmargin="5"><center>
    <script language="Javascript">
    <!--
    if (document.images)
    {
    arr0 = new Image(9,9);
    arr0 = "images/pixel2.gif";
    arr1 = new Image(9,9);
    arr1 = "images/arrow13t.gif";
    arr2 = new Image(9,9);
    arr2 = "images/arrow13t.gif";
    arr4 = new Image(9,9);
    arr4 = "images/arrow13t.gif";
    arr5 = new Image(9,9);
    arr5 = "images/arrow13t.gif";
    arr7 = new Image(9,9);
    arr7 = "images/arrow13t.gif";
    arr9 = new Image(9,9);
    arr9 = "images/arrow13t.gif";
    arr10 = new Image(9,9);
    arr10 = "images/arrow13t.gif";
    arr12 = new Image(9,9);
    arr12 = "images/arrow13t.gif";
    arr13 = new Image(9,9);
    arr13 = "images/arrow13t.gif";
    arr14 = new Image(9,9);
    arr14 = "images/arrow13t.gif";
    arr15 = new Image(9,9);
    arr15 = "images/arrow13t.gif";
    arr16 = new Image(9,9);
    arr16 = "images/arrow13t.gif";

    m0 = new Image(475,288);
    m0.src = "images/m0.gif";
    m1 = new Image(475,288);
    m1.src = "images/m1.gif";
    m2 = new Image(475,288);
    m2.src = "images/m2.gif";
    m4 = new Image(475,288);
    m4.src = "images/m4.gif";
    m5 = new Image(475,288);
    m5.src = "images/m5.gif";
    m7 = new Image(475,288);
    m7.src = "images/m7.gif";
    m9 = new Image(475,288);
    m9.src = "images/m1.gif";
    m10 = new Image(475,288);
    m10.src = "images/m10.gif";
    m12 = new Image(475,288);
    m12.src = "images/m12.gif";
    m13 = new Image(475,288);
    m13.src = "images/m13.gif";
    m14 = new Image(475,288);
    m14.src = "images/m14.gif";
    m15 = new Image(475,288);
    m15.src = "images/m15.gif";
    m16 = new Image(476, 284);
    m16.src = "images/m16.gif";
    }
    // --></script>

    <img border="0" src="images/m0.gif" name="m" usemap="#FPMap0" width="475" height="288">
    <map name="FPMap0">
    <area onmouseover="swapover(2)" onmouseout="swapout(2)" href="http://www.something.org/" shape="polygon" coords="260, 111, 344, 81, 372, 151, 284, 167">
    <area onmouseover="swapover(9)" onmouseout="swapout(9)" href="http://www.something.org/" shape="polygon" coords="21, 213, 20, 265, 78, 263, 99, 226, 120, 223, 125, 207, 76, 213, 63, 198">
    <area onmouseover="swapover(5)" onmouseout="swapout(5)" href="http://www.something.org/" shape="polygon" coords="244, 85, 284, 166, 254, 192, 211, 148, 191, 107">
    <area onmouseover="swapover(10)" onmouseout="swapout(10)" href="http://www.something.org/" shape="polygon" coords="285, 169, 316, 223, 353, 213, 363, 154">
    <area onmouseover="swapover(4)" onmouseout="swapout(4)" href="http://www.something.org/" shape="polygon" coords="210, 147, 184, 158, 184, 189, 225, 251, 244, 253, 253, 193">
    <area onmouseover="swapover(1)" onmouseout="swapout(1)" href="http://www.something.org/" shape="polygon" coords="229, 257, 183, 188, 131, 199, 123, 224, 136, 224, 163, 258">
    <area onmouseover="swapover(7)" onmouseout="swapout(7)" href="http://www.something.org/" shape="polygon" coords="357, 105, 414, 49, 443, 128, 370, 143, 357, 101, 364, 98">
    <area onmouseover="swapover(14)" onmouseout="swapout(14)" href="http://www.something.org/" shape="polygon" coords="334, 21, 387, 75, 415, 50, 391, 4">
    <area onmouseover="swapover(13)" onmouseout="swapout(13)" href="http://www.something.org/" shape="polygon" coords="364, 168, 355, 210, 416, 211, 415, 191, 385, 162">
    <area onmouseover="swapover(12)" onmouseout="swapout(12)" href="http://www.something.org/" shape="polygon" coords="373, 146, 364, 165, 387, 159, 419, 192, 419, 210, 459, 211, 454, 124">
    <area onmouseover="swapover(15)" onmouseout="swapout(15)" href="http://www.something.org/" href="http://www.wncguide.com/swai_co/Welcome.html" shape="polygon" coords="191, 110, 209, 144, 181, 156, 184, 186, 133, 197, 153, 171, 67, 161">
    <area onmouseover="swapover(16)" onmouseout="swapout(16)" href="http://www.something.org/" shape="polygon" coords="284, 168, 315, 222, 247, 253, 256, 191"></map>

    <a onmouseover='swapover(1)' onmouseout='swapout(1)' class='home3' href='http://www.something.org'>
    <img src='../images/pixel2.gif' border='0' width='9' height='9' name='arr1'>Some city one</a><br>
    <a onmouseover='swapover(15)' onmouseout='swapout(15)' class='home3' href='http://www.something.org'>
    <img src='../images/pixel2.gif' border='0' width='9' height='9' name='arr15'>Some city two</a><br>

    etc.

  2. #2
    Join Date
    Nov 2004
    Posts
    13

    Re: Multiple image swap on rollover

    Looking at this the first thing i'd try is to swap the eval statements like below


    In header:
    function swapover(n) // swaps the images on each mouseover
    {
    document.images['m'].src = eval("m" + n + ".src");
    document.images[eval('arr'+n) ].src= arr1.src;
    }
    function swapout(n) // swaps the images back on each mouseout
    {
    document.images['m'].src = eval("m0.src");
    document.images[eval('arr'+n) ].src = arr0.src
    }

    Not sure if this is the answer but worth a try perhaps.

    __________________
    Remote Control Cars at RC-Playtime.co.uk

Posting Permissions

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


Windows Mobile Development Center


Click Here to Expand Forum to Full Width




On-Demand Webinars (sponsored)