1. 首页
  2. 问答
  3. 无法将多张图片悬停在鼠标上方

无法将多张图片悬停在鼠标上方

2011-04-14 59 views
0

我试图将鼠标悬停在特定图片上时将不同图片悬停在切片图片的表格上。无法将多张图片悬停在鼠标上方

实施例：

  • 鼠标移到图像1 =有图像1.1悬停在点图像的整个表阿
  • 鼠标移到图像2 =具有图像中的地点B
    • 2.2悬停在图像的整个表
  • 等

我迄今只允许我鼠标移到图像1和具有图像1.1悬停在整个表现货A.任何时候，我尝试使用其他图像更div的向前推进只是把所有东西都拉起来。

<html> 
<head> 
<title>map</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 

<script type="text/javascript"> 
function init() { 
    loadAll(document.getElementById('map1')); 
} 

window.onload = init; 

function loadAll(arrayLoading) { 
    var areas = arrayLoading.getElementsByTagName('area'); 
    for (var i = 0; i < areas.length; i++) areas[i].onmouseover = mouseIsOver; 
} 

function mouseIsOver() { 
    var area = this; 

    var coords = this.coords; 
    var x1 = parseInt(coords); 
    coords = coords.substring(coords.indexOf(",") + 1); 
    var y1 = parseInt(coords); 
    coords = coords.substring(coords.indexOf(",") + 1); 
    var x2 = parseInt(coords); 
    coords = coords.substring(coords.indexOf(",") + 1); 
    var y2 = parseInt(coords); 

    var img = document.createElement("img"); 
    img.src = area.getAttribute("imgSrc"); 
    img.style.position = 'absolute'; 
    img.style.left = x1 + 'px'; 
    img.style.top = y1 + 'px'; 
    img.style.height = y2 - y1 + 'px'; 
    img.style.width = x2 - x1 + 'px'; 

    area.parentNode.appendChild(img); 

    img.onmouseout = function() { 
     this.parentNode.removeChild(this); 
     setTimeout(function() { 
      area.onmouseover = mouseIsOver; 
     }, 50); 
    }; 

    area.onmouseover = null; 
} 

     </script> 
     <style type="text/css"> 
      #map1 
      { 
       position: relative; 
      } 
     </style> 
</head> 
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> 
<!-- ImageReady Slices (map.psd) --> 
<table id="Table_01" width="651" height="761" border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
     <td colspan="14"> 
      <img src="images/map_01.png" width="650" height="213" alt="" /></td> 
     <td> 
      <img src="images/spacer.gif" width="1" height="213" alt="" /></td> 
    </tr> 
    <tr> 
     <td colspan="11"> 
      <img src="images/map_02.png" width="442" height="48" alt="" /></td> 
     <td colspan="2"> 
      <img src="images/map_03.png" width="87" height="48" alt="" /></td> 
     <td rowspan="14"> 
      <img src="images/map_04.png" width="121" height="547" alt="" /></td> 
     <td> 
      <img src="images/spacer.gif" width="1" height="48" alt="" /></td> 
    </tr> 
    <tr> 
     <td colspan="6" rowspan="4"> 
      <img src="images/map_05.png" width="257" height="164" alt="" /></td> 
     <td colspan="3" rowspan="2"> 
      <img src="images/map_06.png" width="92" height="69" alt="" /></td> 
     <td colspan="3" rowspan="2"> 
      <img src="images/map_07.png" width="94" height="69" alt="" /></td> 
     <td> 
      <img src="images/map_08.png" width="86" height="1" alt="" /></td> 
     <td> 
      <img src="images/spacer.gif" width="1" height="1" alt="" /></td> 
    </tr> 
    <tr> 
     <td rowspan="12"> 
      <img src="images/map_09.png" width="86" height="498" alt="" /></td> 
     <td> 
      <img src="images/spacer.gif" width="1" height="68" alt="" /></td> 
    </tr> 
    <tr> 
     <td colspan="4" rowspan="2"> 
     <div id="map1"> 
       <div class ="noborder"> 
        <img src='images/map_10.png' alt="" width="93" height="95" usemap=#airmap> 
        <map name=airmap> 
         <area shape=Rect Coords=-17,-5,107,109 imgSrc="images/Rt5.png" /> 
        </map> 
      </div> 
      </div></td> 
