Can I add an HTML image map into the header?

if you look at my site http://www.gottagreatgift.com/ in the header you will there is blog / contact / about us
I want to make those links how can I do that? Can I make the header back ground image an HTML image map? Or is there a better way to make those items links?

those links don't actually look active, Touch. If you want to use images as nav links, you are probably going to want to replace linked text with them using CSS.

This is how I do it with my header at Purebulk.com

The html....

<div id="header"><h1><a href="/">PureBulk</a></h1>

so just put your buttons in a list or divs or something with text and links to where they want to go...

and then here is the CSS that overwrites that with an image

#header h1 a:link, #header h1 a:visited{
        background:url(../images/PureBulk.gif) no-repeat;
        width:250px;
        height:81px;
        display:block;
        border:none;}

I hope that helps.!

you lost me on this one

Do you understand how HTML & CSS interact with each other? The basic idea that HTML defines your containers & your content, and CSS modifies how those containers & content appear.

Several threads relating to image hotspots:-

Try this one for starters:

http://www.zen-cart.com/forum/showthread.php?t=93238

wonder if it is possible to make image active when clicking? i understand that it is something to do with css and also setting each page to its own body id.

But the main template has its own code for an example, ```

Is there a way to set each page to its own body id?

thanks.

I added an image map in to the tpl_header but for some reason my logo has dropped below the freeshipping and the cart totals drop to the bottom of the header can some one tell me why

tpl_header

<!--bof-branding display-->
 
<div id="logoWrapper">
<img src="http://www.gottagreatgift.com/includes/templates/gottagreat/images/header_bg.png" width="898" height="153" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="206,73,302,114" href="http://www.gottagreatgift.com/index.php?main_page=contact_us" target="_self" />
<area shape="rect" coords="308,74,400,115" href="http://www.gottagreatgift.com/index.php?main_page=page_2" target="_self" />
<area shape="rect" coords="441,4,618,147" href="http://www.gottagreatgift.com/index.php?main_page=page_3" target="_self" />
<area shape="rect" coords="137,68,206,115" href="http://www.gottagreatgift.com/index.php?main_page=page_3" target="_self" />
</map>
    <div id="logo"><span class="style1"><a href="/shop/index.php?main_page=shopping_cart"><img src="/includes/templates/gottagreat/images/cart.gif" /></a>
    
	<?php echo sizeof($_SESSION['cart']->get_products()); ?>  items  
 	<?php $header_cart = $currencies->format($_SESSION['cart']->show_total());  
	echo $header_cart;
	?>
</span>
<br class="clearBoth" />
</li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>
<?php if (HEADER_SALES_TEXT != '' || (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2))) { ?>
    <div id="taglineWrapper">
<?php
              if (HEADER_SALES_TEXT != '') {
?>
      <div id="tagline"><?php echo HEADER_SALES_TEXT;?></div>
      <div id="navMainCartSummary"><?php require(DIR_WS_MODULES . 'sideboxes/cart_summary.php'); ?></div>
<?php
              }
?>
<?php
              if (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2)) {
                if ($banner->RecordCount() > 0) {
?>
      <div id="bannerTwo" class="banners"><?php echo zen_display_banner('static', $banner);?></div>
<?php
                }
              }
?>
    </div>

any Ideas what I have done wrong

To get some help with the above, pls provide a working web address where I can see what problem you're talking about.

I agree with svakanda that you should really put links in CSS form. That's the new way to do it, and the right way to do it. Image maps should only be used for things like maps with clickable states, etc anything other than that, you're using an outdated method. Menus should be CSS all the way...