muti part clickable picture: clickable parts I have recently been asked how to create a muti part clickable picture, I found it was complicated to describe easily so it thought I would create a tutorial about it.

What is a muti part clickable picture

When you go to a website you may come across a picture which, when the mouse moves over different areas you will get different text shown.

When you click in the different areas you will be taken to different places within – or outside – the site.

This is very useful when you want people to navigate your site graphically.

How do you add a muti part clickable picture

With the increase in power of html you can now add this feature relatively easily.

If you follow this tutorial you will be inserting and navigating through your site by the power of pictures.

You will need to be able to edit your html code.

Most sites will allow you to place pictures with either a drag and drop method or add media – in the case of wordpress.

This is in the visual editor, where we need to go is into the text editor.

Once here you will see all of the code which makes up your page.

So pick your picture to add clickable areas on and insert it.

Mine was named planets.gif

When you click on the text editor tab, navigate down to where your picture is inserted

the text will be in the form of

This shows where the image is stored on your site, the alt text, and the size of the image.

We are going to make 3 areas clickable, the sun ( the yellow to the left of the picture), mercury ( the small circle in the middle of the picture, and venus the circle to the right.

To the above line you will need to add the usemap attribute, so the above line becomes

The addition of this allows us to reference to the picture pixels.

How to setup areas to be clickable

If we want to make the sun area clickable, this forms almost a rectangle covering 50% of the picture, we need to define the co-ordinates.

To do this we have to define the map we are going to work on

You need to call it the same name you defined above

You then define the area attribute, this can be a rectangle, circle or polygon.

In this case we want to define a rectangle

The rectangle co-ordinates are opposite corners

So we have from the origin( top right) to 82 pixels across from the left hand side and all the way down ( remember that the picture is 146 width and 126 high)

The hover text is defined in the alt tag, so when we hover over it we will see sun come up.

and the href is where we will be going – in this case show a picture of the sun, it could be pointing to a web page.

The target control what happen when you click on it

_blank opens a new window

_self opens the target in the same frame ( picture over picture)

and

_parent opens the document in the full body of the window

We want to open it in a new window – so we use _blank

You may now be saying – how do i find the coordinates of the rectangle.

Well you can open the picture in paint and where you place the cursor will give you the coordinates at the bottom of the window.

So we can now go on to define the other areas to be clickable

With this one we have defined the center of a circle with x and y coordinates, along with the diameter we want defined – in this case 5 pixels across as it is only a small planet

venus is a lot larger so we have

The diameter of this circle is 15 pixels

We now have to close off the map tag with

</map>

To use the polygon you setup coordinate pairs, and the area defined within thses is the clickable area.

you need the href so the tecxt appears

This one only shows an area of space when hovered over – nothing happens if you click it

So putting it all together we have

</map>

this will give you a picture with 3 clickable planets and an area of space defined.

how can you easily define the muti part clickable picture

well that was easy wasn’t it – nope most of you shout.

so how can we make this a lot easier?

well if you navigate over to image-map.net then you can open and create areas for free

the code is presented to you to copy and paste into your sites text editor

what about responsive themes – how does that affect the map tag

when your responsive theme resizes your image if you do not rescale your map you will find that the clickable areas have all moved, if not disappeared.

What needs to happen is that the map is scaled along with te picture size.

To do this you can use the responsive image maps plugin from philip newcomer, it is an old plugin but should still work properly.

I hope you are able to follow this tutorial and if you have any questions or a better way of carrying out this process of how to create a muti part clickable picture then leave a comment in the box below so we can all learn.

many thanks for reading

Phil

How to Create a Muti Part Clickable Picture

Make Money From Online