更新答案

Question

我希望在图像地图上的不同区域上悬停时显示不同的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

就像我有一个＆＃34; Content＆＃34; div用于一个图像映射区域＆amp;我想在另一个区域使用不同的div，比如名为＆＃34; Content1＆＃34;。我怎样才能做到这一点？

Answer 1

更新答案

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

我为Script和Workbook创建了2个div，mouser hover并查看。

如果您想彼此重叠，请使用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;
}

Answer 2

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

是否可以在图像映射的不同区域显示不同的div？

2 个答案:

更新答案