ImageMap in the logo...?

Hey, folks.

First off, yay me! I've finally been able to give back a bit - I just posted my first "let me help you out" response to someone asking for help on here. (Feels SO good to have done enough that I at least somewhat know what I'm talking about).

Now, it's back to 'newbie status.' :wink2:

Here's the question:

Some of you may have seen my original post regarding the layout I'm creating for my site. (If you didn't see it, browse on over to it - you'll need to have a quick look at the image on the page to get where I'm coming from).

The site's coming along nicely...but due to the way my logo (a transparent .PNG file) overlaps the other elements, I need to keep Zen Cart from using the whole logo file as a link to the homepage. (But I'd still like part of the logo to link back to the homepage).

Enter the ImageMap.

I've built an imagemap (my first) to allow just a part of the logo that's non-overlapping with other elements to be an active link. In standard HTML, it looks something like this:

And the corresponding <img> tag:

Looks okay, right? I've also changed my logo in the header.php file. Now my problem is getting the above code to work in the tpl_header.php file (which I AM overriding, BTW - not working on the original file). :smile: Looking at the file, I've isolated the part I need to change, but my PHP is limited enough that I don't understand exactly what's happening there.

Here's the code for the section of tpl_header.php:

I think the part that's throwing me off is not understanding what the functions here do (I'm guessing the "zen_image" function returns an <img> tag, but I'm really not sure).

Sooo...can anyone give me any pointers as to how I would change the above code to insert the imagemap? (and do I need to create a separate <div> for the <map> tag so it won't interfere with the formatting of the other <div>'s?)

Thanks!!

An update: I've been tinkering, and have overridden the tpl_header.php file as follows:

Starting on line 72, I changed this:

<div id="logo">

to this:

<div id="logo">
<map name="UH_Logo_Map">
<area shape="poly" alt=" " coords="-1,-2, 163,-2, 214,73, 207,133, 111,201, 48,199, -1,135, -1,1" href="http://www.upscalehomeless.com" />
</map>
<?php echo zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT . ' usemap="#UH_Logo_Map"'); ?></div>

Obviously, that ain't workin'. Here's the HTML that my index page is now generating:

<div id="logo">
<map name="UH_Logo_Map">
<area shape="poly" alt=" " coords="-1,-2, 163,-2, 214,73, 207,133, 111,201, 48,199, -1,135, -1,1" href="http://www.upscalehomeless.com" />
</map>
<img src="includes/templates/upscale_homeless_01/images/uh_logo_sm.png" alt="usemap="#UH_Logo_Map"" title=" usemap="#UH_Logo_Map" " width="246" height="314" /></div>

I know. A big ol' mess.

I removed the <a> tag from the start & end of the string, just so it wouldn't make the whole image into a link...but now I can't figure out how to get the extra usemap attribute onto the end of the <img> tag (and how to keep it from adding itself to the <alt> and <title> tags, for that matter).

I've been to the /includes/functions/html_output.php to read over the zen_image function and see how it works...so that perhaps I'd better understand where the usemap attribute needs to be inserted in the string...but I just can't quite get my mind around it, at this point in my relatively short-lived PHP career. :huh:

Okay, that's where I'm at right now. Thoughts? Suggestions?

(And should I be posting this in this forum, or is it better-suited for somewhere else?)

Thanks much!

Try:

<map name="UH_Logo_Map">
<area shape="poly" alt=" " coords="-1,-2, 163,-2, 214,73, 207,133, 111,201, 48,199, -1,135, -1,1" href="http://www.upscalehomeless.com" />
</map>
<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, 'usemap="#UH_Logo_Map"') . '</a>'; ?></div>

and be sure to set the definition for HEADER_LOGO_IMAGE to be your uh_logo.png file

Hey, Dr. Byte! Seems you're answering all my Q's tonight.

Hmmm...still some issues. I'm getting the following error:

Parse error: syntax error, unexpected T_CONSTANT_ENCAPSED_STRING in .../common/tpl_header.php on line 76

Any thoughts?

BTW, I just realized I can use a CSS imagemap - something I had originally considered, but decided against it as it wouldn't allow me to overlap the logo with the product container as much, since you can't use polygon imagemaps via CSS (I'm also absolutely positioning my logo to allow for the overlap, which seemed to be another potential problem with that approach).

Well, I've been toying around with it, and found that I can make a CSS imagemap work with only a minor adjustment to the layout to correct for too much overlap. So the problem is, in essence, solved right now. (Not the most ideal way, but it works).

So if you've got more important fires to douse, please go take care of them. But if you feel like pressing on and figuring the whole thing out, it'd be nice to have the option to do it that way...and at the very least, it'll help someone down the road looking to do something similar.

Thanks again!

LloydDobbler:

I'm getting the following error:

Parse error: syntax error, unexpected T_CONSTANT_ENCAPSED_STRING in .../common/tpl_header.php on line 76

What's on line 76?

Sorry. I guess that would've been useful info, eh?

line 76 is the line of PHP code you referenced in your first response -

<?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, 'usemap="#UH_Logo_Map"') . '</a>'; ?></div>

Hello,

I am trying to achieve this same thing.
I can't hardcode the image because the image changes depending on the language selected.

I tried doing what was suggested but the image map still isn't working.
I also tried removing the default php link on the logo so it is possible that I messed something up.

<div id="logoWrapper">
<div id="logo">
<map name="logo_Map">
<area shape="rect" alt="" coords="568,164,748,190" href="index.php?main_page=contact_us">
<area shape="rect" alt="" coords="374,164,560,190" href="index.php?main_page=shippinginfo">
<area shape="rect" alt="" coords="186,164,364,190" href="#">
<area shape="rect" alt="" coords="1,164,176,190" href="index.php">
</map>
<?php echo zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT, 'usemap=#logo_Map'); ?>

</div>
</div>

any help with figuring this out would be greatly appreciated.

I found this thread VERY helpful. . .

http://www.zen-cart.com/forum/showthread.php?t=80885