ImageMap Explanation

[zero1niner]

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.

[kobra]

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

[zero1niner]

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.

[zero1niner]

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

[kobra]

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"

[zero1niner]

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

[kobra]

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

[wetjet]

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