Creating an imagemap with javascript - possible? [Archive]

View Full Version : Creating an imagemap with javascript - possible?

viktor

03-16-2003, 10:23 PM

Hello! I wonder if it would be possible to create an imagemap with javascript - and then store the values (coordinates) in a text-field?

Some ideas/questions:
* Is there a way of finding out the position of the cursor with javascript?
* If so, would it be possible to build an array (stored in for example a textfield) out of the position the cursor has everytime the mouse is clicked?

If it would make things easier, the image could be put in an iframe the same size as the image. Because if the image is positioned at the very top left of a document then the mouse's position in the document would be the same as its position on the image... Hope someone can help me! Thanks/Viktor

Jimbo

03-16-2003, 10:29 PM

well to find the cordinates of the cursor use: "screen.clientX" and "screen.clientY"

screen.clientX meaning how far from the left of the screen and screen.Y meaning how far from the top of the screen

This only works in IE:(

viktor

03-16-2003, 11:01 PM

Thanks! WIth the help of that, I tried to start a little script myself but without much success. I get "undefined" instead of the coordinates. I have prob made some stupid mistake because I'm really new at this... SOmeone please have a look (I use IE btw!):

<html>
<head>
<script language="javascript">
function writeMap(writeWhere){
previousvalue=document.forms.myform[writeWhere].value
thisX = screen.clientX
thisY = screen.clientY
document.forms.myform[writeWhere].value=previousvalue+','+thisX+','+thisY
}
</script>
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<a href="#" onclick="writeMap('myfield')"><img src="myimage.gif" name="myimage.gif" width="174" height="160" border="0"></A>
<form name="myform" method="post" action="">
<input type="text" name="myfield">
</form>

</body>
</html>

cheesebagpipe

03-16-2003, 11:57 PM

thisX = event.clientX
thisY = event.clientY

http://www.webdevelopersjournal.com/articles/jsevents3/jsevents3.html

viktor

03-17-2003, 08:46 AM

Thank you very much! Now I've got an example which works OK. When you click it adds the coordinates into a textbox.

NEXT STEP:
Is it possible to "draw" colored lines from two coordinates to two others? So that a layer could be put on top of the image, and the imagemap which has been created could be demonstrated there.

I will use "Poly" as "map-type" btw.
Thanks again for all help!

viktor

03-17-2003, 09:39 AM

*I END THIS THREAD HERE AND START A NEW ONE BECAUSE THIS IS BASICALLY A DIFFERENT QUESTION*/Viktor