Adding hot spot links to pictures

This is pretty cool and could help your website look really professional. It creates hotspots on your pictures so that certain spots on your image can take you to different webpages. In this example I am going to use a picture with an Xbox 360 and a PS3.

To create two separate links to the ps3 and xbox360 websites, I will need to use declare the image source and what map I will use using html code. It is the almost same as we have done:

<img src=”ps3vsxbox.jpg” usemap=”#map1″ border=”0″/>

**The only difference is you are naming a map you will use, which I will declare in the next step**

Next you need to declare a map.

<map name=”map1″>
<area shape=”ps3″ coords=”14,45,150,234″ href=””&gt;
<area shape=”xbox” coords=”283,43,390,256″ href=””&gt;

The coordinates are where your hot spot will declare where your hotspot is on the image. I’m not 100% sure on how these work so I just played around with the numbers until they looked about right, or you can drag the box in the split view to make it exact. You can also you different shapes instead on a rectangle, like a polygon or circle.

So now I have two separate links on my image so if I click each of the objects I will be taken to two different websites.


~ by mdeang2 on October 19, 2010.

One Response to “Adding hot spot links to pictures”

  1. Wicked dude.
    Thanks for that.

Comments are closed.

%d bloggers like this: