Text on HTML Images: Do it Yourself - Image-Map Method
(Page 4 of 4 )
An image-map is an image with clickable regions. The images are not only clickable; they can be links. A link benefits the page it is pointing to, as far as search engines are concerned. Hypothetical image mapping is shown below:
<img src ="anImage.gif"width ="145" height ="126" usemap ="#mapID"
alt="On page 1" />
<map id ="mapID">
<area shape ="rect" coords ="0,0,82,126" href ="page2.htm" />
<area shape ="circle" coords ="90,58,3" href ="page3.htm" />
<area shape ="poly" coords ="135,116,145,126,125,126, 135,116" href
="page4.htm" />
</map>
In the above code, you have the IMG element, the MAP element, and the Area element. The IMG element, which is the first one, gives the source and dimensions of the image. The value of its usemap attribute contains the ID of the next element, which is the MAP element. This forms the connection between the IMG element and the MAP element.
The MAP element contains the AREA elements. Each AREA element represents the area that is clickable. The area can be a rectangle, circle, or polygon. When the area is a rectangle, you define it using the coordinates of the top-left corner of the rectangle and those of the bottom-right corner of the rectangle. When the area is a circle, you define it using the coordinates of the center of the circle and the radius of the circle. When the area is a polygon, it is defined by the coordinates of the vertices of the polygon. The first and last coordinate pairs should be the same. All coordinates are measured from the top-left corner of the image and are in pixels.
The image-map has this advantage: the links the area elements can have are seen by search engines and these links benefit the pages to which they are pointing. It has this disadvantage: you still have to use your drawing tool to write text on the image. The search engine sees text on the link and not the text glued to the image.
You can use the following procedure to create an image map.
Obtain your image and text with a drawing tool.
Put your image in its folder; write the tags for the Image, Map, and Area in your HTML file, and do not put the coordinates in yet.
Put the following JavaScript in the HEAD element of the HTML file:
<script type="text/javascript">
function coordinates(event)
{
x=event.clientX
y=event.clientY
alert("X=" + x + ", Y=" + y)
}
</script>
Save and open your HTML file. Click anywhere on the image and a message box will pop up giving you the coordinates (in pixels) of the point you have clicked relative (measured from) to the top left corner of the client area of your web page. The above code does this trick.
The coordinates in the image map are relative to the top-left corner of the image. To obtain a coordinate of a point on the image, subtract the value you get by clicking on the image from that of the top-left corner of the image in your web page.
Type these coordinates into the spaces you left above in the image map.
Lastly, remove the above script from your web page. You do not want the user to see a pop up window with coordinates each time he clicks on the web page.
Conclusion
You should now be able to get text onto an image by hand. You would generally do this by using an image as the background of a block level element. With this knowledge, you can save the cost of buying software to do it and still gain the benefits with search engines.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
