Adding Image Map to header with Smart Backgrounds

[cspan27]

Hi Everyone,

I am having an issue here that I am unable to find an answer to and I don't know if anyone can help me.

I have a site set up with Zen Cart http://www.bobcaygeononline.com. I have the mod Smart Backgrounds in use as the client wants one image on the main page and then a different image on all the other pages, which I have been able to do.

The problem is the image on all the other pages requires it to be an image map and I don't know how to implement that with Smart Backgrounds installed. There are plenty of instructions to do it on sites that don't have the mod in use.....Please HELP!
Thanks.

[stevesh]

Since each page has a completely separate image, I'd imagine you would put the image map in just the images where you wanted it to appear. I don't think the mod would have anything to do with it.

[gjh42]

Smart Backgrounds in its standard form deals with background images, and would have no affect on an image map aside from changing what appears behind it.

You could do the desired links with pixel_trans.gif for an image, and size/position each link where you want it with an id and CSS. Then adjusting the links would not require any image editing.

[cspan27]

Wow thanks for the quick replies...I really love this forum and the people here are great!

I don't think I am grasping what the 2 of your are saying at all.....obviously you have seen the site with the link I provided? Are you saying that I setup the links for the image map in a CSS stylesheet?

I need a little direction as I am a noob on a lot of this.

[gjh42]

You can put the links into your /includes/templates/your_template/common/ tpl_header.php file.

With CSS, you can hide the Events and Store Locator links on the home page, and reposition the What's New link for home or interior pages.

[cspan27]

Ok Glenn....I totally understand what you mean, and where to put the code.

Where in the tpl_header.php page am I putting the image map code? I have my Smart Backgrounds code in that file already.

And how would I right out the links in the CSS Stylesheet?

[gjh42]

You could modify one of these link formats from elsewhere in the file for your purposes:

<a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a>

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

You could add the new links in the "branding display" section. Perhaps like

<?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '" id="whatsNewLink">' . zen_image($template->get_template_dir('pixel_trans.gif', DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . 'pixel_trans.gif', 'Whats New') . '</a>'; ?>

I haven't tested this, so it may need some tweaking to work correctly.

You would then style #whatsNewLink in your stylesheet, like this:

#whatsNewLink {
    width: 123px;
    height: 55px;
    position: absolute;
    top: 23px;
    left: 555px;
    }

/*and to give a positioning context for the links*/
#headerWrapper {position: relative;}

Adjust the numbers to fit.

[gjh42]

Should have looked closer at your site first. You are using the direct image variant of the code, so you have the image as a foreground element. I haven't used image maps myself, so am not familiar with exactly how they integrate with the image. I do think it ought to be more connected with the logo div, but we need someone who knows image maps better for this.

You can accomplish the result with individual links instead of the map.

P.S. - The
'<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '" id="whatsNewLink">'
would need to have the individual page added after . DIR_WS_CATALOG . so it points to the correct place.

[cspan27]

so you are saying that because my image is in the foreground using the Smart Backgrounds mod I can't do the image map thing?

[stevesh]

This is one of the better CSS image map explanations I've seen.

http://blogs.techrepublic.com.com/pr...lopment/?p=660

The idea is to give each area you want linked it's own id, then refer to those ids in the stylesheet and in the page the image is on.

I'll PM you an example I created when I was checking this stuff out.