To Imagemap or not to imagemap

A little question

[zulufox]

I'm redesigning my site with a graphical navigation bar.

Is their any advantage to making the bar one big image and use image maps, or should I chop up the image into smaller ones and make each one its own "button".

thanks

[nileshkurhade]

personally -
I feel smaller images load fast.

[vrtlw]

personally -
I feel smaller images load fast.

Agreed, but once cached in the browser's temporary files (i.e. the server returns a 304 not changed header) the image will likely display faster when using an image map alone as there is less code and resource/network overhead for different file requests to process. The load time would then only be a consideration on the first page-load if the same image for navigation is used site-wide.

HTH

Paul

[Blue_Wizard]

If you go with one big image use the progressive jpeg format with a little trial and error you can easily get a 900x430 pixel sized image map down to around 50-65kb.

Keep in mind with sliced images css can create gaps in the slices.

[Rhys]

I have serious doubs that search engine spiders can really follow the links in image maps - therefore never use them - and the links are critical to getting the site indexed, right?

My preference is to put the navigation image as a background, and superimpose the links as text [spider food] in table cells or divs

[gregor]

I have serious doubs that search engine spiders can really follow the links in image maps - therefore never use them - and the links are critical to getting the site indexed, right?
My preference is to put the navigation image as a background, and superimpose the links as text [spider food] in table cells or divs.

Took the words right out of my mouth.

[limbo]

Image maps don't mix well with fluid layouts either.

[simonuk]

I have designed a small number of sites with images maps. I prefer not to but always do what the client requests.

Saying that though I always include standard hyperlinks at the bottom of the page so SE's can still navigate easily through the site. Plus it also helps those not using standard browsers like some disabled programs.

Simon.

[choster]

If you really mean a navigation bar, I lean toward an imagemap. It can be made fluid by applying a suitable background graphic to its containing block.

Depending on its color depth and complexity, you'd be able to create a rather small GIF. You may shave a few more bytes off by cutting it into smaller pieces, but consider

• each piece needs to be requested and downloaded separately. On a dialup connection the latency of requesting the additional images usually wipes out any bandwidth savings from reduced file size
  
• when reducing color depth to manage file size, it may be difficult making your buttons look consistent. The background on one may flatten to a slightly different blue from another, or the antialiasing on its letters might use two pixels instead of three.
  

It is good practice to provide alternative text navigation in the footer, so someone browsing text only or with a screen reader will not be stymied by lack of graphics. Search engine spiders would be able to follow the text links even if they skip the imagemap.

[bruhaha]

Imagemaps have some value when you wish to break one larger image into clickable pieces/regions. But I don't quite see the advantage if what you're constructing is just a set of lined-up buttons. (And, so long as the "weight" of the button-images is small, and the page is not otherwise too "graphically intense", I don't think the "extra download" should matter much one way or the other.)

My big complaint about imagemaps is that you can't graphically change/highlight the selection the user's mouse passes over it. (Or is there a way to do this that I somehow missed?!)

Now if you happen to have one image that you wish to "slice up" into irregular, clickable sections --that is, "imagemap style"-- it is possible to create something like this with style sheets.And you can make the parts change when the mouse hovers over them. Basically, you make the full image the background-image of a <div>, then set up hidden links with their own background-images (the highlighted version of the graphic) that show up on "hover".

(I did this recently for an odd shaped "product map". The pieces had previously been lined up using tables [our graphic designer created it all in DreamWeaver], but aligning all the pieces, in all browsers, proved a nightmare. Actually, when I finished with the stylesheet "map", I also created a traditional imagemap, but only as an alternative code for older browsers that could not handle the css-based version.)