How do I add second link to header image?

[SalonRoyalty]

I'm looking to make the "Get your Salon and day spa package today" image, link to my products page. Anyone know how I can do this?

www.SalonRoyalty.com

[SalonRoyalty]

Does noone know how to do this?

[gjh42]

It doesn't appear that the "Get Your..." image is a separate image, but part of the header bg. Is this correct? Assuming it is, you can add a new link to the header, and size it and position it absolutely so it covers the desired area.
Something like

<?php echo '<a id="spaDealLink" href="' . HTTP_SERVER . DIR_WS_CATALOG . 'index.php?main_page=index&cPath=1">'; ?><span class="textAway">Get your Salon & Day Spa package today!</span></a></li>

Add to your stylesheet:

#spaDealLink {
    display: block;
    position: absolute;
    top: 123px;
    left: 542px;
    width: 200px;
    height: 200px;
    }

.textAway {
    position: relative;
    left: -9999px;
    }

The .textAway allows the link to be meaningful to anyone, even using a screenreader, but puts the text way off the screen for ordinary users.

The index.php?main_page=index&cPath=1 may need to be adjusted a bit, I don't have time right now to check it.

Add the new link to /includes/templates/your_template/common/tpl_header.php below the logo code block.

[SalonRoyalty]

Thanks alot!! I really appreciate the help...a little tweaking and it is perfect. I had to remove the textaway because when you click the link a tan box pops up and runs the length of the screen. Unsure how to turn that off but I'm happy with the current results.

Bravo!!

[gjh42]

Glad to see you have it working.
I'm going to guess that you have a 1280px monitor.
The clickable area on my 1024px monitor is offset to the right of the text, because the position: absolute is calculating from the extreme left edge of the screen, which varies depending on the window width.
In your stylesheet, find

/*wrappers - page or section containers*/
#mainWrapper {

	text-align: left;
	width: 842px;
	vertical-align: top;
	background-image: url(../images/mainwrapper_tile.jpg);
	background-repeat: repeat-y;
	background-position: center;
	}

and add

	position: relative;

Adjust the left spacing of the link as required.
This will make the link position itself relative to the left edge of the main content, irrespective of the window width.

[SalonRoyalty]

I didn't even notice this and when I did, I came back to find the answer and you already had it posted. That's awesome!! Thanks so much!

[Website Rob]

That's a nicely coded solution Glenn and sure beats using an Image Map.

Thanks for sharing.