<td colspan="2"> 
      <img src="images/map_11.png" width="93" height="1" alt="" /></td> 
     <td> 
      <img src="images/spacer.gif" width="1" height="1" alt="" /></td> 
    </tr> 
    <tr> 
     <td colspan="2" rowspan="10"> 
      <img src="images/map_12.png" width="93" height="429" alt="" /></td> 
     <td> 
      <img src="images/spacer.gif" width="1" height="94" alt="" /></td> 
    </tr> 
    <tr> 
     <td colspan="4" rowspan="2"> 
      <img src="images/map_13.png" width="230" height="81" alt="" /></td> 
     <td colspan="4" rowspan="3"> 
      <img src="images/map_14.png" width="77" height="82" alt="" /></td> 
     <td colspan="2"> 
      <img src="images/map_15.png" width="43" height="1" alt="" /></td> 
     <td> 
      <img src="images/spacer.gif" width="1" height="1" alt="" /></td> 
    </tr> 
    <tr> 
     <td colspan="2" rowspan="8"> 
      <img src="images/map_16.png" width="43" height="334" alt="" /></td> 
     <td> 
      <img src="images/spacer.gif" width="1" height="80" alt="" /></td> 
    </tr> 
    <tr> 
     <td colspan="3" rowspan="2"> 
      <img src="images/map_17.png" width="153" height="84" alt="" /></td> 
     <td rowspan="2"> 
      <img src="images/map_18.png" width="77" height="84" alt="" /></td> 
     <td> 
      <img src="images/spacer.gif" width="1" height="1" alt="" /></td> 
    </tr> 
    <tr> 
     <td colspan="3"> 
      <img src="images/map_19.png" width="28" height="83" alt="" /></td> 
     <td rowspan="6"> 
      <img src="images/map_20.png" width="49" height="253" alt="" /></td> 
     <td> 
      <img src="images/spacer.gif" width="1" height="83" alt="" /></td> 
    </tr> 
    <tr> 
     <td rowspan="2"> 
      <img src="images/map_21.png" width="119" height="48" alt="" /></td> 
     <td colspan="4" rowspan="2"> 
      <img src="images/map_22.png" width="112" height="48" alt="" /></td> 
     <td colspan="2"> 
      <img src="images/map_23.png" width="27" height="1" alt="" /></td> 
     <td> 
      <img src="images/spacer.gif" width="1" height="1" alt="" /></td> 
    </tr> 
    <tr> 
     <td colspan="2" rowspan="4"> 
      <img src="images/map_24.png" width="27" height="169" alt="" /></td> 
     <td> 
      <img src="images/spacer.gif" width="1" height="47" alt="" /></td> 
    </tr> 
    <tr> 
     <td colspan="2" rowspan="2"> 
      <img src="images/map_25.png" width="120" height="62" alt="" /></td> 
     <td colspan="3"> 
      <img src="images/map_26.png" width="111" height="23" alt="" /></td> 
     <td> 
      <img src="images/spacer.gif" width="1" height="23" alt="" /></td> 
    </tr> 
    <tr> 
     <td colspan="3" rowspan="2"> 
      <img src="images/map_27.png" width="111" height="99" alt="" /></td> 
     <td> 
      <img src="images/spacer.gif" width="1" height="39" alt="" /></td> 
    </tr> 
    <tr> 
     <td colspan="2"> 
      <img src="images/map_28.png" width="120" height="60" alt="" /></td> 
     <td> 
      <img src="images/spacer.gif" width="1" height="60" alt="" /></td> 
    </tr> 
    <tr> 
     <td> 
      <img src="images/spacer.gif" width="119" height="1" alt="" /></td> 
     <td> 
      <img src="images/spacer.gif" width="1" height="1" alt="" /></td> 
     <td> 
      <img src="images/spacer.gif" width="33" height="1" alt="" /></td> 
     <td> 
      <img src="images/spacer.gif" width="77" height="1" alt="" /></td> 
     <td> 
      <img src="images/spacer.gif" width="1" height="1" alt="" /></td> 
     <td> 
      <img src="images/spacer.gif" width="26" height="1" alt="" /></td> 
     <td> 
      <img src="images/spacer.gif" width="1" height="1" alt="" /></td> 
     <td> 
      <img src="images/spacer.gif" width="49" height="1" alt="" /></td> 
     <td> 
      <img src="images/spacer.gif" width="42" height="1" alt="" /></td> 
     <td> 
      <img src="images/spacer.gif" width="1" height="1" alt="" /></td> 
     <td> 
      <img src="images/spacer.gif" width="92" height="1" alt="" /></td> 
     <td> 
      <img src="images/spacer.gif" width="1" height="1" alt="" /></td> 
     <td> 
      <img src="images/spacer.gif" width="86" height="1" alt="" /></td> 
     <td> 
      <img src="images/spacer.gif" width="121" height="1" alt="" /></td> 
     <td></td> 
    </tr> 
</table> 
<!-- End ImageReady Slices --> 
</body> 
</html>

来源

2011-04-14 Dave C

+0

首先，Java≠JavaScript;第二，请将您的代码包含在您的问题中，我不希望被迫导航到另一个网站以查看它（以及如果该其他网站发生故障，该怎么办？）。 – 2011-04-14 19:46:41

回答

1

如果您正在使用jQuery，可以考虑使用这种方法：

//add this line below line 33: 
img.addClass('imageClass'); 



//Then, you can use that to target your image hovers. 
//this will fire on any image that has the class "imageClass". 
    $('imageClass').mouseleave(function() 
            { 
    $(this).parentNode.removeChild($(this)); 
     //$(this) is not the same as using this! To really get an idea how this behaves, trace the object this in the function. 
     console.log('jQuery this within Event function" '+ $(this)+', Vanilla this: '+ this); 
     setTimeout(function() { area.onmouseover = mouseIsOver; }, 50); 
    }); 

    //this line may need to also change, or simply be removed depending on the behavior.        
    area.mouseenter = null;

我不认为这是给你一个100％的解决方案，但它可以为你指明正确的方向。

来源

2011-04-14 19:58:22 kcent

相关问题

 相关问题