Below is an example code used in creating an image map.
<html> <head> <title>Image Map</title> </head> <body> <img src="images/map-image.png" usemap="#menu" alt="Image Map" "border="0" /> <map name="menu"> <area shape="rect" title="home" coords="45,15,115,50" href="index.html" /> <area shape="rect" title="about me" coords="125,15,235,50" href="about-me.html" /> <area shape="rect" title="other links" coords="244,15,390,50" href="other-links" /> </map> </body> </html>
The code above will be rendered in the browser this way
About the code:
- The attribute usemap=”#menu” tells the browser that the image will be used in an image map and the name of the image map is called “menu”. The pound sign (#) tells the browser that the map named “menu” is within the same webpage.
- The map elements, <map …> … </map>, provides all the image map data. Hence all the information about the map like hotspots is found in this element.
- The attribute name=”menu” is used as the reference name for the map element.
- The <area> tag located between the <map> and </map> element is used to define the hotspot.
- The attribute shape=”rect” is used to define the shape of the hotspot. It could also be written as shape=”rectangle”. You may use other shapes like poly (polygon) and circle.
- The attribute title=”home” is used to create a tooltip.
- The attribute coords=”…” is used to define the coordinates of the shape. The numbers given as the value of the attribute or the coordinates will be discussed in the next lesson.
- The href=”index.html” attribute defines the URL that the hotspot points to. Therefore if the visitor clicks in the first hotspot, the browser will load the homepage which is called as index.html.
Understanding Coordinates
Let us use the example in our previous discussion in explaining the coordinates. In the element:<area shape="rect" title="home" coords="45,15,115,50" href="index.html" />,
the coordinates "45,15,115,50" can be broken down into two pairs: 45,15 and 115,50. The first pair represents the top left corner of the rectangular region (the shaded part in the figure below) and the second pair represents the bottom right corner of the rectangle. Those points are needed in defining a rectangular region, the top-left and bottom-right corner. The clickable part of the image or the hotspot is the shaded portion on top of the HOME, ABOUT ME and OTHER LINKS (see figure below). When the mouse pointer points on any of the hotspots it will change into a pointer that looks like a pointing hand.
Note that all the numbers in the attribute “coords” are separated with commas (,) and W3C recommends using commas for separators.
Other types of shapes used in creating image maps are the circular and polygonal shapes. The next code is used to create an image map using the circular and polygonal shapes.
<html> <head> <title>Image Map</title> </head> <body> <img src="images/map-image2.png" usemap="#menu2" alt="Image Map" "border="0" /> <map name="menu2"> <area shape="poly" title="home" coords="98,15,18,105,183,107,98,15" href="index.html" /> <area shape="circle" title="about me" coords="103,174,59" href="about-me.html" /> </map> </body> </html>
The code will be displayed in the browser this way, see the next figure.
About the code:
- The attribute shape=”circle” is used to create a circular hotspot. A circle is defined by its center and its radius — the distance from the center to any point on the circumference of the circle. Therefore in our example “103,174,59” means that the center of the circle is on coordinate 103,174 and the radius is 59 pixels. For you to get the radius, record first the coordinates of a point on the circle which is on the same horizontal line as the center which is 44,174 then subtract the horizontals values, the x’s, to find the radius that is, r=103-44=59, see the next figure.
- The attribute shape=”poly” is used to create a polygonal hotspot — a figure that can have three or more sides. In our example we have a polygon that has three sides which is called triangle, you may use other polygons such as pentagon, hexagon, etc. Note that polygon is created by a list of adjacent vertices—a point where sides met, joined in order. The coordinates must be joined in order; the first coordinates should be the same with the last coordinates so that there will be no openings in the polygon. In our example the coordinates used in creating a polygonal hotspot are 98,15,18,105,183,107,98,15.
Identifying the Coordinates
Using Paint in Windows OS.There are several ways in order for you to get the coordinates. One method, which I used in this module, is by loading the image in Paint program in Microsoft Windows. To open Paint, just click on START >> ALL PROGRAMS >> ACCESSORIES >> PAINT. Using Paint program, place your cursor to the point where you want to get the coordinates. The status bar will display the coordinates of the given point in an image. Just move your cursor on the next location to get the next coordinates.
Using ISMAP attribute of IMG
The ismap attribute of the IMG tag can be used to an image to function as a graphical navigation tool to get the coordinates, when combined with an anchor tag. Key in the next code on your text editor to see the effect of ismap attribute.
<html> <head> <title>ISMAP</title> </head> <body> <a href=""><img src="images/map-image.png" ismap="ismap"></a> </body> </html>
Below is the preview of the above code. On the status bar is the location of the link with the corresponding coordinates where the mouse pointer is pointed to.
3 comments:
Very good points you wrote about this .. Great stuff ... I think you've done some really interesting points.Keep a good job.
zip code look up
I love using this for my sites. I can create very interesting looks for my links without the need for very complicated coding.
This isn't very good for text-reader browsers though because it doesn't read all the links. But they're in the minority so I guess it's not such a big deal.
Nice post!
Very informative. Your site is useful to the course I am taking. :) Thanks a lot.
Post a Comment