Adding Image Map to header with Smart Backgrounds

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

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