Jump to content

Html Map question


Shadowing

Recommended Posts

I was doing this tutor on a website and something occured to me that how are they making the sun a huge clickable area and the planets a small clickable area? I dont see any html showing size of this? Also how do they know what cords to use?

 

Really appreciate the help

 

here is the link

 

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_areamap

Link to comment
Share on other sites

This is the code on that page with the map co-ords in red.

<html>

<body>

 

<p>Click on the sun or on one of the planets to watch it closer:</p>

 

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />

 

<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>

 

</body>

</html>

 

Link to comment
Share on other sites

This is a tutorial for the areamap.  The entire purpose of this page is to show you how to make the clickable areas.  Which part of it is confusing?  You see the map tag, with three areas inside of it.  One area is bigger than the other two. 

 

They figure out the coordinates using a paintbrush program that shows the coordinates, or they just estimated based on the size of the image, since this image is very simple.

Link to comment
Share on other sites

the part that is confusing is the size of the clickable areas

 

What number or set of code is showing the size of that clickable area?

 

So what is making that one area so big?

I understand how they are making it clickable and all that. Just dont understand what chooses the size of the area able to be clicked.

Only thing i can assume is one of the numbers of the cords equals size

 

thanks really apprecaite the help and fast responce.

really needing to understand size

Link to comment
Share on other sites

The coordinates are the two points of opposite corners of the rectangle that defines the clickable area:

coords="0,0,82,126"

 

That defines a rectangle starting from 0,0 (the top left corner) and goes to 82,126 (in this image, roughly halfway across the bottom). 

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

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.   Restore formatting

  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.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.