ekorn Posted November 21, 2012 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 Link to comment Share on other sites More sharing options...
niche Posted November 21, 2012 Share Posted November 21, 2012 It's all in the tutorial http://www.w3schools.com/tags/att_area_coords.asp Link to comment Share on other sites More sharing options...
ekorn Posted November 22, 2012 Author 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! Link to comment Share on other sites More sharing options...
davej Posted November 22, 2012 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 Link to comment Share on other sites More sharing options...
scout1idf Posted November 22, 2012 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 Link to comment Share on other sites More sharing options...
ekorn Posted November 27, 2012 Author 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 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now