JavaScript Tutorials

Welcome to Dream.In.Code
	Become an Expert! Join 307,149 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,699 people online right now. Registration is fast and FREE... Join Now! Chat LIVE With a Expert

HTML Image Map Hotspots

HTML Image Map Hotspots

Options

Travis1012
Group Icon

6 Aug, 2009 - 06:12 PM

Post #1

HTML Image Map Hotspots

Firstly you need to have an image file. So find your image file and have it ready.

The first bit of code will be:

CODE

<img src="image.gif" alt="image" usemap="#mymap" width="600" height="650" />
<map name="mymap" id="mymap">

Please be aware that the usemap="#mymap" is required in the img section to select which map the image uses. Change the name of the map to the name of the one which needs to be used but keep the # where it is.

Now to select image map hotspot areas you have to decide on the type of image hotspot you need.
This can either be a Rectangular Hotspot, Circular Hotspot or a Polygonal Hotspot.

The top left of the image is coordinates (0, 0). The first value being the x value and the second value being the y value. As you go further to the right of the picture the x value increases. As you go further to the bottom of the picture the y value increases.

Rectangular Hotspot

With a rectangular hotspot you will need the coordinates of the top left corner (x1, y1) and the bottom right corner (x2, y2) of the hotspot.

the code for the rectangular hotspot is

CODE

<area shape="rect" coords="x1,y1,x2,y2" href="http://www.somewebsite.com" alt="Some Website" />

Circular Hotspot

With a circular hotspot you will need the coordinates of the circles center (x, y) and the radius of the circle ( r ).

the code for the circular hotspot is

CODE

<area shape="circle" coords="x,y,z" href="http://www.somewebsite.com" alt="Some Website" />

Polygonal Hotspot

The polygonal hotspot is great for the hotspots which have weird or unique shapes. It gives you the ability to select as many boundary points (x, y) you wish which followed make the outline of the hotspot. Please make sure the points are in the order in one direction around the hotspot.

the code for the polygonal hotspot is

CODE

<area shape="poly" coords="x1,y1,x2,y2,x3,y3, ..." href="http://www.somewebsite.com" alt="Some Website" />

the end part after the hotspots are added is

CODE

</map>

Now a full copy of the code required using one of each type of hotspot. I will show this example using fake coordinates.

CODE

There can be as many hotspots on the picture as you wish.

Good Luck!

Register to Make This Ad Go Away!

kewlkreator
Group Icon

11 Aug, 2009 - 03:19 PM

Post #2

Over all, a good tutorial. Could post ways of finding coordinates?

Travis1012
Group Icon

26 Aug, 2009 - 12:21 AM

Post #3

QUOTE(kewlkreator @ 12 Aug, 2009 - 08:19 AM)

Over all, a good tutorial. Could post ways of finding coordinates?

To find coordinates u can open the image in paint and move the cursor over the image, and the bottom right of the window will display the coordinates of the current position on the image.

Using GIMP will also show you the coordinates when you put the cursor over the image. The coordinates will display on the bottom left of the window.

Other image editing software will most likely give you the coordinates also.

Good luck