Placing image map on a web page

Get Started
1

Hi,

I want to place an imagemap in a page. In the past - about 10 years ago, I had a web wysiwyg program which made this easy.

What programs are available now that would assist me, ideally free but certainly not necessary for it to be as substantial as DW.

bazz

2

what os are you running? In Windows7 there is a new feature added in paint.
RULERS! sweet

3

Thanks for the tip.

Currently I am on XP Home/Pro

bazz

4

you can download Gimp… Its like photoshop but FREE:)

5

photoshop is the way to go on this one

6

Thanks all. I know how to place the map image and I know how to link it to the ‘next’ page. Specifically; I need to know how to set the coords for each part of the map.

bazz

7

To set the co-ordinates you need to have the image in front of you and even if you use a simple program like MS Paint you will be able to see the X,Y coordinates change in the status bar when you move the mouse.

So that should give you most of the information you need obviously you can mockup/draw the hotspot first and the grab the coordinates from that.

You can have; rect | circle | poly | and COORDS=“left, top, right, bottom”. For rect: left-x, top-y, right-x, bottom-y; the circle, which specifies a circular region using COORDS=“centre-x, centre-y, radius”; poly, which specifies a polygonal region using COORDS=“x1, y1, x2, y2, …, xN, yN”. The first x and y coordinate pair and the last should be the same to close the polygon.

Coordinate values are relative to the top left corner of the object and may be expressed as pixels or percentages.

For example:


<map id="imagemap" name="imagemap">
 <area shape="rect" coords="0,0,118,28" href="rectangle.htm" alt="Rectangle" title="I am a Rectangle" />
 <area shape="circle" href="circle.htm" coords="184,200,60" alt="Circle" title="I am a Circle" />
 <area shape="poly" coords="276,0,276,28,100,200,50,50,276,0" href="polygon.htm" alt="Polygon" title="I am a Polygon" />
</map>
<img usemap="#imagemap" border="1" height="280" width="280" src="map.png" alt="Image Maps" title="Navigation" />
8

I also use GIMP for image maps. GIMP makes it very easy and it’s free!

Neil