Jump to content

Image mapping - Help!


Recommended Posts

Hi there - I've been learning html through W3Schools.com. At the beginning of the course I read that using TextEdit is a great too to use for practice. However, now I'm at 'Create an Image Map' (http://www.w3schools...tryhtml_areamap) and I have no idea how to actually assign coordinates to objects in the image I'm working with. Any help is very much appreciated! Thanks ! Ekorn

  • Like 1
Link to post
Share on other sites

Hi and thanks for your reply. I've read this page.. maybe I'm missing something. But it seems to me that there must be some kind of application needed. Say I have an image of a necklace which as 3 beads. I want to make each bead clickable. How can I find out the coordinates of the beads in order to make the image map? In the example they have of the the clickable planets, we see the coordinates in the html script. But how did they locate these coordinates? Thanks again!

Link to post
Share on other sites

Any image editor will do, such as MS Paint. The coordinate of the mouse cursor is shown on the status bar. The top left corner of the image is 0,0. I think the best approach is to make a copy of the image and then actually mark the points on the copy so that you can see them. Also I believe that if you scale the image this will have an effect on the imagemap.

Edited by davej
Link to post
Share on other sites
  <map name="planetmap">  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"></map>

The sun: <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"> The first "0" is the distance from the left edge of the rectangle.....The second "0" is the distance from the top edge....The "82" is the width....The "124" is the height...... The planet Mercury: <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"> The "90" is the distance from the left edge.....The "58" is the distance form the top edge.....The "3" is the radius of the circle...... Hope this helps......

Edited by scout1idf
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...