Page 1 of 1

HTML Image Map Hotspots Rate Topic: ****- 1 Votes

#1 Travis1012  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 36
  • View blog
  • Posts: 222
  • Joined: 05-August 09

Posted 06 August 2009 - 07:12 PM

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:
<!-- Change details as required -->
<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
<!-- Change details as required and also add the coorinates in the appropriate places -->
<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
<!-- Change details as required and also add the coorinates in the appropriate places -->
<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
<!-- Change details as required and also add the coorinates in the appropriate places.
	Please DO NOT leave the ", ..." in the coords section, it has been used to show that you can add more -->
<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
</map>



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

<img src="image.gif" alt="image" usemap="#mymap" width="600" height="650" />
<map name="mymap" id="mymap">
	<area shape="rect" coords="400,450,500,520" href="http://www.somewebsite.com" alt="Some Website" />
	<area shape="circle" coords="300,250,10" href="http://www.somewebsite.com" alt="Some Website" />
	<area shape="poly" coords="0,0,175,0,160,55,165,75,140,60,140,80,100,190,110,220,100,240,35,225,0,210"
		href="http://www.somewebsite.com" alt="Some Website" />
</map>



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

Good Luck! :D

Is This A Good Question/Topic? 0
  • +

Replies To: HTML Image Map Hotspots

#2 kewlkreator  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 38
  • View blog
  • Posts: 1,065
  • Joined: 25-March 09

Posted 11 August 2009 - 04:19 PM

Over all, a good tutorial. Could post ways of finding coordinates?
Was This Post Helpful? 0
  • +
  • -

#3 Travis1012  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 36
  • View blog
  • Posts: 222
  • Joined: 05-August 09

Posted 26 August 2009 - 01:21 AM

View Postkewlkreator, on 12 Aug, 2009 - 08:19 AM, said:

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 :D
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1