Image Map Header: Is it possible?

[Dorothy pcnc]

I have been searching for the answer to this question for 2 weeks now. I have come across about 7 or 8 suggestions to try here on the forum and I've attempted every single one...not a single one worked for me.

I'm using Zen version v1.3.9d

I'm modifying the Free Red template.

I do not have the site live yet. I'm running it on Wamp server.

I have my image map in both css and html formats.

What I have tried so far has either made no change at all to the header just leaving the header image showing with no links happening or it's totally wiped out the whole layout of the shop's pages with no header iamge showing at all. I can't even get a happy medium going here...lol.

I have my whole site working and ready to go except for the dang image map header and it's holding up EVERYTHING.

Can anyone give this newb great instructions on how to get an image map in the header....please? Thank you!

[Website Rob]

You should search the Internet for: css image map

Using CSS is the new / better way and worth the time it takes to learn how. Cannot help in your current situation as we cannot see what you see.

[Dorothy pcnc]

Thanks Rob. I already have the css for my image map. I just have no idea where to put it in the code to get it to actually work in zen cart.

Like I said I've placed it all over..in the tpl_header.php in languages file, I've tried my header.php in my theme's folder and of course made changes in the stylesheet in my theme. I have searched css header image map in google and in particular for zen cart. And the answers I found...I've tried them ALL. To be honest most of the posts were a few years old and zen cart has changed over those years.

So if anyone has done it in a more current version of zen and can give me anything to try, sock it to me. Many thanks.

[gjh42]

You don't need any special "image map" code. Just put each of your links into /includes/templates/your_template/common/tpl_header.php, probably in the logoWrapper section or whatever makes sense to you for good organization, and style each of them like

#mapLink1 {
    position: absolute; 
    top: 123px; 
    left:123px;
    height: 123px;
    width: 123px;
    }

changing the 123 to suit for each property.
Give the #headerWrapper rule a property of
position: relative;
to give a positioning context to the links.

Give each link an id; you may need to have a pixel_trans.gif image in the link for older versions of IE to treat them properly - experiment.

Also give each link an alt="whatever" attribute for SEO and accessibility.

[gjh42]

Oh, and if you don't know where to put the style rules, they go in /includes/templates/your_template/css/stylesheet.css.

[Dorothy pcnc]

Thanks so much gjh for the information. I will spend this evening giving this a go. I'll report back with my results. Wish me luck...I really appreciate it!

(gotcha on the style rules!)

[gjh42]

If you're not familiar with PHP coding, you should be aware that the HTML link code needs to go outside of the <?php and ?> tags that set it off, or it will be treated as PHP code instead of HTML and give errors.