ekorn 1 Posted November 21, 2012 Report Share Posted November 21, 2012 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 1 Quote Link to post Share on other sites
niche 143 Posted November 21, 2012 Report Share Posted November 21, 2012 It's all in the tutorial http://www.w3schools.com/tags/att_area_coords.asp Quote Link to post Share on other sites
ekorn 1 Posted November 22, 2012 Author Report Share Posted November 22, 2012 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! Quote Link to post Share on other sites
davej 251 Posted November 22, 2012 Report Share Posted November 22, 2012 (edited) 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 November 22, 2012 by davej Quote Link to post Share on other sites
scout1idf 8 Posted November 22, 2012 Report Share Posted November 22, 2012 (edited) <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 November 22, 2012 by scout1idf Quote Link to post Share on other sites
ekorn 1 Posted November 27, 2012 Author Report Share Posted November 27, 2012 Hey thanks everyone! I'm a mac user and Gimp (free download) seems to be a great image editor! Thanks again! Britta Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.