Image map troubles

[lord_havoc]

So I have an image map for my navigation. The actual code only looks at a 900x45 transparent image (I am using skins on my site). But for some reason, half of support is not linked. Here is the code for the image map.



<img

src="http://www.cyanideperfection.net/styles/pad.gif"
width="800" height="40"
usemap="#navmap">

<map
id="navmap"
name="navmap">

<area
shape="rect"
coords="0,0,135,45"
alt="Home"
href="http://cyanideperfection.net/index.php">

<area
shape="rect"
coords="140,0,300,45"
alt="Visitor"
href="http://cyanideperfection.net/visitor/index.php">

<area
shape="rect"
coords="310,0,450,45"
alt="Photo Gallery"
href="http://cyanideperfection.net/pixelpost/index.php">

<area
shape="rect"
coords="470,0,690,45"
alt="Contact"
href="http://cyanideperfection.net/contact.php">

<area
shape="rect"
coords="700,0,1000,45"
alt="Support"
href="http://cyanideperfection.net/support/index.php">

</map>


However, as you can see by going to http://cyanideperfection.net/ the last bit of it doesn't get mapped. Can someone help?

[jscheuer1]

It seems fine on some pages but not on others. Make sure the width dimension is large enough on all pages to make the transparent image extend all the way to the right end of the map. Also, in an unrelated matter, make sure the image is available to, and its src attribute coded correctly on, all pages using it.

[lord_havoc]

Yeah, the problem has been corrected. I had forgotten to change the width to 900 from 800 when I made the image larger. :o

Regarding other pages, that is because I have a different heading page for those where the image map was correct.

[Twey]

It would be better to use separate images rather than an image map (have I already said this? I've a touch of d&#232;ja vu).

[jscheuer1]

It would be better to use separate images rather than an image map (have I already said this? I've a touch of dèja vu).

I'm not too sure about that, certainly simpler with the map when skinning.

[Twey]

Aye, but separate images are more flexible and allow for a fluid design.

[lord_havoc]

Well If I use separate images, then the link will be an image... so when the user changes stylesheets, the header and text will now be, for example, blue instead of the default green. However that will not change the links from green to blue. With an image map, it links ares of the page to another. Which is ideal b/c the links don't move. I would love to have the images separate, but I don't know how to make it work! If you can properly explain it, I will implement it. Also, as a side note, it is harder to make the words line up horizontally with individual images.

[Twey]

Also, as a side note, it is harder to make the words line up horizontally with individual images.Just split your current big image map up into its words.
Well If I use separate images, then the link will be an image... so when the user changes stylesheets, the header and text will now be, for example, blue instead of the default green. However that will not change the links from green to blue.The ideal solution would be to have the words written in transparency on a black PNG. That way, you could just change the background colour of the images with CSS and the text colour would change.

[lord_havoc]

Well that makes sense, I never thought of that. But the way these images were made, it is too much trouble to make them transparent. I can't seem to get them transparent easily anyway.

[Twey]

In the GIMP (http://www.gimp.org/), it's simply a matter of going to Layer->Transparency->Colour to Alpha. I presume all photo editors will have something similar.