Can I add an HTML image map into the header?

**touchclothing** · 16 Jun 2009, 08:04 PM

if you look at my site http://www.gottagreatgift.com/ in the header you will there is blog / contact / about us
I want to make those links how can I do that? Can I make the header back ground image an HTML image map? Or is there a better way to make those items links?

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

**jackie.taferner** · 25 Jun 2009, 10:24 PM

To get some help with the above, pls provide a working web address where I can see what problem you're talking about.

I agree with svakanda that you should really put links in CSS form. That's the new way to do it, and the right way to do it. Image maps should only be used for things like maps with clickable states, etc anything other than that, you're using an outdated method. Menus should be CSS all the way...

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

Thread Tools

Search Thread

Display

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?

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