Code Seeker: Make Parts of an Image Work Like Links

Hello everyone. In this tutorial I will show you an example that will teach you how to make parts of an image work as links like in the following image.

First thing is that you prepare your image, and you know its location to include it in your page. For including the image in your page, use <img /> tag in the following way.

Note that we are using the attribute usemap in the <img /> tag, but we still didn't assign a value to it.

Now, the step that makes the image divided into clickable links is by creating a map and linking the map with the image that we added before. We will name the map map1. For creating the map, we include <map> ... </map> tags as the following.

Note that we added the name attribute for the map, and we assigned the value map1 to it.

After we included the <map> ... </map> tags, next thing is that we start defining areas inside this map by using multiple <area /> tags. With including <area /> inside the map, we can make this area work as a link. In the following code snippet, we define an area inside the <map> ... </map> tags that will mask BMW logo.

The code is:

The attributes of the area tag with their descriptions:

shape: specifies the shape of the area. We defined the shape to be circle.

coords: species the coordinates of the shape, and it changes based on the chosen shape. The coordinates that we supplied are the center coordinate (29,90), plus the radius of the circle area (27)

href: species the link address that will forward you to the specified address as you click on the area

target: specifies where to open the linked page. We assigned value _blank which will open a separate tab for the destination link address.

Let's define another area for Ferrari logo. We will add another <area /> inside <map> </map> tags, but we will change its attributes this time.

The code is:

Note that we assigned rect value for the shape attribute in the new area, means that the area will have a rectangle shape. Also, we assigned four values for coords attribute the which are the coordinates of the top-left corner(11,124), plus the coordinates of the bottom-right corner(46,174) of the rectangle. The href attribute has the url of the Ferrari website. The target attribute has the value _blank that will open the Ferrari page in a new tab.

Finally, we will add a third area, but this area will have a different shape than the previous two. The new area will mask the Lamborghini logo as indicated below.

The code is:

Note that the new area that we defined above has a polygon shape. The coords attribute for polygon shaped area defines the vertices of the shape, and every pair of values defines a vertex for the polygon. It's like you are holding a pencil, and trying to connect dots together. Note that the value for the coords attribute starts with (64,127) and ends with (64,127) meaning that the starting vertex is the same as the ending vertex to complete the shape.

Here I reached the end of this tutorial. I showed you how to link an image with a map. Then, I showed you how to define an area inside the map, and I considered three shapes for the area which are circle,rect, and poly. Finally, for every area we defined we associated it with a website link that the browser will go to the specified link of the targeted area on the image.

Hope you benefited from this tutorial.

Code Seeker

Sunday, September 4, 2011

Make Parts of an Image Work Like Links

No comments:

Post a Comment