Question

我把麻烦的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？

Answer 1

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

如果省略“usemap”属性。 HTML，Jquery Type2和Plain JavaScript版本运行良好。

我认为您必须将事件附加到地图而不是使用该地图将元素设置为棕褐色。或者你只需要单独对待它。

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

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

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

Answer 2

尝试将您的活动mouseover mouseout替换为mouseenter mouseleave。您可能也想阅读this。

Answer 3

如果您尝试通过以下代码使用hover和mouseover事件获得mouseout效果

$('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
});

多个鼠标翻转方法的示例在FF或Chrome上都不起作用，所有这些都适用于IE。为什么？

3 个答案: