Image Maps
Ever want to link certain parts of an image without using complex tables and div layers? It's pretty easy, actually. All you need is a few guidelines before you begin.
The Image
Here I have an image that needs to be mapped and linked in certain areas. I have highlighted in green exactly what needs linking:
That is the entire area that needs the linking, as for individual links, here they are, highlighted again and zoomed in:
This is how the picture will be linked. I didn't make perfect highlights, but you'll need to be in the ballpark of the word, give it enough space so that the mouse can hover close to it to get to the URL destination, but do not make it so close that the words and links run into each other.
Now, go to your coded page and insert this code next to the picture that you want to have links on it:
|
<![CDATA[
<map name="Untitled_1_Map">
<area shape="rect" alt="NAME OF LINK"
coords="COORDS OF LINK" href="LINK">
</map>
]]>
|
Then, edit your linked image code from this:
To this:
|
<![CDATA[
<img src="image.jpg" usemap="#Untitled_1_Map">
]]>
|
Now begin editing your first code accordingly, but for now, ignore the COORDS variable. Also, do not mess with the map's name, (Untitled_1_Map) or else the links will not work. Do this by inserting the correct URLs and Link names into the open variables for the alt (alternative text) values.
The COORDS
What the heck are Coords? Well, if you've ever done any map reading in your life, you'll know that you can pinpoint any location in the world using latitude and longitude numbers, called coordinates. Or if you are in an algebra class and graph lines, you'll also know the meaning of coordinates. They are numbers that specify where you are.
How do you find coordinates? I like to use Microsoft Paint to do the job. It's actually quite easy to do it too.
Open up your image in MS paint. I will begin by linking the word Munchkin to link.htm. So I take my cursor and point it at the top left hand corner of the word "Munchkin."
In paint, towards the middle right side of your window, you will see two numbers separated by a comma as you move your cursor around the image. These are your coordinates:
The coordinates I got for the top left hand corner of the word "Munchkin" is 490 and 403.
So now, I go back to my original code and edit link 1 to accomodate the coordinates. Separate the numbers with a comma as well.
|
<![CDATA[
<area shape="rect" alt="Munchkin"
coords="490,403" href="link.htm">
]]>
|
I have changed the alt name to Munchkin and inserted the first two coordinates of the link, and also gave the link a URL to go to. But you're not done yet.
Now, I go to the bottom right hand side of "Munchkin" and get its coordinates. (557,419).
And then I insert the new coordinates into my code:
|
<![CDATA[
<area shape="rect" alt="Munchkin"
coords="490,403,557,419"
href="link.htm">
]]>
|
Notice how I added the numbers 557 and 419 into the coordinate sequence.
I am now done with this link. Repeat this process by copying the general code between the map tags and inserting the coordinates of the top left hand corner and bottom right hand corners of your desired linked areas.
Here is my end code, with all five areas linked:
|
<![CDATA[
<map name="Untitled_1_Map">
<area shape="rect" alt="Munchkin"
coords="490,403,557,419"
href="link.htm">
<area shape="rect" alt="Videos"
coords="558,404,606,417"
href="link.htm">
<area shape="rect" alt="Site"
coords="610,403,639,417"
href="link.htm">
<area shape="rect" alt="WWW"
coords="642,405,678,418"
href="link.htm">
<area shape="rect" alt="Home"
coords="682,404,720,417"
href="link.htm">
</map>
]]>
|
And then you can put text and objects all over your images and link them at the same time!
|