Help - Search - Members - Calendar
Full Version: Image Mapping?
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
kennys_beach_bum
I was wondering if somebody could image map this image for me. I've tried doing it so many times but I can't get it right.

Also, where do you put the image mapping in the document?

Thanks in advance to anybody who can help me. biggrin.gif
pandy
QUOTE
I was wondering if somebody could image map this image for me. I've tried doing it so many times but I can't get it right.


No. angry.gif I'll try to help you to do it yourself though. biggrin.gif

QUOTE
Also, where do you put the image mapping in the document?

It doesn't matter.

Read here. Judging from the image, you want rectangles.
http://htmlhelp.com/reference/html40/special/map.html
http://htmlhelp.com/reference/html40/special/area.html

A rectangular selection takes 4 coordinates. You measure them like this (this can be done in almost any image program).

1. The first parameter is the distance from the left edge of the image to the left edge of the so far imagined selection rectangle.
2. The second parameter is the distance from the top of the image to the top of the selection rectangle.
3. The third parameter is the distance from the left of the image to the right of the selection rectangle.
4. The fourth parameter is the distance from the top of the image to the bottom of the selection triangle.

So you always measure from top-left of the image and the order is left-top-right-bottom of the selection rectangle. Look, I made a drawing for you. tongue.gif

Click to view attachment

Then you just list the parameters. I only did the "Show" link.
HTML
<map name="mymap">
<area href="show.html" alt="Show" coords="320,385,360,402">
</map>


'rect' is the default value for 'shape', so you can exclude that. Now you can do the rest yourself, right? smile.gif
kennys_beach_bum
^Thanks for all your help!! biggrin.gif I have all the coordinates now... But I still don't know where to put the mapping. I've tried putting it in many different places but nothing works...
pandy
IPB Image

A common mistake is to forget the hash sign in usemap="#map_name".

Here's a present for you BTW. happy.gif It's an old freeware called ScreenCalipers. There's a paid version now, but I like this one better. While a graphic program can do the measuring, I find it handy with this floating caliper. You can measure the embedded image directly in the browser. No install. Just run it. Hit F1 for help, should you need it.
http://web.telia.com/~u18121512/Calipers.zip (size tiny)
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2010 Invision Power Services, Inc.