Menu
I have an imageMap which is placed inside a div. When the specific area is clicked, I need an overlay displayed which I have done with help of creating divs using absolute coordinates. I created the absolute coordinates using only the image and no other tag.
It works perfectly when the web page has only the image tag. The overlays show up in different positions when I integrate it with what I need. Here's my code:
what am I doing wrong?
To see the flow, once you load this page, click on the element which says "Select Affected Region" and click on any on the circular regions on the image. The red overlay appears at the bottom of the image.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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;
}
}
}
.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;
}
.left {
float: left;
}
#lymphNode img {
display: block;
margin-left: auto;
margin-right: auto;
}
</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];
if($("#div"+matches).is(":visible"))
$("#div" + matches).hide();
else
$("#div" + matches).show();
});
$('img').click(function (e) {
var offset = $(this).offset();
var relativeX = (e.pageX - offset.left);
var relativeY = (e.pageY - offset.top);
alert(relativeX + ':' + relativeY);
});
});
</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"> Scan Images </div> </a>
<a href="#" class="links" data-showdiv="lymphNode"> <div class="menuItem fontSize"> Select Affected Region </div> </a>
<a href="#" class="links" data-showdiv="userForm"> <div class="menuItem fontSize"> Patient Details </div> </a>
<a href="#" class="links" data-showdiv="confirmation"> <div class="menuItem fontSize"> Confirmation </div> </a>
</div>
</div>
<div id="parentDiv" style="width:832px; height: 548px;display: inline-block;">
<div class="divs smallViewer" style="display:none;" id="viewer">
<div class="papaya"> </div>
</div>
<div id="lymphNode" class="divs" style="display:none;">
<img src="image.jpg" width="500" height="500" alt="Planets" usemap="#imageMap"/>
<div id="div1" title="node1" style="width:13px;height:13px;position:absolute;top:185;left:325;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div2" title="node2" style="width:13px;height:15px;position:absolute;top:185;left:348;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div3" title="node3" style="width:15px;height:17px;position:absolute;top:219;left:241;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div4" title="node4" style="width:15px;height:17px;position:absolute;top:214;left:257;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div5" title="node5" style="width:15px;height:17px;position:absolute;top:249;left:252;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div6" title="node6" style="width:13px;height:15px;position:absolute;top:267;left:172;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div7" title="node7" style="width:13px;height:12px;position:absolute;top:253;left:180;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<div id="div8" title="node8" style="width:13px;height:12px;position:absolute;top:100;left:209;background-color:#ff4c4c;opacity:0.5;display:none;"></div>
<map id="imageMap" name="imageMap">
<area shape="circle" coords="325,185,5" href="#" alt="Buccal Node" title="Buccal Node" id="node1"/>
<area shape="circle" coords="345,183,5" href="#" alt="Node 2" title="Parietal Node" id="node2"/>
<area shape="circle" coords="240,217,8" href="#" alt="Node 3" title="Node 3" id="node3"/>
<area shape="circle" coords="257,215,8" href="#" alt="Node 4" title="Node 4" id="node4"/>
<area shape="circle" coords="252,249,8" href="#" alt="Node 5" title="Node 5" id="node5"/>
<area shape="circle" coords="171,265,8" href="#" alt="Node 6" title="Node 6" id="node6"/>
<area shape="circle" coords="171,251,8" href="#" alt="Node 7" title="Node 7" id="node7"/>
<area shape="circle" coords="209,457,8" href="#" alt="Node 8" title="Node 8" id="node8"/>
</map>
</div>
</div>
</div>
</div>
</body>
</html>
Here is the code without any of the div elements. The plain imageMap only.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
.circleBase {
border-radius: 50%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
}
.type1 {
width: 100px;
height: 100px;
background: yellow;
border: 3px solid red;
}
.type2 {
width: 50px;
height: 50px;
background: #ccc;
border: 3px solid #000;
}
.type3 {
width: 500px;
height: 500px;
background: aqua;
border: 30px solid blue;
}
</style>
</head>
<body>
<div style="height:550px; width: 832px;">
<img src="image.jpg" width="500" height="500" alt="Planets" usemap="#imageMap"/>
<div id="div1" title="node1" style="width:13px;height:13px;position:absolute;top:185;left:325;background-color:#ff4c4c;opacity:0.5"></div>
<div id="div2" title="node2" style="width:13px;height:15px;position:absolute;top:185;left:348;background-color:#ff4c4c;opacity:0.5"></div>
<div id="div3" title="node3" style="width:15px;height:17px;position:absolute;top:219;left:241;background-color:#ff4c4c;opacity:0.5"></div>
<div id="div4" title="node4" style="width:15px;height:17px;position:absolute;top:214;left:257;background-color:#ff4c4c;opacity:0.5"></div>
<div id="div5" title="node5" style="width:15px;height:17px;position:absolute;top:249;left:252;background-color:#ff4c4c;opacity:0.5"></div>
<div id="div6" title="node6" style="width:13px;height:15px;position:absolute;top:267;left:172;background-color:#ff4c4c;opacity:0.5"></div>
<div id="div7" title="node7" style="width:13px;height:12px;position:absolute;top:253;left:180;background-color:#ff4c4c;opacity:0.5"></div>
<map id="imageMap" name="imageMap">
<area shape="circle" coords="325,185,5" href="#" alt="Buccal Node" title="Buccal Node" id="node1"/>
<area shape="circle" coords="345,183,5" href="#" alt="Node 2" title="Parietal Node" id="node2"/>
<area shape="circle" coords="240,217,8" href="#" alt="Node 3" title="Node 3" id="node3"/>
<area shape="circle" coords="257,215,8" href="#" alt="Node 4" title="Node 4" id="node4"/>
<area shape="circle" coords="252,249,8" href="#" alt="Node 5" title="Node 5" id="node5"/>
<area shape="circle" coords="171,265,8" href="#" alt="Node 6" title="Node 6" id="node6"/>
<area shape="circle" coords="171,251,8" href="#" alt="Node 7" title="Node 7" id="node7"/>
</map>
</div>
</body>
<script>
$(document).ready(function() {
$("#div1").hide();
$("#div2").hide();
$("#div3").hide();
$("#div4").hide();
$("#div5").hide();
$("#div6").hide();
$("#div7").hide();
$("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(e){
var offset = $(this).offset();
var relativeX = (e.pageX - offset.left);
var relativeY = (e.pageY - offset.top);
alert(relativeX+':'+relativeY);
});
});
</script>
</html>
476
One way to get the coords of the area clicked can be to have an array of coords of each area and then check which area matches the coords of the pointer when image is clicked. See below code:
var areas = (function(){
var areaCoords = [];
$('#imageMap area').each(function(){
var coords = $(this).attr('coords').split(',');
areaCoords.push({
x:coords[0],
y:coords[1]
});
});
return areaCoords;
}());
$('img').click(function (e) {
var coords;
for (var i=areas.length-1;i>0;i-=1) {
if (e.offsetX >= areas[i].x && e.offsetY >= areas[i].y) {
coords = areas[i];
break;
}
}
console.log(coords.x, coords.y);
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
