多個鼠標滾動方法的例子無法在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上。爲什麼？

回答

相關問題