Cannot get multiple images to hover on mouse over
I am trying to make different images hover over a table of sliced images when you mouse over a particular image.
Example:
- mouse over image 1 = have image 1.1 hover over entire table of images in spot A
- mouse over image 2 = have image 2.2 hover over entire table of images in spot B
- etc.
What I have so far only allows me to mouse over image 1 and have image 1.1 hover over entire table in spot A. Any time I try to move forward with more div's on other images it just jacks everything up.
<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开发者_C百科" 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>
If you are using jQuery, consider using this approach:
//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;
I don't think this is a 100% solution for you but it may point you in the right direction.
加载中,请稍侯......
精彩评论