Adding Image Map to header with Smart Backgrounds

21 Jul 2009, 15:04

#1

New Zenner

Join Date:: Jun 2009
Posts:: 20
Plugin Contributions:: 0

Adding Image Map to header with Smart Backgrounds

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.

21 Jul 2009, 15:29

#2

stevesh

Black Belt

Join Date:: Feb 2005
Posts:: 19,793
Plugin Contributions:: 2

Re: Adding Image Map to header with Smart Backgrounds

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.

21 Jul 2009, 15:37

#3

gjh42

Black Belt

Join Date:: Jul 2005
Posts:: 21,876
Plugin Contributions:: 6

Re: Adding Image Map to header with Smart Backgrounds

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.

21 Jul 2009, 15:44

#4

cspan27

New Zenner

Join Date:: Jun 2009
Posts:: 20
Plugin Contributions:: 0

Re: Adding Image Map to header with Smart Backgrounds

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.

21 Jul 2009, 15:46

#5

gjh42

Black Belt

Join Date:: Jul 2005
Posts:: 21,876
Plugin Contributions:: 6

Re: Adding Image Map to header with Smart Backgrounds

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.

21 Jul 2009, 15:55

#6

cspan27

New Zenner

Join Date:: Jun 2009
Posts:: 20
Plugin Contributions:: 0

Re: Adding Image Map to header with Smart Backgrounds

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?

21 Jul 2009, 16:16

#7

gjh42

Black Belt

Join Date:: Jul 2005
Posts:: 21,876
Plugin Contributions:: 6

Re: Adding Image Map to header with Smart Backgrounds

You could modify one of these link formats from elsewhere in the file for your purposes:[php]<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>[/php]You could add the new links in the "branding display" section. Perhaps like[php]<?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>'; ?>[/php]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.

21 Jul 2009, 16:22

#8

gjh42

Black Belt

Join Date:: Jul 2005
Posts:: 21,876
Plugin Contributions:: 6

Re: Adding Image Map to header with Smart Backgrounds

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.

21 Jul 2009, 16:40

#9

cspan27

New Zenner

Join Date:: Jun 2009
Posts:: 20
Plugin Contributions:: 0

Re: Adding Image Map to header with Smart Backgrounds

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?

21 Jul 2009, 16:57

#10

stevesh

Black Belt

Join Date:: Feb 2005
Posts:: 19,793
Plugin Contributions:: 2

Re: Adding Image Map to header with Smart Backgrounds

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

http://blogs.techrepublic.com.com/programming-and-development/?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.

21 Jul 2009, 17:18

#11

gjh42

Black Belt

Join Date:: Jul 2005
Posts:: 21,876
Plugin Contributions:: 6

Re: Adding Image Map to header with Smart Backgrounds

One of the comments mentioned the drawback to using text with the negative indent - the selection border extending off the screen - which is why I suggest using pixel_trans.gif. Another possibility would be to have the text content be (a non-breaking space), though it is possible that would have SEO issues.

Note the comment in the article that IE 6 & 7 have problems with links over foreground images. The standard Smart BG might be safest - test and see.

23 Jul 2009, 15:14

#12

cspan27

New Zenner

Join Date:: Jun 2009
Posts:: 20
Plugin Contributions:: 0

Re: Adding Image Map to header with Smart Backgrounds

Ok sorry guys.....please check out this part of my page:

http://www.bobcaygeononline.com/index.php?main_page=page&id=1

the header at the top of this is what I really want image mapped....the 3 buttons on the right hand side.

I am still lost as to where I insert the code in the smart backgrounds code to tell it to use an image map. This is the code I have in tpl_header.php:


<div id="logoWrapper">

<?php $smart_image = '';
if ($current_page_base == 'index' or $current_page_base == 'product_info') { //add _ and cPath to filename only if individual cat image exists, else add _ and top cat id to bg filename only if top cat image exists
$smart_image = file_exists(DIR_WS_TEMPLATE_IMAGES . 'smartbg_' . $_GET[cPath] . '.gif')?'_' . $_GET[cPath]:(file_exists(DIR_WS_TEMPLATE_IMAGES . 'smartbg_' . (int)$_GET[cPath] . '.gif')?'_' . (int)$_GET[cPath]:'');
} elseif ($current_page_base == 'page') { //add _page and ez-page id to filename only if ez-page id image exists, else add _page to filename only if general ez-page image exists
$smart_image = file_exists(DIR_WS_TEMPLATE_IMAGES . 'smartbg_page' . $_GET[id] . '.gif')?'_page' . $_GET[id]:(file_exists(DIR_WS_TEMPLATE_IMAGES . 'smartbg_page.gif')?'_page':'');
} else { //add _ and page base to filename only if page image exists
$smart_image = file_exists(DIR_WS_TEMPLATE_IMAGES . 'smartbg_' . $current_page_base . '.gif')?'_' . $current_page_base:''; //default/home page class will be just .smartBG, and filename smartbg.gif
}?>

