Adding images as links over header background

Locked

Results 1 to 5 of 5

This thread is locked. New replies are disabled.

08 May 2007, 13:14

bobguindon

New Zenner

Join Date:: Apr 2007
Posts:: 30
Plugin Contributions:: 0

Adding images as links over header background

I am trying to add 3 images as links on my header, over the background image. I have an example, taken from the SimpleZen template:

http://www.superphones.com/images/headerlinks.jpg

I studied the .css for SimpleZen, but only found half the answer there. I have created the 3 images - shoppingcart.jpg, contactus.jpg and myaccount.jpg. As a beginner to stylesheets and php, I am looking for the 'best' way to accomplish this.

My site is: www.superphones.com and is running version 1.3.7. I am using the nightfall template.

Thanks,
Bob

08 May 2007, 13:35

kobra

Black Belt

Join Date:: Aug 2005
Posts:: 31,500
Plugin Contributions:: 4

Re: Adding images as links over header background

You can add a div for these to tpl_header.php and float to the right.

Use the anchor tag 3 times for the images like:

<a href="url.com"><img src="images/image.xxx" alt="?????" width="xx" height="xx" /></a>

Refine placement via the CSS to the created div tag

Alternatively, you can create a background image that contains all images rolled into one image. Then create a transparent image map that overlays the hot spots.
Google for html image map for particulars

08 May 2007, 17:56

bobguindon

New Zenner

Join Date:: Apr 2007
Posts:: 30
Plugin Contributions:: 0

Re: Adding images as links over header background

Using your code example, I was able to get the three images to stack vertically, starting below the background_jpg. Also, the links to the three internal pages work fine. I have no clue, however, how to get the images to display horizontally, on top of the background.jpg.

I guess that I need to do some serious studying of php and stuylesheets before I can figure the rest of it out.

Thanks,
Bob

08 May 2007, 18:23

gjh42

Black Belt

Join Date:: Jul 2005
Posts:: 21,876
Plugin Contributions:: 6

Re: Adding images as links over header background

You must have put your link code in the wrong place. Since the background is in the logo div inside tpl_header.php, you need to put the links there as well.

A <div id="headerLinks><your links></div> will do.
Then style #headerLinks {float: right; margin-top: xxpx; etc.} in your stylesheet.

08 May 2007, 19:24

bobguindon

New Zenner

Join Date:: Apr 2007
Posts:: 30
Plugin Contributions:: 0

Re: Adding images as links over header background

Success! Now I have the images roughly in the correct place. Just a bit of tweaking the images and then some fine tuning on their placement.

Thanks,
Bob