adding image map

[dream_mike]

I am trying to add a clickable image map to the zencart page, following an html template that already works for other parts of my site. I place it in tpl_header.php in includes/templates/barebones/common. I get the image, but without links.

I place my new code beneath the
<!--bof-branding display-->
<div id="logoWrapper">
... ?></div>
section, which places the new image right underneath the HEADER_LOGO_IMAGE - which I intend to change to a vertically short bar, or eliminate entirely, making my image effective the logo image.

The code is:
<div id="homeheader"><img src="./includes/templates/barebones/images/(image file)" alt="(alt text)" width="769" height="100" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="571,166,639,188" href="mailtoaddress)" />
<area shape="circle" coords="694,177,36" href="/home/(my username)/(site URL)/(sub-page name)/index.html" />
<area shape="rect" coords="521,167,562,189" href="/home/(my username)/(site URL)/index.html" />
<area shape="rect" coords="27,174,225,230" href="/home/(my username)/(site URL)/index.html" />
</map></div>

with suitable values for the elements in parentheses. That smiley is the interface not liking my malformed email address. I have increased the vertical coordinates to move the clickable regions into the image. I've checked those values approximately by reading cursor location on my desktop. Besides the addresses starting with "home" shown above, I have tried addresses starting with ./ or ~, with no more success.

Adding <?php ... ?> brackets around the code segment makes the page disappear entirely.

Is this some issue with mixing HTML and php? I already know I can make bits of text appear in this location - why aren't the links active in the clickable image?

I see that people have tried making the HEADER_LOGO_IMAGE clickable, and that'd be OK, but they don't seem to have much success at it, e.g.:
http://www.zen-cart.com/showthread.p...light=Map+area
http://www.zen-cart.com/showthread.p...light=Map+area

Thank you for your attention.

[stevesh]

If you don't mind starting over with a CSS image map (much easier, I think), check out my post #8 here:

http://www.zen-cart.com/showthread.p...n-a-main-image

[dream_mike]

stevesh,

Thanks for your suggestion. As it happens, I finally found my links - they were farther down the page than I was looking. Image map coordinates are relative to the image, not the top of the page, Duh.

I have now turned off the HEADER_LOGO_IMAGE entirely (in includes/languages/english/barebones: define('HEADER_LOGO_IMAGE', ''); and setting HEADER_LOGO_WIDTH HEADER_LOGO_HEIGHT to '0px'), and have replaced it with my image map.

I will, however, keep your suggestion in mind for next time. Thanks again!