Hot Spot on a main image

[pb4]

Hi,

I've looked this up and followed instructions from various threads but I am having no luck

My site is here

I would like the Design - Print - Web elements to be clickable.

I think I am right in that I need to place the code into my tpl header somwhere amoungst this. I have tried below the header wrapper but I couldn't get it to work.

<div id="headerWrapper">



<!--bof-navigation display-->
<div id="navMainWrapper">
<div id="navMain">
    <ul class="back">
    <li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a></li>
<?php if ($_SESSION['customer_id']) { ?>
    <li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a></li>
    <li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></li>
<?php
      } else {
        if (STORE_STATUS == '0') {
?>
              <a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"></a>
<?php } } ?>            </td>







<?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 }?>

	<li><a href="http://www.ampmgraphics.com/demo/index.php?main_page=about_us"><span style="color: #666666">| </span> About us</a></li>
		<li><a href="http://www.ampmgraphics.com/demo/index.php?main_page=portfolio"><span style="color: #666666">| </span>Portfolio</a></li>
			<li><a href="http://www.ampmgraphics.com/demo/index.php?main_page=testimonials"><span style="color: #666666">| </span>Testimonials</a></li>
				<li><a href="http://www.ampmgraphics.com/demo/index.php?main_page=contact_us"><span style="color: #666666">| </span>Contact us</a></li>
				
				

</ul>
</div>

<br class="clearBoth" />
</div>
<!--eof-navigation display-->
<!--bof-branding display-->
<div id="logoWrapper">
    <div id="logo"><?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>

    <div id="taglineWrapper">
<?php
              if (HEADER_SALES_TEXT != '') {
?>
      <div id="tagline"><?php echo HEADER_SALES_TEXT;?></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>
</div>

<div id="headerLogin"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?>
<!--eof-branding display-->

I found an image mapper tool that helps to code hot spots.

It gave me this code (to place in the tpl I presume?) Where should it go and what elements do I need to change for it to work?

<div style="text-align:center; width:842px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_3201003181114361" src="http://www.image-maps.com/uploaded_files/3201003181114361_1_header_bg.jpg" usemap="#Image-Maps_3201003181114361" border="0" width="842" height="238" alt="" />
<map id="_Image-Maps_3201003181114361" name="Image-Maps_3201003181114361">
<area shape="rect" coords="122,172,241,222" href="http://www.image-maps.com/" alt="Design" title="Design"    />
<area shape="rect" coords="445,173,530,223" href="http://www.image-maps.com/" alt="Print" title="Print"    />
<area shape="rect" coords="690,172,808,222" href="http://www.image-maps.com/" alt="Web" title="Web"    />
<area shape="rect" coords="840,236,842,238" href="http://www.image-maps.com/index.php?aff=mapped_users_3201003181114361" alt="Image Map" title="Image Map" />
</map>
<!-- Image map text links - Start - If you do not wish to have text links under your image map, you can move or delete this DIV -->
<div style="text-align:center; font-size:12px; font-family:verdana; margin-left:auto; margin-right:auto; width:842px;">
	<a style="text-decoration:none; color:black; font-size:12px; font-family:verdana;" href="http://www.image-maps.com/" title="Design">Design</a>
 | 	<a style="text-decoration:none; color:black; font-size:12px; font-family:verdana;" href="http://www.image-maps.com/" title="Print">Print</a>
 | 	<a style="text-decoration:none; color:black; font-size:12px; font-family:verdana;" href="http://www.image-maps.com/" title="Web">Web</a>
 | 	<a style="text-decoration:none; color:black; font-size:12px; font-family:verdana;" href="http://www.image-maps.com/index.php?aff=mapped_users_3201003181114361" title="Image Map">Image Map</a>
</div>
<!-- Image map text links - End - --></div>

It also gave me this to place in my css

<style type="text/css">
	dl.image_map {display:block; width:842px; height:238px; background:url(http://www.image-maps.com/uploaded_files/3201003181114361_1_header_bg.jpg); position:relative; margin:2px auto 2px auto;}
	a.LINK0 {left:122px; top:172px; background:transparent;}
	a.LINK0 {display:block; width:121px; height:0; padding-top:52px; overflow:hidden; position:absolute;}
	a.LINK0:hover  {background:transparent; border:1px dashed black; color:black;}
	a.LINK1 {left:445px; top:173px; background:transparent;}
	a.LINK1 {display:block; width:87px; height:0; padding-top:52px; overflow:hidden; position:absolute;}
	a.LINK1:hover  {background:transparent; border:1px dashed black; color:black;}
	a.LINK2 {left:690px; top:172px; background:transparent;}
	a.LINK2 {display:block; width:120px; height:0; padding-top:52px; overflow:hidden; position:absolute;}
	a.LINK2:hover  {background:transparent; border:1px dashed black; color:black;}
	a.BLINK {left:840px; top:236px; background:transparent;}
	a.BLINK {display:block; width:202px; height:17px; overflow:hidden; position:absolute; font-size:0px;}
	a.BLINK:hover  {background:black; border:1px dashed white; color:white; font-size:9px;}
</style>

<dl class="image_map">
	<dd><a class="LINK0" title="Design" href="http://www.image-maps.com/"></a></dd>
	<dd><a class="LINK1" title="Print" href="http://www.image-maps.com/"></a></dd>
	<dd><a class="LINK2" title="Web" href="http://www.image-maps.com/"></a></dd>
	<dd><a class="BLINK" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_3201003181114361">Mapped @ Image Mapper</a></dd>
</dl>

Can someone please help me with what I need to put in the tpl and where and also what I need to do to the css.

I managed to get the image up there with hotspots working but it was in the wrong place.

Its back to how it was now and how I would like it to look.

Can anyone help?

Thank you!