Post by StefanPendl on May 26, 2008 16:51:21 GMT -5
The server side image map of the previous post does not seem to be easy to get working.
Below find a client side image map, that will fill two textboxes with the coordinates of the click in image coordinates.
Below find a client side image map, that will fill two textboxes with the coordinates of the click in image coordinates.
' testing image map
LoadGraphic #ImgMap, ResourcesRoot$ + "\button.jpg"
ImgWidth = #ImgMap Width()
ImgHeight = #ImgMap Height()
print "Image:"
print "Width ... "; ImgWidth; " Height ... "; ImgHeight
print "Position:"
Print "X: ";
textbox #PosX, ""
Print " Y: ";
textbox #PosY, ""
print "Hover over the image to see the coordinates"
print "Click on the image to fill the textboxes"
'alt and title must be the same to display tooltip in all browsers
'IE uses alt, all others use title, which is the correct way
MapID$ = "AreaTest"
html "<img src='../../button.jpg'
alt='Area Test'
title='Area Test'
usemap='#"; MapID$; "'
/>"
html "<script type='text/javascript'>
function ShowCoords(x,y)
{
document.getElementById('#PosX').value = x
document.getElementById('#PosY').value = y
}
</script>"
Call StartMap MapID$
For Column = 1 to ImgWidth
For Row = 1 to ImgHeight
Call CreateArea "rect", Column-1; ","; Row-1; ","; Column; ","; Row, Column-1; ","; Row-1
Next
Next
Call EndMap
'id and name must be the same
'some browsers use id some name as the reference
'if there are areas defined inside of others,
'the order must be innermost to outermost
Sub StartMap ID$
html "<map id='"; ID$; "' name='"; ID$; "'>"
End Sub
Sub CreateArea Shape$, Coords$, Title$
html "<area
shape='"; Shape$; "'
coords='"; Coords$; "'
alt='"; Title$; "'
title='"; Title$; "'
onclick=ShowCoords("; Coords$; ")
/>"
End Sub
Sub EndMap
html "</map>"
End Sub