0

我已经将我麻烦的 wenpage 压缩成一个简单的例子。当鼠标滑过它时，我想要一个简单的图像更改或替换。我尝试了多种方法，但没有一种方法能始终如一地工作。

这是一个测试网页的 html，所有鼠标悬停在 IE 中都可以正常工作，但在 FF 或 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>

为什么这些不适用于 FF 和 Chrome？

4

3 回答 3

1

我测试了你的页面，似乎 jquery 和 imagemaps 有问题。或者他们需要以其他方式对待。

如果您省略“usemap”属性。HTML、Jquery Type2 和纯 JavaScript 版本完美运行。

我认为要么你必须将你的事件附加到地图上，而不是使用该地图的元素。或者你只需​​要单独对待它。

如果将事件附加到地图不起作用，请参阅此以获得另一个提示：

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

编辑：再次测试。将事件附加到地图将不起作用。因此，您需要以特殊方式处理这些 imageMap。

于 2012-10-01T07:04:24.820 回答
0

尝试将您的事件替换mouseover mouseout为mouseenter mouseleave. 你可能也想读一读这个。

于 2012-10-01T06:39:48.113 回答
0

如果您试图通过以下代码使用和事件来获得hover效果mouseovermouseout

$('img').bind('mouseover mouseout', function() {...})

那么它就行不通了。

相反，您可以尝试使用mouseenter并且mouseleave仅在具有属性的图像上进行悬停效果data-other-src

$('img[data-other-src]').on('mouseenter', function(){
    // code for mouseenter
}).on('mouseleave', function(){
    // code for mouseleave
});
于 2012-10-01T06:56:05.570 回答