<div id="logo"><?php echo zen_image(DIR_WS_TEMPLATE_IMAGES . 'smartbg' . $smart_image . '.gif', '');?></div>

23 Jul 2009, 17:15

#13

gjh42

Black Belt

Join Date:: Jul 2005
Posts:: 21,876
Plugin Contributions:: 6

Re: Adding Image Map to header with Smart Backgrounds

I can't tell you how to use an HTML "image map". To use a CSS image map appearance, I would suggest wrapping three transparent links in a test for home page, to be output only if not on home page. Then style them with position: absolute; so they appear over the relevant areas of the image.
This all would go after the logo image code, and would not interact with the Smart BG code at all.[php]if (!$this_is_home_page){
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>';
echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '" id="eventsLink">' . zen_image($template->get_template_dir('pixel_trans.gif', DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . 'pixel_trans.gif', 'Events') . '</a>';
echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '" id="storeLocatorLink">' . zen_image($template->get_template_dir('pixel_trans.gif', DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . 'pixel_trans.gif', 'Store Locator') . '</a>';
}[/php]

23 Jul 2009, 21:13

#14

cspan27

New Zenner

Join Date:: Jun 2009
Posts:: 20
Plugin Contributions:: 0

Re: Adding Image Map to header with Smart Backgrounds

Ok Glenn...I get what you are referring to with the CSS usage and thanks so much for your help and patience.

Where exactly in the code do I place this code you sent me? I know you said after the logo but where exactly?

I am very new to this still and just tryig to get a grasp on things.

24 Jul 2009, 11:39

#15

gjh42

Black Belt

Join Date:: Jul 2005
Posts:: 21,876
Plugin Contributions:: 6

Re: Adding Image Map to header with Smart Backgrounds

It could go immediately after the logo div, or even in the logo div after the logo image.

[php]<div id="logo"><?php echo zen_image(DIR_WS_TEMPLATE_IMAGES . 'smartbg' . $smart_image . '.gif', '');?>

</div>
 [/php]
[php]<div id="logo"><?php echo zen_image(DIR_WS_TEMPLATE_IMAGES . 'smartbg' . $smart_image . '.gif', '');?>

<?php
if (!$this_is_home_page){
echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . 'whatsnewpagecode' . '" id="whatsNewLink">' . zen_image($template->get_template_dir('pixel_trans.gif', DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . 'pixel_trans.gif', 'Whats New') . '</a>';
echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . 'eventspagecode' . '" id="eventsLink">' . zen_image($template->get_template_dir('pixel_trans.gif', DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . 'pixel_trans.gif', 'Events') . '</a>';
echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . 'locatorpagecode' . '" id="storeLocatorLink">' . zen_image($template->get_template_dir('pixel_trans.gif', DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . 'pixel_trans.gif', 'Store Locator') . '</a>';
} ?>
</div>
 [/php]

24 Jul 2009, 15:38

#16

cspan27

New Zenner

Join Date:: Jun 2009
Posts:: 20
Plugin Contributions:: 0

Re: Adding Image Map to header with Smart Backgrounds

Glenn...thanks again for the help!

I placed the code you provided in both places you suggested and I have the whatsnewlink added into the CSS stylesheet that you provided earlier and the link is not showing up on the header image. Is there something else I am doing wrong or missing here?

Thanks again!

25 Jul 2009, 00:14

#17

gjh42

Black Belt

Join Date:: Jul 2005
Posts:: 21,876
Plugin Contributions:: 6

Re: Adding Image Map to header with Smart Backgrounds

Do you have the links pointing to the correct place? My example was schematic and I don't know the exact address for your links. I also don't know whether you have pixel_trans.gif in your /includes/templates/your_template/images/ folder.

Did you style the link ids in your stylesheet to give them dimensions and position them?