Hot Spot on a main image

[pb4]

Hi,

I've looked this up and followed instructions from various threads but I am having no luck

My site is here

I would like the Design - Print - Web elements to be clickable.

I think I am right in that I need to place the code into my tpl header somwhere amoungst this. I have tried below the header wrapper but I couldn't get it to work.

<div id="headerWrapper">



<!--bof-navigation display-->
<div id="navMainWrapper">
<div id="navMain">
    <ul class="back">
    <li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a></li>
<?php if ($_SESSION['customer_id']) { ?>
    <li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a></li>
    <li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></li>
<?php
      } else {
        if (STORE_STATUS == '0') {
?>
              <a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"></a>
<?php } } ?>            </td>







<?php if ($_SESSION['cart']->count_contents() != 0) { ?>
    <li><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li>
    <li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a></li>
<?php }?>

	<li><a href="http://www.ampmgraphics.com/demo/index.php?main_page=about_us"><span style="color: #666666">| </span> About us</a></li>
		<li><a href="http://www.ampmgraphics.com/demo/index.php?main_page=portfolio"><span style="color: #666666">| </span>Portfolio</a></li>
			<li><a href="http://www.ampmgraphics.com/demo/index.php?main_page=testimonials"><span style="color: #666666">| </span>Testimonials</a></li>
				<li><a href="http://www.ampmgraphics.com/demo/index.php?main_page=contact_us"><span style="color: #666666">| </span>Contact us</a></li>
				
				

</ul>
</div>

<br class="clearBoth" />
</div>
<!--eof-navigation display-->
<!--bof-branding display-->
<div id="logoWrapper">
    <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>

    <div id="taglineWrapper">
