Hot Spot on a main image

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