0

面倒なウェブページを簡単な例に凝縮しました。マウスがロールオーバーしたときに、単純な画像の変更または置換が必要です。複数の方法を試しましたが、一貫して機能するものはありません。

これはテスト Web ページの 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 と imagemap に何か問題があるようです。または、別の方法で治療する必要があります。

「usemap」属性を省略した場合。HTML、Jquery Type2、および Plain JavaScript バージョンは完全に機能します。

そのマップを使用する要素に日焼けするのではなく、イベントをマップに添付する必要があると思います。または、個別に処理する必要があります。

イベントをマップに添付してもうまくいかない場合は、別のヒントとしてこれを参照してください。

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

編集：再度テストしました。イベントをマップに添付しても機能しません。そのため、これらの imageMap を特別な方法で処理する必要があります。

于 2012-10-01T07:04:24.820 に答える
0

次のコードでイベントをhover使用して効果を取得しようとしている場合mouseovermouseout

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

それではうまくいきません。

代わりに、属性を持つ画像のみを使用mouseenterして、ホバー効果のためにこれを試すことができますmouseleavedata-other-src

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

mouseover mouseoutイベントをに置き換えてみてくださいmouseenter mouseleave。これも読んでみたいかも。

于 2012-10-01T06:39:48.113 に答える