Can I add an HTML image map into the header?

**svakanda** · 16 Jun 2009, 09:15 PM

those links don't actually look active, Touch. If you want to use images as nav links, you are probably going to want to replace linked text with them using CSS.

This is how I do it with my header at Purebulk.com

The html....

Code:

<div id="header"><h1><a href="/">PureBulk</a></h1>

so just put your buttons in a list or divs or something with text and links to where they want to go...

and then here is the CSS that overwrites that with an image

Code:

#header h1 a:link, #header h1 a:visited{
        background:url(../images/PureBulk.gif) no-repeat;
        width:250px;
        height:81px;
        display:block;
        border:none;}

I hope that helps.!

**touchclothing** · 24 Jun 2009, 01:10 AM

you lost me on this one

**svakanda** · 24 Jun 2009, 03:00 AM

Do you understand how HTML & CSS interact with each other? The basic idea that HTML defines your containers & your content, and CSS modifies how those containers & content appear.

**schoolboy** · 24 Jun 2009, 09:21 AM

Several threads relating to image hotspots:-

Try this one for starters:

http://www.zen-cart.com/forum/showthread.php?t=93238

**dreamlex** · 24 Jun 2009, 10:17 AM

wonder if it is possible to make image active when clicking? i understand that it is something to do with css and also setting each page to its own body id.

But the main template has its own code for an example,

Code:

<body id="<?php echo $body_id . 'Body'; ?>"<?php if($zv_onload !='') echo ' onload="'.$zv_onload.'"'; ?>>

Is there a way to set each page to its own body id?

thanks.

**touchclothing** · 24 Jun 2009, 09:02 PM

I added an image map in to the tpl_header but for some reason my logo has dropped below the freeshipping and the cart totals drop to the bottom of the header can some one tell me why

tpl_header

Code:

<!--bof-branding display-->
 
<div id="logoWrapper">
<img src="http://www.gottagreatgift.com/includes/templates/gottagreat/images/header_bg.png" width="898" height="153" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="206,73,302,114" href="http://www.gottagreatgift.com/index.php?main_page=contact_us" target="_self" />
<area shape="rect" coords="308,74,400,115" href="http://www.gottagreatgift.com/index.php?main_page=page_2" target="_self" />
<area shape="rect" coords="441,4,618,147" href="http://www.gottagreatgift.com/index.php?main_page=page_3" target="_self" />
<area shape="rect" coords="137,68,206,115" href="http://www.gottagreatgift.com/index.php?main_page=page_3" target="_self" />
</map>
    <div id="logo"><span class="style1"><a href="/shop/index.php?main_page=shopping_cart"><img src="/includes/templates/gottagreat/images/cart.gif" /></a>
    
	<?php echo sizeof($_SESSION['cart']->get_products()); ?> &nbsp;items&nbsp;&nbsp;
 	<?php $header_cart = $currencies->format($_SESSION['cart']->show_total());  
	echo $header_cart;
	?>
</span>
<br class="clearBoth" />
</li><?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 if (HEADER_SALES_TEXT != '' || (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2))) { ?>
    <div id="taglineWrapper">
<?php
              if (HEADER_SALES_TEXT != '') {
?>
      <div id="tagline"><?php echo HEADER_SALES_TEXT;?></div>
      <div id="navMainCartSummary"><?php require(DIR_WS_MODULES . 'sideboxes/cart_summary.php'); ?></div>
<?php
              }
?>
<?php
              if (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2)) {
                if ($banner->RecordCount() > 0) {
?>
      <div id="bannerTwo" class="banners"><?php echo zen_display_banner('static', $banner);?></div>
<?php
                }
              }
?>
    </div>

**touchclothing** · 25 Jun 2009, 08:32 PM

any Ideas what I have done wrong

Thread: Can I add an HTML image map into the header?

Thread Tools

Search Thread

Display

Hybrid View

Re: Can I add an HTML image map into the header?

Re: Can I add an HTML image map into the header?

Re: Can I add an HTML image map into the header?

Re: Can I add an HTML image map into the header?

Re: Can I add an HTML image map into the header?

Re: Can I add an HTML image map into the header?

Re: Can I add an HTML image map into the header?

Similar Threads

Can I use an image map as a header?

How I can insert it into a box the google site map?

can you add an image in the header?

Can someone help me with an image map header?

Posting Permissions