There is nothing much to write about map and area tag in HTML but when I was writing a working code using marquee, map and area tag for my friend , then I realized that having a blog which will explain step by step about all these tag would be really nice for all programmers (specially for the beginners and intermediate HTML programmer).
Problem:I need to use world map and have to show brief information about different continents when mouse is hovered on that continent. Description should be displayed below the image and when again mouse is released from that clickable area, it should show the initial content. And initial content will be within a marquee tag.
Solution:
What is required
Basic knowledge of HTML, CSS, JavaScript.
First I will explain all basic terms and syntax then will post fully working codes.
1. To show how map tag and area tag works
2. How to add hovering style to map
Tags that we are going to use mainly are: map tag, area tag, marquee tag.
JavaScript is needed to do some action when mouse will be hovered on and hovered out at clickable area of the image.
What is map tag in HTML
An image-map is an image with many clickable areas in a single image. The map element contains a number of area elements, which defines the clickable areas in the image map.
Syntax:
<map name="name-of-the-map-tag"> </map>
Inside which there will be many area tag elements. Remember whatever name you are using here under map tag , same name with hash as prefix, you need to use under Image tag <img> too. For ex: <img src=”path of an image” usemap=”# name-of-the-map-tag” />
What is area tag in HTML
The <area> tag defines an area inside an image-map. The area element is always nested inside a <map> tag.
Syntax:
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" />
</map>
Taken from w3schools.org
Area tag has few attributes.
· Shape
It can be rectangle, circle or polygon. Ex: shape=”rect” for rectangle, shape=”poly” for polygon, shape=”circle” for circle.
· Coords attribute is for co-ordinates.
-Image
First of all, you need a suitable graphic. You need to be a bit careful when choosing the right image. An image that cannot be divided in different sections is not your best choice, but an image that has clear cut-offs or lines would be better. Of course, this down not apply to navigational menus or similar, just to everyday pictures like animals, objects or people.
–Co-ordinates
When you've chosen or created your desired image, you then insert it into an image editor (I use Ms Paint) so that you can find its co-ordinates. Try to either write down different co-ordinates of take them one by one and then insert them into your document. I used MeasureIt add-on in firefox to get the co-ordinates.
You'll need different co-ordinates depending on what sort of "hot spot" you'd like to use. Hot spots are covered in the next paragraph.
–Hot Spot
Now that you've got your image and co-ordinates, HTML comes to finalise your job. There are three different shapes (commonly termed "hot spots") that can be used in image maps. They are as follows:
-RECT
-CIRCLE
-POLYGON
–Rect
Rect is obviously short for rectangle. For this one, you'll need two different co-ordinates. Top right and bottom left.
–Circle
Many people get confused with this one and many don't even know that it exists. I personally think it's the easiest of all. All you need is the centre co-ordinate (the point in the centre of your shape) and it's radius size (remember your maths: radius is HALF the diameter. Don't get diameter and radius mixed up!).
– Polygon
The most common hot spot used. This is used for when you can't use neither of the above hot spots. This one uses the co-ordinates of the points in order. So if you're going to have a pentagon (shape with five sides), then you list all five co-ordinates but make sure they're listed in ORDER. One after the other, otherwise you'll confuse some browsers.
–Map Name
Just like any person, document, image and country, image maps also require names. This is simply because if you are going to include more than one map on your page, then to identify which image goes with which map, you'll need to name the map. Confused? Look here:
[…. codes for map which I'll show you later on ….]
</map>
<map name="worldmap">
[……]
</map>
Now, if you didn't name each map, how would the browser know which image goes with which map?
You'll also notice this tag at the end of each map: </map>. You may have suspected by now that </map> just closes the map. Simple!
–Area & Anchor Tags
There are two more tags you should know before completing your image map. <area shape="rect"> is a tag that identifies which hot spot is being used. The other is the anchor tag which I'm sure you already know what it means. It's just <href="https://www.aliencoders.org>. So in a completed code, they should both look like this:
<area shape="circle" coords="245,30" href="https://www.aliencoders.org">
–Final Code
Now you just need to put all these codes together and you've got magic! Here's what your final code should look like:
<body>
<img src="world-map.gif" width="614" height="340" alt="World Map" usemap="#world-map" border="0 px" />
<map name="world-map">
<area shape = "poly" coords = "420, 220, 454,185, 461, 166, 426, 145, 400, 171, 420, 220" onMouseOver="showText('India');" onMouseOut = "showText('');" alt= "India" href="#" /> <area shape = "poly" coords = "486,272, 490, 300, 555, 320, 560, 285, 545, 245, 510, 245, 480,265, 486, 272" onMouseOver="showText('Australia');" onMouseOut = "showText('');" alt= "Australia" href="#" />
</map>
</body>
– Other Tips
Of course, you don't just have to use external links. You can also use anchors for bookmarks on the page [href="#SectionTwo"], mailto [href="mailto:george@trees.com] and other anchor tags. You can specify the target as well (put it right after the anchor tag) [target="_new"]. Insert alternative text tags- alt (insert it after anchor as well) [alt="Click here to learn about trees"].
– Summary
So that's all you need to do. Very easy to create and very professional looking when used with a good graphic.
Fully Working code on this topic has been posted in forum: https://www.aliencoders.org/content/area-and-map-tag-demonstration-html
(It's having code with and without marquee behavior too)
