Jump to content

Html <img> Usemap Attribute


fabs

Recommended Posts

Making an image an image-map means you can specify bits of the picture as links. Client-side because the linking happens on the client (browser), as opposed to the mouse co-ordinates being captured and processed server-side maybe?

Link to comment
Share on other sites

. . . as opposed to the mouse co-ordinates being captured and processed server-side maybe?
Correct. The ismap attribute defines an image as a map to be evaluated server-side. It passes coordinates to the server, assuming a server script exists to process them. Both kinds of image mapping are very old HTML techniques (early 1990s), but the server-side map came first, and was one of the first common uses for CGI technology. Why client-side mapping wasn't developed first, I don't know. Almost no one uses server-side mapping anymore.
Link to comment
Share on other sites

Hiya. Take this example from an old practice page:

<map name="navigation"><area shape="rect" coords="27,30,126,63" href="index.html" target="top" /><area shape="rect" coords="27,90,126,129" href="java script:nextPage()" /><area shape="rect" coords="27,154,126,193" href="java script:previousPage()" /><area shape="rect" coords="27,217,126,253" href="http://www.w3schools.com/" target="reviewArea"/><area shape="rect" coords="27,275,126,319" href="mailto:chibineku@aol.com" /></map><img src="navigationbar2.gif" height="350px" width="150px" border="0" usemap="#navigation" alt="navigation bar" />

For each area, you need to specify the area that will be a link. For a rectangle, the first 2 numbers of the coords are the x and y location of the top left corner, in pixels. Well, it's kind of the x and -y coords - you need to figure out how far you are from the top, not from the bottom of the picture. If it's a circle, you have 3 numbers: x, y, radius (again, in pixels).

Link to comment
Share on other sites

Your image editor probably has an info palette that shows x/y coordinates as the mouse passes over the image. Park the cursor over key locations and write down the coordinates.ORYou could try this little toy I made for myself. It's really not ready for the public, but it does work, especially with polygons. http://www.sophox.com/mapmaker.htmlOH YEAH! Only works for certain in Firefox.

Link to comment
Share on other sites

Hm, doesn't work for me for some reason. Interesting code though. I reckon it'll take me about a week to decipher, but it'll be an educational week :)

Link to comment
Share on other sites

Hmm. Maybe it only works in beta. Like I said, it was only meant for my use, so when I got it working for me, I stopped developing. :)
you monster! :)
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...