Header Image as Image Map

[Andi98640]

I have a full site in addition to trying to open the webstore. I think I have just about everything for the store except the header image.
I have an image map for my website to navigate. I would like to use that image and map as my header image. I have looked all over the forum and can't figure out what to do?
I have the code for my map but where do I put it?
There are lots of questions regarding image maps but none that ever seem to get resolved.
Help please!

[stevesh]

Post #8 here http://www.zen-cart.com/forum/showthread.php?t=150835 describes how I did it - I think image maps using CSS are easier.

[Andi98640]

Really helpful post, this is what I have added

tpl header

<!--eof-header ezpage links-->
<?php if ($_SESSION['cart']->count_contents() != 0) { ?>
<li><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li>
<li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a></li>
<?php }?>
</ul>
</div>


<?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?></div>
<br class="clearBoth" />
</div>
<div id="imagemap">

<a id="home" href="http://www.jellybeanfabrics.com/" title="Home"><span class="hide">Home</span></a>

<a id="Contact" href="http://www.jellbeanfabrics.com/Contact.htm" title="Contact"><span class="hide">Contact</span></a></div>
<div id="navMainSearch">
</div>
<!--eof-navigation display-->
<div id="log_in_header">

stylesheet

#logoWrapper{background-image:url(../images/header_bg.jpg);background-repeat:repeat-x;background-color:#fff;height:106px;line-height:106px;}

.hide {display:none;}

#imagemap {

height:105px;
width: 428px;
background-image: url(../images/header_bg.jpg);
background-repeat:no-repeat;
margin-top:0px;
}
14, 60, 79, 100
#home {
float:left;
position:absolute;
width: 50px;
height: 30px;
margin-left:14px;
margin-top:79px;
}

#Contact {
float:left;
position:absolute;
width: 50px;
height: 30px;
margin-left:357px;
margin-top:79px;
}


}
#logo{line-height:106px;}

The imagemap came up above the header and bumped the header down instead of being on the header image.
www.jellybeanfabrics.com/zencart

[Andi98640]

SO i changed all sorts of stuff and went back to the beginning I just put your code into my web and nothing happens. No response at all. I at one point got a hot spot in white space above the logo wrapper.
But once I put the imgmap code into the "correct" place I have had no response but no sign of a hotspot over my logo or the background.