Hi
I have the code below which is causing me sleepless nights. The code is taken from an old Classic ASP Learning Management System app and it is from what I call a hot spot question. The student is presented with an image and instruction to click on the relevant portion of the image. So superimposed over the image is an invisible area (the hot spot) that is the correct area to click on. In the code below I've made the hot spot visible and it is represented by the pink rectangle - HS 1. So, any other area of the picture outside of the hot spot is by definition an incorrect place to click. The Hot spot div is layered on top or the image.
How does it work? On page load, the code associates a click event using Javascript to both the picture and the hotspot. Then if the click is in the hot spot a hidden answer field (HSIsCorrect) is set to "Yes". If the click is outside of the hot spot the answer field HSIsCorrect is set to "No" and the form is submitted.
When I run the code in my development environment and on my client's production environment using IE 11 I don't get any problem. However when my client runs it on their same production environment it fails to detect the clicks in the hotspot UNLESS THEY CLICK DIRECTLY ON THE TEXT IN THE TOP LEFT CORNER. It's as if the hot spot doesn't exist unless they click on the text.
I'm not sure if this has any bearing on it, but I see that when my client opens the F12 Developer tool, their default setting is set to IE 7. However, even when we change this to Edge the problem persists.
Please help if you can!
What I have tried:
Here is the code. To run it you will have to point to an image on your PC:
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hot spot test</title>
<script language="JavaScript" type="text/JavaScript">
<!--
var elementIsClicked = false;
function clickHandlerHS(){
elementIsClicked = true;
document.getElementById("HSClicked").value = "Yes";
document.getElementById("HSIsCorrect").value = "Yes";
alert("Hot spot clicked="+elementIsClicked);
formHSpot.submit();
}
function clickHandlerPic(){
elementIsClicked = true;
document.getElementById("HSClicked").value = "Yes";
document.getElementById("HSIsCorrect").value = "No";
alert("Picture clicked="+elementIsClicked);
formHSpot.submit();
}
function GetElement() {
var x = document.getElementById("LayerHS");
if (x.addEventListener) {
document.getElementById("OldBrowser").value = "NO";
var elementHS = document.getElementById("LayerHS");
elementHS.addEventListener("click", clickHandlerHS);
var elementPic = document.getElementById("HotSpotPic");
elementPic.addEventListener("click", clickHandlerPic);
} else if (x.attachEvent) {
document.getElementById("OldBrowser").value = "YES";
var elementHS = document.getElementById("LayerHS");
elementHS.attachEvent("onclick", clickHandlerHS);
var elementPic = document.getElementById("HotSpotPic");
elementPic.attachEvent("onclick", clickHandlerPic);
}
}
</script>
</head>
<body onload="GetElement();">
<img id="HotSpotPic" src="../Graphics/SomeImage.gif" style="position:fixed; left:100px; top:150px; width:120px; height:120px; z-index:1;">
<div id="LayerHS" style=" removed:fixed; removed100px; removed150px; width:100px; height:50px; z-index:2; border: thin solid #FF00FF;">HS 1</div>
<form name="formHSpot" method="post" action="">
<input name="HSSave" type="submit" class="smallButton" id="Refresh" value="Refresh page">
<input type="hidden" name="HSClicked" id="HSClicked" value="">
<input type="hidden" name="HSIsCorrect" id="HSIsCorrect" value="">
<input type="hidden" name="OldBrowser" id="OldBrowser" value="">
</form>
<%
if Request.Form("HSClicked") = "Yes" then
Response.Write("Was hot spot clicked?="&Request.Form("HSClicked"))&"<br>"
Response.Write("Is click correct?="&Request.Form("HSIsCorrect"))&"<br>"
Response.Write("Old browser?="&Request.Form("OldBrowser"))&"<br>"
else
Response.Write("Was hot spot clicked?=No")&"<br>"
Response.Write("Is click correct?="&Request.Form("HSIsCorrect"))&"<br>"
Response.Write("Old browser?="&Request.Form("OldBrowser"))&"<br>"
end if
%>
</body>
</html>