ImageMap Explanation

I have read through every post I can find on this site about creating an ImageMap for the header image, and I just cant seem to figure this out. I cant seem to find a post that really follows this through to a resolve.

Is there anyone out there that would be willing/able to do a step by step 'How to' detailed explanation on how to incorporate an image map into the header?

Great appreciation in advance to any/everyone willing to help.

Here is only a sample of what and how this can be accomplished and this is placed where you want this - tpl_header.php or possibly tpl_main_page.php if you want this outside of the header area

<div id="navigation">

	<!-- Begin Search --><div id="search">
	<div id="searchbox"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?></div>
	<!-- End Search --></div>

	<!-- begin top navigation -->
	<div id="navMain">
	<a href="index.php"><img src="includes/templates/floor/images/spacer.gif" alt="Home Page" width="96" height="44" border="0" /></a>
<a href="index.php?main_page=login"><img src="includes/templates/floor/images/spacer.gif" alt="My Account" width="114" height="44" border="0" /></a>
<a href="index.php?main_page=logoff"><img src="includes/templates/floor/images/spacer.gif" alt="Log Out of My Account" width="89" height="44" border="0" /></a><a href="index.php?main_page=shopping_cart"><img src="includes/templates/floor/images/spacer.gif" alt="Shopping Cart" width="131" height="44" border="0" /></a>
<a href="index.php?main_page=checkout_shipping"><img src="includes/templates/floor/images/spacer.gif" alt="Checkout Now" width="106" height="44" border="0" /></a>
	<!-- end top nav --></div>

<!-- end navigation wrapper --></div>

This is where the hot image is part of the design and spacer.gif is a trans image placed over it

Kobra,

Great appreciation for the reply. I used the code you suggested, and I see that the links are in the header now, and working, but what I is to have my header image contain some graphical links that will link to the appropriate place using imagemap coordinates.

My imagemap coordinates on my header graphic are as follows:

<area shape="rect" alt="" coords="259,127,355,157" href="index.php?main_page=login">
<area shape="rect" alt="" coords="375,127,481,157" href="index.php?main_page=account">
<area shape="rect" alt="" coords="492,127,607,158" href="index.php?main_page=contact_us">
<area shape="rect" alt="" coords="623,125,714,156" href="index.php?main_page=site_map">
<area shape="rect" alt="" coords="724,126,795,159" href="index.php?main_page=shippinginfo">

I just want these coordinates in my header to be active links. Any suggestions?

Again, thanks for the generous help.

OK. I think I am getting closer to a solution, but still have a few questions.

Using the code the very gracious Kobra gave in the earlier post, I can get the the links to show up in the header area. The problem I am having now is that the height that I define for the 'spacer.gif' is pushing the header image down by that same amount. The links appear over the background color, not over the logo header image.

<a href="index.php"><img src="includes/templates/TEST/images/spacer.gif" alt="Home Page" width="230" height="60" border="0" /></a>

In that example, it would push down my logo image in the header by 60px.

My question is how do I get the transparent 'spacer.gif' sit on top of the existing logo header image?

My graphical links on the logo header image are in the lower right hand corner. Can I set the links in the header in such a way that they are only over the portion of the header image that has the graphical links (in the lower right hand corner)?

My graphical links on the logo header image are in the lower right hand corner.

Are these link areas part of the header image or separate images?

What I posted actually creates an inline set of transparent images with a href attached that can be located over a "background image"

OK. Think I got this functioning pretty much the way I want it, but I think the code is a little wacky and I was hoping that someone might point out the error of my way.

I found an older post (December 2005) that pointed me in this direction, but seems that some things have changed since then.:huh: It did take a little reckless tweaking, but I got it working (I think).

I created an imagemap to make the links in my header image functional. In order to do that, I did the following:

Found this original text in tpl.header.php:

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

...and changed it to this:

<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, HEADER_LOGO_WIDTH, HEADER_LOGO_HEIGHT, 'name="logo" usemap="#logo"') . '</a>'; ?><map name="logo"><?php echo HEADER_LOGO_IMAGEMAP; ?></map></div>

Then in header.php, I added:

define('HEADER_LOGO_IMAGEMAP', '<area shape="rect" alt="" coords="254,121,330,164" href="index.php?main_page=login">
<area shape="rect" alt="" coords="331,121,452,164" href="index.php?main_page=account">
<area shape="rect" alt="" coords="455,121,590,166" href="index.php?main_page=products_new">
<area shape="rect" alt="" coords="594,121,683,166" href="index.php?main_page=shippinginfo">
<area shape="rect" alt="" coords="687,121,799,165" href="index.php?main_page=contact_us">');

Seems to be working the way that I want it too finally, but someone told me the code was not validating correctly.

Anyone tell me what I need to do to tighten this up?

Thanks again.

Part is the php close tags order

<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, HEADER_LOGO_WIDTH, HEADER_LOGO_HEIGHT, 'name="logo" usemap="#logo"') . '</a>'; ?><map name="logo"><?php echo HEADER_LOGO_IMAGEMAP; ?></map></div> 

Pretty sure that it should be last like:

HEADER_LOGO_IMAGEMAP; </map></div> ?>

and may be others ??

You can check validation at http://validator.w3.org for yourself

I'm trying this to enable my image map, but I'm getting php errors. Is this code right?......(obviously if I'm getting errors, it's not...)

So what's wrong with the code? I can't put my site up till I get the image map working!

Help!!!