Thursday, 11 April 2013

How to - Use Image Mapping to make part of an image, a clickable link.

Lollies Green Jube Orange Jube Purple Jube

Today I am going to attempt an easy “how to” for image mapping.

Mapping allows us to use part of an image as a clickable link, rather than the whole image. For example, you may have an image with a man’s face and a woman’s face. With mapping, we can link the man’s face to a particular website and the woman’s face to another website altogether. These separate clickable sections are known as a “hotspot”. As in the image above, I have linked the large orange Jube, the purple Jube at the bottom of the image and the green Jube on the far right of the image.

Here is the code:


<img src="Image URL" alt="Name of Image" usemap="#Mapname">

<map name="Mapname">

<area shape="poly" coords="400,67,359,78,348,92,344,107,348,127,362,147,369,147,382,155,400,161" alt="Link Name" href="Link URL" target="_blank">

<area shape="circle" coords="162,148,53" alt="Link Name" href="Link URL" target="_blank">

<area shape="rect" coords="254,227,344,300" alt="Link Name" href="Link URL" target="_blank">

</map>

How to tweek it…

Let’s begin with an explanation of what image coordinates are, and how to obtain them. Coordinates are points on an image in pixels. They are made up of a horizontal (x) and a vertical (y) e.g. “x,y”. The following image shows a black dot with the coordinates 167,172. This point is 167 pixels along the top of the image (from left to right) and then 172 pixels down the image (from top to bottom).




"How do I find the co-ordinates of an image?" I hear you ask… well, it depends on what program you are using. Let’s address three of those now:

Microsoft Paint: This is a simple program which comes free with Microsoft Office. The coordinates are displayed in the bottom left hand corner of paint, shown as “167, 172px” as an example. When you move your mouse over the image, these figures will logically change. Hover your mouse cursor point over the spot you would like the coordinate of, and write it down.

GIMP: The coordinates are also displayed in the bottom left hand corner, shown as “167.0, 172.0” as an example.

Photoshop CS6: Now it gets a little more complicated (of course… it is Photoshop after all!). Follow these instructions to view your cursor’s hovering coordinates in Photoshop

You can view the mouse position based on how you have your Preferences for Units and Rulers set up.

Go to Edit > Preferences

Select Units & Rulers and set Units > Rulers to 'Pixels'. Click 'OK'.

Now go to the Window menu and click 'Info'. The mouse position will be displayed in the bottom left quadrant of the Info window, under '+ X Y'.




Now we know how to get each set of coordinates, let’s address each shape that you can make your hotspot. What you first need to do is decide between the three hotspot shapes available, rect (rectangle), poly (polygon) or circle (obvious!). The easiest to use are the rectangle and circle. These use a limited number of coordinates and therefore are less involved. A polygon is of course, any multisided shape, this is both the most detailed and the most useful as you can completely trace part of your image with a very long set of coordinates.

For a rectangle, you map the top left and bottom right corners. All coordinates are listed as x,y (over,up). So, for upper left corner 0,0 and lower right corner 100,150 you would type: 0,0,100,150

For example:

<img src="Image URL" alt="Name of Image" usemap="#Mapname">

<map name="Mapname">

<area shape="rect" coords="0,0,100,150" alt="Link Name" href="Link URL" target="_blank">

</map>


 The purple Jube at the bottom of the image at the top of the post is a rectangular hotspot, click for an example.



For a circle, only two sets of coordinates are required, like the rectangle, but for the second coordinate you specify the radius, or the distance from the centre of the circle. So, for a circle with the centre at 30,20 and a radius of 10 you would write 30,20,10.

For example:

<img src="Image URL" alt="Name of Image" usemap="#Mapname">

<map name="Mapname">

<area shape="circle" coords="30,20,10" alt="Link Name" href="Link URL" target="_blank">

</map>


The large orange Jube in the image at the top of the post is a circular hotspot, click for an example.



For a polygon, you map each coordinate separately. The Web browser automatically connects the last set of coordinates with the first. As stated above, you can completely trace the outline of part of an image with a long list of sets of coordinates such as this, "400,67,359,78,348,92,344,107,348,127,362,147,369,147,382,155,400,161".

For example:

<img src="Image URL" alt="Name of Image" usemap="#Mapname">

<map name="Mapname">

<area shape="poly" coords="400,67,359,78,348,92,344,107,348,127,362,147,369,147,382,155,400,161" alt="Link Name" href="Link URL" target="_blank">

</map>


The green Jube on the far right of the image at the top is a polygon hotspot, with coordinates tracing the Jube, click for an example.



Finally, an explanation of the red sections of the code.

I am going to assume at this point that you are not a novice at coding, and know what a URL is and how to get one. If in fact you are a beginner, please email me for any explanations if this post is not basic enough.

Insert Image URL here Image URL.

Name your image here Name of Image.

Name of your map, can be anything you choose, here #Mapname (this one must begin with the hash (#), and here Mapname.

Name of the webpage you are linking to here Link Name.

And finally the webpage URL you are linking to here Link URL.

You can of course have many hotspots in the one image (as per the code in the box at the top of this post) and once your code is complete, you can paste it in the html view of a post or as a new HTML/Java Gadget (or in the <body> section of your website if you are not a blogger).

Hopefully I have explained Mapping in a logical, basic fashion but if you have any questions, please email me or comment below.

Thanks for tuning in!

No comments :

Post a Comment

Facebook Twitter Google + RSS Feed Email Me