Home/ Questions/Q 8604897
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T02:41:24+00:00

I’ve condensed my troublesome wenpage into a simple example. I want a simple image

  • 0

I’ve condensed my troublesome wenpage into a simple example. I want a simple image change or replacemnt when the mouse rolls over it. I’ve tried multiple ways, but none work consistantly.

Here is the html of a test web page all the mouse overs work fine in IE but won’t work in FF or Chrome

<!DOCTYPE html>
<html lang="en">
  <head>
<title></title>

<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</script>
    <script src="../js/jquery-1.8.0.min.js"></script>
    <script src="../js/jquery.colorbox.js"></script>
    <script>
        $(document).ready(function(){
            //Examples of how to assign the ColorBox event to elements   addnewbut
            $(".syncarea").hover(function() {
                $(this).attr("src","../images/syncarea.jpg");
                    }, function() {
                $(this).attr("src","../images/syncareafilld.jpg");
            });
            $('img').bind('mouseover mouseout', function() {
                $(this).attr({
                    src: $(this).attr('data-other-src') 
                    , 'data-other-src': $(this).attr('src') 
                })
            });
        });
if (document.images) { 

     img1on= new Image;
     img1on.src="../images/syncareafilld.jpg";  


     img1off= new Image;
     img1off.src="../images/syncarea.jpg";


} 


function rollon(imgName){
   if (document.images)
      {
             imgOn=eval(imgName + "on.src");
             document[imgName].src= imgOn;
      }
}


function rolloff(imgName)
 {
   if (document.images)
      {
            imgOff=eval(imgName + "off.src");
            document[imgName].src= imgOff;
      }
 }


</script>
  </head>
  <body>
    Quick test of browser rolover responces. <br> 
    <center>
    HTML style <br>
    <a nohref="#nohref" onMouseOver='syncarea.src="../images/syncareafilld.jpg"' onMouseOut='syncarea.src="../images/syncarea.jpg"'>
    <img src="../images/syncarea.jpg" name="syncarea" title="Special Functions Area (Sync Control panel)" usemap="#spclfuncarea" /></a><br>
    jQuery type 1<br>
      <img data-other-src="../images/syncareafilld.jpg" src="../images/syncarea.jpg" 
       title="Special Functions Area (Sync Control panel)" usemap="#spclfuncarea" /> <br>
       jQuery type 2 <br>
       <img src="../images/syncarea.jpg" class="syncarea"  title="Special Functions Area (Sync Control panel)" usemap="#spclfuncarea" /> <br>
      plain Javascript version 1<br>

      <A onmouseover="rollon('img1')" onmouseout="rolloff('img1')">
         <IMG SRC="../images/syncarea.jpg" name="img1" title="Special Functions Area (Sync Control panel)" 
             usemap="#spclfuncarea" /> </A><br>


    </center>
        <map name="spclfuncarea" id="spclfuncarea">

      <area shape="rect" coords="7,44,94,66" href="maksats.html" title="Make Satellite Databases" />
      <area shape="rect" coords="107,44,185,67" href="syncsats.html" title="Synchronize Databases" />
      <area shape="rect" coords="86,14,184,35" class="small" href="#dbtyp-info" title="Database Type Marker" alt="Database Type"/>

      <area shape="default"  nohref="#nohref"  title="Special functions area."/> </map>  </body>
</html>

Why do these not work with FF and Chrome?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I tested your page and it seems there is something wrong with jquery and imagemaps. Or they need to be treated in an other way.

    If you leave out the “usemap” attributes. The HTML, Jquery Type2, and Plain JavaScript versions work perfectly.

    I think either you have to attach your events to the map rather tan to the elements using that map. Or you just need to treat it seperately.

    If it won’t work attaching events to the map see this for another hint:

    http://jquery-howto.blogspot.de/2009/01/jquery-and-html-image-maps.html

    EDIT: tested again. Attaching the events to the map won’t work. So you’ll need to handle those imageMaps in a special way.

    • 0