PDA

View Full Version : Demonstrating WHICH PART of an image is "mapped"


viktor
03-17-2003, 05:49 PM
The code pasted further down makes it possible to submit the coordinates for an imagemap (type 'poly') into an inputbox, by clicking at different areas of an image. The use for this btw would be in an ASP-form, so that admins can define where a country/city etc is located when it is added to a database.

QUESTION: Now I wonder if there is anyway of demonstrating WHICH PART of the image has been "mapped" (like it is in for example dreamweaver). I can only guess how it could be done:
- Imagefiltering but only for the area which is defined by the coordinates,?
- "Draw" colored lines between coordinates, on a layer on top of the image?

Please someone help, or let me know if this is completely impossible! I'm sure if it would work this could be useful for someone else as well. Thanks/Viktor

------

<html>
<head>
<script language="javascript">
function writeMap(writeWhere){
previousvalue=document.forms.myform[writeWhere].value
thisX = event.clientX
thisY = event.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" usemap="#myimage.gifMap">
<map name="myimage.gifMap">
</map>
</A>
<form name="myform" method="post" action="">
<input type="text" name="myfield">
</form>

</body>
</html>

ez4ne12c
03-18-2003, 02:45 AM
you could do that server-side just create a transparent gif..
you would need acces to server and perl or even better php

it is not impossible but that may not be the answer you want..
also you could look at SVG..
ez

beetle
03-18-2003, 03:06 AM
You could used translucent DIV elements to mimick rectangular areas, but would need SVG or something else for anything non-rectangular

joh6nn
03-18-2003, 03:58 AM
i think some transparent gifs would work fine. one square, one circular. pick a color for the border ( like red ) and then pick a background color ( like white ). make the bg color transparent, now you have a red square and circle. you place over the image map, and you can use the width & height properties to stretch them as necessary.

you won't be able to do polygonal areas exactly. the best you'll be able to do will be approximations, by making a veritcal line gif, a horizontal gif, and two diagonal gifs.

RoyW
03-18-2003, 04:21 AM
http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm

ez4ne12c
03-19-2003, 12:33 AM
very cool solution RoyW
thanks i can use that..
ez

ConfusedOfLife
11-18-2003, 07:43 PM
Originally posted by ez4ne12c
you could do that server-side just create a transparent gif..
you would need acces to server and perl or even better php

it is not impossible but that may not be the answer you want..
also you could look at SVG..
ez

Just a quick question: How can I do it server-sided?? I really don't know anything about that transparent gif. RoyW linked me to this thread, but my original thread is in here (http://www.codingforums.com/showthread.php?s=&postid=149881#post149881). I see that Roy's work is more beautiful, but I wana know if your solution is easier/faster, coz I can't implement all this JS at the moment (I'm too busy!).

Thanx