Adding Image Map to header with Smart Backgrounds

[gjh42]

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.

[cspan27]

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

http://www.bobcaygeononline.com/inde...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:

<!--bof-branding display-->
<div id="logoWrapper">
<!--Smart Backgrounds-->
<?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
}?>
<!--/Smart Backgrounds-->
<div id="logo"><?php echo zen_image(DIR_WS_TEMPLATE_IMAGES . 'smartbg' . $smart_image . '.gif', '');?></div>

[gjh42]

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.

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>';
} 

[cspan27]

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.

[gjh42]

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

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

<div id="logo"><?php echo zen_image(DIR_WS_TEMPLATE_IMAGES . 'smartbg' . $smart_image . '.gif', '');?>
<!--here-->
<?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>
<!--or here-->

[cspan27]

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!

[gjh42]

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?