Image Maps - a Temporary Fix

[pamela631]

I have come up with a temporary fix for adding or having an image map on your header. I wanted to put all of my clients social icons on her header, top right hand side.. so using the old fashioned image map coding and some CSS this is what I did (It's not perfect but maybe someone else can improve upon it and share) and I wanted to share:

This is what I added to my define_main_page.php via Tools/Define Pages Editor:

<div id="social">
<img src="http://theposhbox.net/ZenCart/includes/templates/AModernShopper/images/icons.png" usemap="#social" width="227" height="66" border="0" />
</div>

<map name="social">
<area shape="rect" coords="0,0,37,49" href="#" title="Find us on Facebook" alt="Find us on Facebook">
<area shape="rect" coords="50,0,86,49" href="#" title="Find us on Google Plus" alt="Find us on Google Plus">
<area shape="rect" coords="97,0,134,49" href="#" title="Find us on Pinterest" alt="Find us on Pinterest">
<area shape="rect" coords="144,0,181,49" href="#" title="Find us on Twitter" alt="Find us on Twitter">
<area shape="rect" coords="192,0,227,49" href="#" title="View your Shopping Cart" alt="View your Shopping Cart">
</map>

And this is the CSS for it:

/* SOCIAL ICON IMAGE MAP */

#social {
float: right;
margin: -446px 0px 0 0;
}

Like I said, not perfect, but if anyone else wants to approve upon, please do so and share, so that we can all learn.
Thanks, Pamela

[kobra]

There is this which the code could be added to your custom tpl_header.php file

http://www.zen-cart.com/downloads.php?do=file&id=207

No antiquated image map required