0

当一个人悬停在图像地图上的不同区域时，我想显示不同的 div。我尝试创建另一个Map标签，但没有成功。

到目前为止，这是我的代码，

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <style>
            #pipelines {
                margin-left: auto;
                margin-right: auto;
                margin-top: auto;
                margin-bottom: auto;
                float: left;
            }
            #content {
                font-family: Helvetica Neue;
                color: #000;
                border: solid;
                padding-left: 10px;
                padding-right: 10px;
                border-radius: 2px;
                background-color: white;
                position: relative;
                width: 20%;
                height: 0;
                overflow: hidden;
                padding-bottom: 20%;
                display: none;
                float: left;
            }

            hr {
                background-color: #000;
            }

            #members {
                float: right;
                position: relative;
                font-family: Helvetica Neue;
                color: #000;
                border: solid;
                border-width: 1px;
                width: 20%;
                text-align: center;
                padding-left: 10px;
                padding-right: 10px;
                padding-bottom: 10px;
            }

        </style>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Pipeline</title>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

    </head>

    <body>
        <div id="pipelines">
            <img src="2D_Pipeline.jpg" usemap="#Map" border="0"/>
            <map name="Map" id="Map">
              <area shape="rect" coords="29,77,143,105" href="#" alt="Writers" />
              <area shape="rect" coords="199,77,312,105" href="#" alt="Design"  />
            </map>

        </div>

        <div id="content">
            <h4></h4>
            <hr />
            John Howard
            johnhoward@abc.com
            <br />
            (123) 456 - 7890
            <br />
            <button type="button" id="john">
                Add
            </button>
            <hr />
            Leslie Holmes
            lesliehomes@abc.com
            <br />
            (133) 336 - 7890
            <br />
            <button type="button" id="leslie">
                Add
            </button>
        </div>

        <div id="members">
            <h5>Team Members</h5>
            <hr />

        </div>
        <script>

            $("#john").click(function() {
                $("#members").append("John Howard");
            });

            $("#leslie").click(function() {
                $("#members").append("<br/>Leslie Holmes");
            });

            $("#Map").on('mouseenter', function(e) {

                $("#content").stop().show();
                //$("#content").css("visibility", "show");
                $("#content").offset({
                    left : e.pageX,
                    top : e.pageY
                });
                var alt_script = $("area").attr("alt");
                $("#content h4").html(alt_script);
            });

            $("#content").on('mouseenter', function(e) {

                $("#content").stop().show();
                //$("#content").css("visibility", "show");

            });

            $("#Map").on('mouseleave', function(e) {
                $("#content").stop().hide();
            });

            $("#content").on('mouseleave', function(e) {
                $("#content").stop().hide();
            });

        </script>
    </body>
</html>

这是代码中的图像：http: //imgur.com/eJK42SZ

就像我有一个图像地图区域的“内容”div 并且我想为另一个区域使用不同的 div，比如命名为“Content1”。我怎样才能做到这一点？

4

2 回答 2

0

更新答案

你的意思是这样的，DEMO http://jsfiddle.net/yeyene/Pgqh3/3/

我为脚本和工作簿创建了 2 个 div，鼠标悬停并查看。

如果要相互重叠，请使用z-index

<div id="map">
    <div id="content1">Script</div>
    <div id="content2">Workbook</div>
</div>

#map {
    float:left;
    width:946px;
    height:653px;
    background: url(http://i.imgur.com/eJK42SZ.jpg) no-repeat left top;
}
#content1 {
    position:absolute;
    top:110px;
    left:170px;
    width:120px;
    height:30px;
    text-align:center;
    background:#dfdfdf;
    border:1px solid #000;
    font-weight:bold;
}
#content1:hover {
    background:red;
}
#content2 {
    position:absolute;
    top:240px;
    left:170px;
    width:120px;
    height:30px;
    text-align:center;
    background:#dfdfdf;
    border:1px solid #000;
    font-weight:bold;
}
#content2:hover {
    background:yellow;
}
于 2013-06-20T10:38:22.693 回答
0

您可以为地图中的每个区域添加不同的类，然后在附加 mouseenter 和 mouseleave 方法时在 jQuery 中使用该类，因此它们只会在一个确切的区域上激活。我想你最好使用 .hover 功能:)

于 2013-06-20T10:41:06.657 回答