Hi all,
I am fairly new to Javascript as I am working with it in my Intro to Internet Programming course. I got most of the code to work like I wanted it to. The only problem is that the coordinates don't seem to be right and the City of Madison web page does not open when the user clicks on the star image.
This is how I have the code:
<script language="javascript">
<!--
function mouseDownHandler(e)
{
var x, y // point clicked by user (absolute in document)
var id // id of clicked tag
var imgLeft,imgTop // left and top edge of map image in document
var imgX, imgY // point clicked relative to map image
var scrLeft, scrTop // amount window has been scrolled
// Get coords clicked by user (absolute in document).
x = window.event.clientX
y = window.event.clientY
// Get id of the element (tag) clicked.
id = document.elementFromPoint(x,y).id
// Show id, absolute coords, in first TextBox.
document.form1.txtOutput1.value = id + " (" + x + "," + y + ")"
// Get scroll amounts, show in fourth TextBox.
scrLeft = document.body.scrollLeft
scrTop = document.body.scrollTop
document.form1.txtOutput4.value = "Scoll amounts = (" + scrLeft + "," + scrTop + ")"
if (id == "idWIMap")
{
// Get image position in the window.
imgLeft = document.images[0].offsetLeft
imgTop = document.images[0].offsetTop
// Calculate coords relative to map itself.
imgX = x - imgLeft + scrLeft
imgY = y - imgTop + scrTop
// Show relative coords in second TextBox.
document.form1.txtOutput2.value = "Clicked map at (" + imgX + "," + imgY + ")"
// If user clicked Madison, open official Madison site in another window.
if (imgX > 225 && imgX < 232 && imgY > 310 && imgY < 325)
{
// Echo that Madison clicked in third TextBox.
document.form1.txtOutput3.value = "Clicked Madison ..."
window.open("http://www.ci.madison.wi.us", "OfficialMadisonSite", "height=400,width=500")
}
else
document.form1.txtOutput3.value = ""
}
else
document.form1.txtOutput2.value = "Did NOT click map!"
} // mouseDownHandler()
//-->
</script>
</head>
<body id="idBody" onMouseDown="mouseDownHandler()">
<center id="idCenter">
<h1 id="idHdrText">Click on a City.</h1>
<br />
<img id="idWIMap" src="WisconsinCrop.gif" width="371" height="358" />
<br /><br /><br />
<form id="idForm1" name="form1">
<input type="text" name="txtOutput1" id="txtOutput1" size="30" /><br />
<input type="text" name="txtOutput2" id="txtOutput2" size="30" /><br />
<input type="text" name="txtOutput3" id="txtOutput3" size="30" /><br />
<input type="text" name="txtOutput4" id="txtOutput4" size="30" /><br />
</form>
The website address you can go to is as follows
http://www.angelfire.com/pro/interne...avascript.html
Type in
Javascript after the /
Does anyone see anything wrong?
Any help would be greatly appreciated.
Thanks,
Ben
Madison Area Technical College student
JavaScript Code problem
Linear Mode
