多个鼠标滚动方法的例子无法在FF或Chrome上工作在IE上。为什么？

我把我讨厌的wenpage压缩成一个简单的例子。当鼠标滚过它时，我想要一个简单的图像更改或替换。我尝试了多种方式，但没有一个能够持续工作。多个鼠标滚动方法的例子无法在FF或Chrome上工作在IE上。为什么？

下面是测试网页的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携手？

来源

2012-10-01 Mark Sowards

我测试你的页面尝试一下本作悬停效果，似乎有些不妥使用jQuery和图像映射。或者他们需要以其他方式来对待。

如果省略“usemap”属性。 HTML，Jquery Type2和Plain JavaScript版本完美地工作。

我想要么你必须将你的事件附加到地图上，而不是使用该地图的元素。或者你只需要分开处理它。

如果它不会工作，连接事件，地图看到另一个提示：

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

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

来源

2012-10-01 07:04:24 Chris

谢谢。哇，不能相信其他浏览器不能处理图像映射和鼠标事件。我一直遇到问题，IE没有反应它现在应该如何反过来的方式。 –

尝试用mouseenter mouseleave替换您的事件mouseover mouseout。你也可能想读this。

来源

2012-10-01 06:39:48 shinkou

如果您正在试图通过下面的代码

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

那么它将无法工作得到使用mouseover和mouseout活动的hover效果。

相反，你可以只用图像和mouseenter与mouseleave属性data-other-src

$('img[data-other-src]').on('mouseenter', function(){ 
    // code for mouseenter 
}).on('mouseleave', function(){ 
    // code for mouseleave 
});

来源

2012-10-01 06:56:05

多个鼠标滚动方法的例子无法在FF或Chrome上工作在IE上。为什么？

回答

相关问题