开发者

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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