Menu
Hi Guys,
I’ve created a page with an image of a man where a user is able to click on an area and a div is positioned at that point containing a white circle. This code works in all browsers except IE 6 where it creates a duplicate white circle beneath the one which is placed in the correct location. Could anyone tell me how to get rid of this second circle? The circle is essentially a div with a background image assigned. Please see my code below:
[code]
<%@ Page Language=”VB” AutoEventWireup=”false” CodeFile=”ImageClick.aspx.vb” Inherits=”ImageClick” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” >
<head runat=”server”>
<title>Image Click</title>
<script type=”text/javascript” language=”javascript” src=”JQuery.js”></script>
<script language=”javascript” type=”text/javascript”>
window.onload = Init
function Init()
{
document.getElementById(“divBlackSpot”).style.display = “none”;
}
function getCoordinates(e)
{
var el = e.target || e.srcElement;
// Get mouse click co-ords
var ePos = {x:0, y:0};
if (‘number’ == typeof e.pageX)
{
ePos.x = e.pageX;
ePos.y = e.pageY;
}
else if (‘number’ == typeof e.clientX)
{
ePos.x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
ePos.y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
// Get image top left co-ords
var elPos = {x:0, y:0};
if (el.offsetParent)
{
elPos.x = el.offsetLeft;
elPos.y = el.offsetTop;
while (el = el.offsetParent)
{
elPos.x += el.offsetLeft;
elPos.y += el.offsetTop;
}
}
// Write relative position of click to form controls
// var clickedXPosition = (ePos.x – elPos.x);
// var clickedYPosition = (ePos.y – elPos.y);
var clickedXPosition = ePos.x – 5;
var clickedYPosition = ePos.y – 5;
// Position a black dot over the clicked area
document.getElementById(“divBlackSpot”).style.display = “inline”;
document.getElementById(“divBlackSpot”).style.position = “absolute”;
document.getElementById(“divBlackSpot”).style.top = clickedYPosition + “px”;
document.getElementById(“divBlackSpot”).style.left = clickedXPosition + “px”;
//alert(“Clicked X Position = ” + clickedXPosition + “rnClicked Y Position = ” + clickedYPosition);
}
</script>
</head>
<body>
<form id=”form1″ runat=”server” action=”ImageClick.aspx” method=”post”>
<div style=”cursor: pointer;”>
<img src=”images/man.png” alt=”Man” usemap=”#map1″ />
<map id=”map1″ name=”map1″>
<area shape=”poly” alt=”” title=”” coords=”170,70,157,77,157,88,149,88,162,109,143,120,130,118,123,125,57,133,19,134,35,148,50,144,58,144,66,140,99,146,140,141,147,175,143,207,143,216,140,263,136,306,143,364,130,375,146,381,153,367,153,355,149,346,157,312,155,295,168,230,166,220,175,222,174,246,185,303,184,320,189,332,188,372,198,382,211,378,200,362,200,352,206,310,202,287,202,244,197,206,198,199,193,179,198,140,235,144,247,147,282,143,293,145,311,149,316,139,302,132,269,134,240,128,235,131,221,126,201,117,195,121,178,107,180,99,186,98,186,86,182,87,181,77,170,70″ style=”cursor: pointer;” onclick=”getCoordinates(event)” />
</map>
</div>
<div id=”divBlackSpot” style=”height: 10px; width: 10px; background-image: url(images/blackdot.gif); cursor: pointer;”></div>
</form>
</body>
</html>
Thanks,
Tim