<?php
              if (HEADER_SALES_TEXT != '') {
?>
      <div id="tagline"><?php echo HEADER_SALES_TEXT;?></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>
</div>

<div id="headerLogin"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?>
<!--eof-branding display-->

I found an image mapper tool that helps to code hot spots.

It gave me this code (to place in the tpl I presume?) Where should it go and what elements do I need to change for it to work?

<div style="text-align:center; width:842px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_3201003181114361" src="http://www.image-maps.com/uploaded_files/3201003181114361_1_header_bg.jpg" usemap="#Image-Maps_3201003181114361" border="0" width="842" height="238" alt="" />
<map id="_Image-Maps_3201003181114361" name="Image-Maps_3201003181114361">
<area shape="rect" coords="122,172,241,222" href="http://www.image-maps.com/" alt="Design" title="Design"    />
<area shape="rect" coords="445,173,530,223" href="http://www.image-maps.com/" alt="Print" title="Print"    />
<area shape="rect" coords="690,172,808,222" href="http://www.image-maps.com/" alt="Web" title="Web"    />
<area shape="rect" coords="840,236,842,238" href="http://www.image-maps.com/index.php?aff=mapped_users_3201003181114361" alt="Image Map" title="Image Map" />
</map>
<!-- Image map text links - Start - If you do not wish to have text links under your image map, you can move or delete this DIV -->
<div style="text-align:center; font-size:12px; font-family:verdana; margin-left:auto; margin-right:auto; width:842px;">
	<a style="text-decoration:none; color:black; font-size:12px; font-family:verdana;" href="http://www.image-maps.com/" title="Design">Design</a>
 | 	<a style="text-decoration:none; color:black; font-size:12px; font-family:verdana;" href="http://www.image-maps.com/" title="Print">Print</a>
 | 	<a style="text-decoration:none; color:black; font-size:12px; font-family:verdana;" href="http://www.image-maps.com/" title="Web">Web</a>
 | 	<a style="text-decoration:none; color:black; font-size:12px; font-family:verdana;" href="http://www.image-maps.com/index.php?aff=mapped_users_3201003181114361" title="Image Map">Image Map</a>
</div>
<!-- Image map text links - End - --></div>

It also gave me this to place in my css

<style type="text/css">
	dl.image_map {display:block; width:842px; height:238px; background:url(http://www.image-maps.com/uploaded_files/3201003181114361_1_header_bg.jpg); position:relative; margin:2px auto 2px auto;}
	a.LINK0 {left:122px; top:172px; background:transparent;}
	a.LINK0 {display:block; width:121px; height:0; padding-top:52px; overflow:hidden; position:absolute;}
	a.LINK0:hover  {background:transparent; border:1px dashed black; color:black;}
	a.LINK1 {left:445px; top:173px; background:transparent;}
	a.LINK1 {display:block; width:87px; height:0; padding-top:52px; overflow:hidden; position:absolute;}
	a.LINK1:hover  {background:transparent; border:1px dashed black; color:black;}
	a.LINK2 {left:690px; top:172px; background:transparent;}
	a.LINK2 {display:block; width:120px; height:0; padding-top:52px; overflow:hidden; position:absolute;}
	a.LINK2:hover  {background:transparent; border:1px dashed black; color:black;}
	a.BLINK {left:840px; top:236px; background:transparent;}
	a.BLINK {display:block; width:202px; height:17px; overflow:hidden; position:absolute; font-size:0px;}
	a.BLINK:hover  {background:black; border:1px dashed white; color:white; font-size:9px;}
</style>

<dl class="image_map">
	<dd><a class="LINK0" title="Design" href="http://www.image-maps.com/"></a></dd>
	<dd><a class="LINK1" title="Print" href="http://www.image-maps.com/"></a></dd>
	<dd><a class="LINK2" title="Web" href="http://www.image-maps.com/"></a></dd>
	<dd><a class="BLINK" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_3201003181114361">Mapped @ Image Mapper</a></dd>
</dl>

Can someone please help me with what I need to put in the tpl and where and also what I need to do to the css.

I managed to get the image up there with hotspots working but it was in the wrong place.

Its back to how it was now and how I would like it to look.

Can anyone help?

Thank you!

[stevesh]

I think it's a lot easier to do image maps with CSS, once you grasp the concept. A pretty good example Here

[pb4]

Hi,

Thanks for that link, seems nice and clear but as before still no joy.

Where do I put this bit with my tpl header? (See code above)

<div id="subscribe">
<a id="rss" href="[your feed link]" title="Subscribe with RSS"><span class="hide">RSS</span></a>
<a id="email" href="[your email subscribe link]" title="Subscribe with Email"><span class="hide">Email</span></a>
<a id="mobile" href="[your mobile link]" title="View Mobile Version"><span class="hide">Mobile</span></a>
&lt;/div&gt;

Thanks

[pb4]

Can anyone help with this?

Thanks

[pb4]

Have I done something wrong within my code? (tpl header)

IS there a step by step tutorial on how to add hot spots within zen cart?

Can anyone help?

[stevesh]

Take a look here to see if that's what you had in mind:

http ://www.stevesh.org/demo

(There's a space after http you'll have to remove.)

[pb4]

Thanks for that.

I was hoping to just have the 3 text areas as hot spots and I'm not too fussy if these need to be rectangular hotspots instead of fitting around tightly with the text.

So
"Design
...a wise choice"

Is one hot spot link and so on.,..just so its clear that they are links to three different pages.

Hope that is clear?

Thanks

[stevesh]

I'm not sure how you'll let visitors know that that text is a link, but ...

First, add this to includes/templates/red_passion/common/tpl_header.php

<div id="imagemap">

<a id="design" href="path_to_the_page_you_want_to_link_to" title="Design"><span class="hide">Design</span></a>

<a id="print" href="path_to_the_page_you_want_to_link_to" title="Print"><span class="hide">Print</span></a>

<a id="web" href="path_to_the_page_you_want_to_link_to" title="Web"><span class="hide">Web</span></a></div>


I put it between the eof-navigation and the bof-branding, but I'm not sure it matters.

Then, in the stylesheet, add display:none; to #logoWrapper and add this:

.hide {display:none;}

#imagemap {

height:238px;
width: 842px;
background-image: url(../images/header_bg.jpg);
background-repeat:no-repeat;
margin-top:0px;
}

#design {
float:left;
position:absolute;
width: 100px;
height: 70px;
margin-left:113px;
margin-top:167px;
}

#print {
float:left;
position:absolute;
width: 100px;
height: 70px;
margin-left:437px;
margin-top:167px;
}

#web {
float:left;
position:absolute;
width: 100px;
height: 70px;
margin-left:682px;
margin-top:167px;
}

You can fiddle with the width and height numbers and the margins to size the boxes and move the hot spots around.

[pb4]

Yay...that works now...Thank you. I was missing the logo wrapper bit of the css and was adding the text in the wrong bit of the tpl file.

I'll put click here bits on the image now..

Thanks..thats a great help

[FragaGeddon]

Thanks for the info stevesh.

You can fiddle with the width and height numbers and the margins to size the boxes and move the hot spots around.

Just to add to this, if you're having troubles mapping your images. I just used the info that was in fireworks when I had the Header.psd file open. This gave me all the info that I needed (height, width and the x and y coordinates.