Rollover image work in Netscape 7 but not work in Internet Explorer 6

Discussion in 'Javascript' started by Koh, Apr 28, 2004.

  1. Koh

    Koh Guest

    My rollover image effect work fine in Netscape but not in Internet
    Explorer. Is there any important element or tag that I have miss out
    so it is not working in Internet Explorer? Below is my code, hope
    there is someone can help me. Thank you.

    <html>
    <head>
    <title>List of Products</title>
    <script language="JavaScript">
    <!--
    function swapImage(category)
    {
    document.getElementById('category').src = eval(category + ".src");
    }

    FrozenFoodOMO = new Image();
    FrozenFoodOMO.src = "FrozenFoodOMO.gif";
    FreshFoodOMO = new Image();
    FreshFoodOMO.src = "FreshFoodOMO.gif";
    BeveragesOMO = new Image();
    BeveragesOMO.src = "BeveragesOMO.gif";
    HomeHealthOMO = new Image();
    HomeHealthOMO.src = "HomeHealthOMO.gif";
    PetFoodOMO = new Image();
    PetFoodOMO.src = "PetFoodOMO.gif";

    -->
    </script>
    </head>
    <body>
    <map name="category">
    <area shape="rect" coords="0,0,76,60" href="frozen_food.html"
    onmouseover="swapImage('FrozenFoodOMO')" target="frame_2">
    <area shape="rect" coords="94,0,170,60" href="fresh_food.html"
    onmouseover="swapImage('FreshFoodOMO')" target="frame_2">
    <area shape="rect" coords="192,0,302,60" href="beverages.html"
    onmouseover="swapImage('BeveragesOMO')" target="frame_2">
    <area shape="rect" coords="320,0,400,60" href="home_health.html"
    onmouseover="swapImage('HomeHealthOMO')" target="frame_2">
    <area shape="rect" coords="416,0,495,60" href="pet_food.html"
    onmouseover="swapImage('PetFoodOMO')" target="frame_2">
    </map>
    <img src="Category.gif" id="category" border="0" usemap="#category"
    style="position: absolute; top: 0px; left: 0px;">
    </body>
    </html>
     
    Koh, Apr 28, 2004
    #1
    1. Advertising

  2. Koh

    Koh Guest

    I know which part when wrong. In the img element, I used "category" as
    the value for the ID field. This value is conflict with the parameter
    name that I used on the swapImage function. Therefore I think the IE
    evaluate the category variable in
    document.getElementById('category').src, which result failing to
    locate the img element. I don't know why Netscape work, but after I
    change the conflict value, it work on both browser. Thanks for those
    who had help.

    <img src="Category.gif" id="category" border="0" usemap="#category"
    style="position: absolute; top: 0px; left: 0px;">

    function swapImage(category)
    {
    document.getElementById('category').src = eval(category + ".src");
    }



    (Koh) wrote in message news:<>...
    > My rollover image effect work fine in Netscape but not in Internet
    > Explorer. Is there any important element or tag that I have miss out
    > so it is not working in Internet Explorer? Below is my code, hope
    > there is someone can help me. Thank you.
    >
    > <html>
    > <head>
    > <title>List of Products</title>
    > <script language="JavaScript">
    > <!--
    > function swapImage(category)
    > {
    > document.getElementById('category').src = eval(category + ".src");
    > }
    >
    > FrozenFoodOMO = new Image();
    > FrozenFoodOMO.src = "FrozenFoodOMO.gif";
    > FreshFoodOMO = new Image();
    > FreshFoodOMO.src = "FreshFoodOMO.gif";
    > BeveragesOMO = new Image();
    > BeveragesOMO.src = "BeveragesOMO.gif";
    > HomeHealthOMO = new Image();
    > HomeHealthOMO.src = "HomeHealthOMO.gif";
    > PetFoodOMO = new Image();
    > PetFoodOMO.src = "PetFoodOMO.gif";
    >
    > -->
    > </script>
    > </head>
    > <body>
    > <map name="category">
    > <area shape="rect" coords="0,0,76,60" href="frozen_food.html"
    > onmouseover="swapImage('FrozenFoodOMO')" target="frame_2">
    > <area shape="rect" coords="94,0,170,60" href="fresh_food.html"
    > onmouseover="swapImage('FreshFoodOMO')" target="frame_2">
    > <area shape="rect" coords="192,0,302,60" href="beverages.html"
    > onmouseover="swapImage('BeveragesOMO')" target="frame_2">
    > <area shape="rect" coords="320,0,400,60" href="home_health.html"
    > onmouseover="swapImage('HomeHealthOMO')" target="frame_2">
    > <area shape="rect" coords="416,0,495,60" href="pet_food.html"
    > onmouseover="swapImage('PetFoodOMO')" target="frame_2">
    > </map>
    > <img src="Category.gif" id="category" border="0" usemap="#category"
    > style="position: absolute; top: 0px; left: 0px;">
    > </body>
    > </html>
     
    Koh, Apr 29, 2004
    #2
    1. Advertising

  3. Re: Rollover image work in Netscape 7 but not work in Internet Explorer6

    Koh wrote:
    > <img src="Category.gif" id="category" border="0" usemap="#category"
    > style="position: absolute; top: 0px; left: 0px;">
    >
    > function swapImage(category)
    > {
    > document.getElementById('category').src = eval(category + ".src");
    > }


    eval() is nonsense here (see the FAQ), and the script is
    not downwards compatible as well as error-prone. Write

    JavaScript:

    var HomeHealthOMO = new Image();
    HomeHealthOMO.src = ...;
    // ...

    function swapImage(oCategory)
    {
    var imgs = null, cat = null, cat2 = null;
    if ((imgs = document.images)
    && (imgCat = imgs['category'])
    && imgCat.src
    && oCategory
    && oCategory.src)
    {
    imgCat.src = oCategory.src;
    }
    }

    HTML:

    <area ... onmouseover="swapImage(HomeHealthOMO)" ...>

    or have a look at <http://pointedears.de.vu/scripts/test/hoverMe/> instead.

    > [Top post]


    Please do not do that, see <http://netmeister.org/news/learn2quote.html>
    and the FAQ.


    PointedEars
     
    Thomas 'PointedEars' Lahn, May 11, 2004
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    1
    Views:
    287
  2. Ed Hauptman
    Replies:
    7
    Views:
    1,072
    Ed Hauptman
    Aug 7, 2009
  3. Julia Peterwitz
    Replies:
    13
    Views:
    267
    Thomas 'PointedEars' Lahn
    May 30, 2004
  4. Randy Weber
    Replies:
    1
    Views:
    131
    Martin Walke
    Oct 28, 2004
  5. Dan
    Replies:
    3
    Views:
    137
Loading...

Share This Page