Member Avatar for san_fran_crisko

Hello,

I'm trying to create a relatively simple web site but I've been stuck at the first post already! Basically I'm trying to image map the top banner with links but I've been unable to get this working. I'm not entirely sure what I'm doing wrong and I've been editing it and refreshing for days now! If anyone can spot the problem in my code it'd be much appreciated:

<html>
<body>

<img src="mainbanner.jpg" width="1024" height="275" border="0" usemap="#map" />

<map name="map">

<area shape="rect" coords="0,8,130,47" href="http://TBA" />
<area shape="rect" coords="134,8,260,47" href="http://TBA" />
<area shape="rect" coords="264,8,418,47" href="http://TBA" />
<area shape="rect" coords="421,8,530,47" href="http://TBA" />
<area shape="rect" coords="534,8,684,47" href="http://TBA" />
<area shape="rect" coords="688,8,814,47" href="http://TBA" />
<area shape="rect" coords="818,8,985,47" href="http://TBA" />

</map>

</body>
</html>

Thanks in advance :)

Ciaran.

  • 4 Contributors
  • 6 Replies
  • 102 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by mgwalk
Member Avatar for sreein1986

first install dreamweaver in your system,
it will easy to edit image mapping

Member Avatar for san_fran_crisko

first install dreamweaver in your system,
it will easy to edit image mapping

I used GIMP to generate that code and it still doesn't work. Dreamweaver will produce the same code as the <map></map> conventions will be the same.

Member Avatar for sreein1986

in Dreamweaver one option is there below of property bar take poligonal tool it works fine
check the attachments

screen.JPG 91.74 KB
Member Avatar for peter_budo

first install dreamweaver in your system,
it will easy to edit image mapping

Dreamweaver is not all, secondly is not for free and installing trial version for such banality is silly

Code is OK, however you should swap name attribute for id attribute in start of map tag <map name="map"> , as id attribute is required where name is just optional. Do not forget to add links to locations where to go after mouse click as these are currently not set href="http://TBA" . If you not sure what you doing you can have look at w3schools example on this topic

Member Avatar for san_fran_crisko

Dreamweaver is not all, secondly is not for free and installing trial version for such banality is silly

Code is OK, however you should swap name attribute for id attribute in start of map tag <map name="map"> , as id attribute is required where name is just optional. Do not forget to add links to locations where to go after mouse click as these are currently not set href="http://TBA" . If you not sure what you doing you can have look at w3schools example on this topic

Thanks for the response Peter. I'm not a fan of Dreamweaver either. It's too much money and too difficult for the little web dev I'm doing.

I've just discovered the problem. The co-ordinates are all wrong. I'll just have to manually work them out as GIMP's in-built mapping is obviously wrecked.

Thanks for the help.

Ciaran.

Member Avatar for mgwalk

you can try my online image map tool!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.