I want to put this code in the header (without the extra spaces):

< img src="buttons2.jpg" width="468" height="63" usemap ="#navmap" />

< map name="navmap">
< area shape="rect" coords="301,14,363,44" href="nav1" alt="about" />
< area shape="rect" coords="232,14,283,44" href="nav2" alt="news" />
< area shape="rect" coords="136,14,218,44" href="nav3" alt="portfolio" />
< area shape="rect" coords="375,14,442,44" href="nav4" alt="contact" />
< /map>

what's the easiest way to do this?

Thanks folks!

Comments

ft_evolution’s picture

Install the ImageField module,

you could use the CCK, to create a custom content type called let's say, image_menu
which would contain an image field from ImageField,
when you create the content type, make one of the fields a link url, and any other information you want it to contain, like alt text, etc...

Then create a view (using Views module) for that content type, and then customize your view's template....(inside the view, click on template: information to get information on what tpl.php files your theme is using...

after this you can display it in your template's content area. However, you may want to integrate it into your page header, which may be possible with your theme, but my look ugly without further theme customizations. it all depends on how professional you want it to look.

It is not a trivial task, it will require some work... but good sites require work
Someone else might know of a module to do it, but I don't. Hope this helps.

A

mndonx’s picture

Hi Amirm,

I'd look into CSS image replacement techniques, and using an image sprite. That way, the menu is still semantically there (visible to the browser and screen reading software) -- but the text is pushed off the screen via CSS. This is the best method to maintain the integrity of your menu elements, and will help with searchability.

This A List Apart article, while older, does a good job of why using this method and an image sprite is a great idea:

http://www.alistapart.com/articles/sprites

There are some arguments over the best way to do image replacement, so you might check out this comparison:

http://css-tricks.com/css-image-replacement/

Once you find one that works across all browsers, save it. You will use it over & over again!