0
我已經爲jpg圖像創建了一個imageMap，並且每次點擊圖像的圓形區域時都會在圖像上添加一個div。加入div後圖像一直向下移動
每當我點擊該區域時，圖像一直向下移動，結果div的位置受到影響。我究竟做錯了什麼？
這裏是我的代碼：
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="papaya.css">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="http://cameronspear.com/downloads/bootstrap-hover-dropdown/bootstrap-hover-dropdown.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="papaya.js"></script>
<style>
.jumbotron {
padding: 0.5em 0.6em;
h1 {
font-size: 2em;
}
p {
font-size: 1.2em;
.btn {
padding: 0.5em;
}
}
}
#lymphNode img {
display:block;
margin-left: auto;
margin-right: auto;
}
.menuItem {
background-color: #e0e0ff;
width:299px;
height:137px;
border:2px solid #000;
}
.fontSize {
padding-top:50px;
color: #00000;
font-family: Georgia, Times, serif;
font-size: 200%;
text-align: center;
}
.menuItem:hover { -moz-box-shadow: 0 0 50px #ccc;
-webkit-box-shadow: 0 0 50px #ccc; box-shadow: 0 0 50px #ccc;
}
.smallViewer {
margin-left:75px;width:700px;height:420px;
}
</style>
<script>
$(document).ready(function()
{
$(".links").click(function()
{
$visible = $("divs:visible");
$(".divs:visible").hide();
$("#" + $(this).attr("data-showdiv")).show();
});
$("map#imageMap").click(function (event) {
var target = $(event.target);
var targetId = target.attr('id');
var matches = targetId.match(/\d+/)[0];
$("#div" + matches).show();
});
$("img").click(function(event){
alert(event.pageX+ ' , ' + event.pageY);
});
});
</script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h2 style="text-align:center;">Head And Neck Therapy </h2>
</div>
<div style="width:1140px; height:550px;border:2px solid #000;">
<div style="float: left">
<div style="width:300px; height: 550px;display: inline-block;">
<a href="#" class="links" data-showdiv="viewer"> <div class="menuItem fontSize"> </div> </a>
<a href="#" class="links" data-showdiv="lymphNode"> <div class="menuItem fontSize"> </div> </a>
<a href="#" class="links" data-showdiv="userForm"> <div class="menuItem fontSize"> </div> </a>
<a href="#" class="links" data-showdiv="confirmation"> <div class="menuItem fontSize"> </div> </a>
</div>
</div>
<div id="parentDiv" style="width:832px; height: 548px;display: inline-block;">
<div id="div1" title="node1" style="width:13px;height:13px;position:relative;top:190;left:485;background-color:#ff4c4c;opacity:0.5;display:none"></div>
<div id="div2" title="node2" style="width:13px;height:15px;position:relative;top:193;left:507;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div3" title="node3" style="width:15px;height:17px;position:relative;top:223;left:417;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div4" title="node4" style="width:15px;height:17px;position:relative;top:227;left:400;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div5" title="node5" style="width:12px;height:15px;position:relative;top:258;left:412;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div6" title="node6" style="width:12px;height:13px;position:relative;top:260;left:355;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div7" title="node7" style="width:13px;height:12px;position:relative;top:273;left:331;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div8" title="node8" style="width:13px;height:12px;position:relative;top:258;left:338;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div10" title="node10" style="width:13px;height:12px;position:relative;top:240;left:498;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div11" title="node11" style="width:13px;height:12px;position:relative;top:254;left:496;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div12" title="node12" style="width:13px;height:12px;position:relative;top:250;left:505;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div13" title="node13" style="width:10px;height:12px;position:relative;top:267;left:505;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div14" title="node14" style="width:12px;height:12px;position:relative;top:280;left:499;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div15" title="node15" style="width:16px;height:12px;position:relative;top:325;left:512;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div16" title="node16" style="width:13px;height:12px;position:relative;top:310;left:537;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div17" title="node17" style="width:13px;height:12px;position:relative;top:304;left:493;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div18" title="node18" style="width:11px;height:12px;position:relative;top:301;left:479;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div19" title="node19" style="width:13px;height:12px;position:relative;top:319;left:478;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div20" title="node20" style="width:13px;height:12px;position:relative;top:315;left:465;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div21" title="node21" style="width:13px;height:12px;position:relative;top:300;left:458;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div22" title="node22"style="width:13px;height:12px;position:relative;top:345;left:438;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div23" title="node23" style="width:13px;height:12px;position:relative;top:322;left:428;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div24" title="node24" style="width:11px;height:20px;position:relative;top:313;left:422;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div25" title="node25" style="width:13px;height:17px;position:relative;top:302;left:412;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div26" title="node26" style="width:13px;height:15px;position:relative;top:305;left:395;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div27" title="node27" style="width:13px;height:12px;position:relative;top:330;left:390;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div28" title="node28" style="width:13px;height:17px;position:relative;top:460;left:385;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div29" title="node29" style="width:13px;height:15px;position:relative;top:468;left:370;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div30" title="node30" style="width:13px;height:17px;position:relative;top:485;left:387;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="lymphNode" class="divs" style="display:none;width:830px; height:548px;">
<img src="image.jpg" width="500" height="500" alt="Planets" usemap="#imageMap">
<map id="imageMap" name="imageMap">
<area shape="circle" coords="325,185,10" href="#" alt="Buccal Node1" title="Buccal Node1" id="node1"/>
<area shape="circle" coords="345,185,8" href="#" alt="Buccal Node2" title="Buccal Node2" id="node2"/>
<area shape="circle" coords="256,214,8" href="#" alt="Buccal Node3" title="Buccal Node3" id="node3"/>
<area shape="circle" coords="239,216,8" href="#" alt="Buccal Node4" title="Buccal Node4" id="node4"/>
<area shape="circle" coords="251,248,8" href="#" alt="Buccal Node5" title="Buccal Node5" id="node5"/>
<area shape="circle" coords="192,250,8" href="#" alt="Buccal Node6" title="Buccal Node6" id="node6"/>
<area shape="circle" coords="170,266,8" href="#" alt="Buccal Node7" title="Buccal Node7" id="node7"/>
<area shape="circle" coords="177,248,8" href="#" alt="Buccal Node8" title="Buccal Node8" id="node8"/>
<area shape="circle" coords="336,233,8" href="#" alt="Buccal Node10" title="Buccal Node10" id="node10"/>
<area shape="circle" coords="336,246,5" href="#" alt="Buccal Node11" title="Buccal Node11" id="node11"/>
<area shape="circle" coords="344,241,5" href="#" alt="Buccal Node11" title="Buccal Node12" id="node12"/>
<area shape="circle" coords="342,260,5" href="#" alt="Buccal Node11" title="Buccal Node13" id="node13"/>
<area shape="circle" coords="337,272,5" href="#" alt="Buccal Node11" title="Buccal Node14" id="node14"/>
<area shape="circle" coords="353,316,10" href="#" alt="Buccal Node11" title="Buccal Node15" id="node15"/>
<area shape="circle" coords="376,303,8" href="#" alt="Buccal Node11" title="Buccal Node16" id="node16"/>
<area shape="circle" coords="332,295,8" href="#" alt="Buccal Node11" title="Buccal Node17" id="node17"/>
<area shape="circle" coords="316,293,5" href="#" alt="Buccal Node11" title="Buccal Node18" id="node18"/>
<area shape="circle" coords="317,313,5" href="#" alt="Buccal Node11" title="Buccal Node19" id="node19"/>
<area shape="circle" coords="304,305,5" href="#" alt="Buccal Node11" title="Buccal Node20" id="node20"/>
<area shape="circle" coords="297,293,5" href="#" alt="Buccal Node11" title="Buccal Node21" id="node21"/>
<area shape="circle" coords="275,337,5" href="#" alt="Buccal Node11" title="Buccal Node22" id="node22"/>
<area shape="circle" coords="268,314,8" href="#" alt="Buccal Node11" title="Buccal Node23" id="node23"/>
<area shape="circle" coords="260,300,10" href="#" alt="Buccal Node11" title="Buccal Node24" id="node24"/>
<area shape="circle" coords="251,291,8" href="#" alt="Buccal Node11" title="Buccal Node25" id="node25"/>
<area shape="circle" coords="234,296,5" href="#" alt="Buccal Node11" title="Buccal Node26" id="node26"/>
<area shape="circle" coords="229,323,5" href="#" alt="Buccal Node11" title="Buccal Node27" id="node27"/>
<area shape="circle" coords="224,451,5" href="#" alt="Buccal Node11" title="Buccal Node28" id="node28"/>
<area shape="circle" coords="209,457,5" href="#" alt="Buccal Node11" title="Buccal Node29" id="node29"/>
<area shape="circle" coords="228,474,8" href="#" alt="Buccal Node11" title="Buccal Node30" id="node30"/>
</map>
</img>
</div>
</div>
</div>
</body>
<script>
</script>
</html>
你可能需要添加'的位置是：絕對的;'你的div所以他們漂浮在它，而不是推下來的用'Z-index'。 – BadHorsie
我假設你添加一個標題爲「node ..」的div。這些div應該有'position：absolute' ... Parentdiv應該有position：relative，所以包含child-div。 – Daniel