Adding Clickable Image to Header Help

[ssheldon]

Hello,

I am trying to add a clickable image (with a hover effect) overlaying a section on my custom header graphic that leads to a signup page on my site. I have uploaded both images to the following socrates images directory: /www/wp-content/themes/socrates/images/

I created the style in styles.css:

#joinhere {
position:absolute;
top:243px; left:790px;
background: url('images/joinhere_on.jpg') no-repeat;
height: 62px;
width: 111px;
}

#joinhere a {
display: block;
height: 62px;
width: 111px;
}

#joinhere a:hover {
background: url('images/joinhere_off.jpg') no-repeat;
}

(NOTE: My custom header image is 330px high, that is why I have it 243px from top)

Then I went into header.php and inserted:

<!-- Join Here -->
<div id="joinhere"><a href="http://www.mysite.com/joinhere.html"></a></div>

This is inserted right below the search form and right above:
<?php } ?>
<!-- END HEADER SECTION -->

The images still don't show...help! What am I doing wrong??

Sue

[Dan Nickerson]

Can you include your link or PM it?

[ssheldon]

Hi Dan,

Looks like I just needed a little sleep to see things right :rolleyes:

I figured out where to put the div in the header file and it works perfectly. I inserted it right after the descText div as shown in red below. Thanks for responding though!

<div class="descText socshadow"><?php echo stripslashes($header['descText']); ?></div>
<!-- end jc -->

<!-- Join Here Image Links -->
<div id="joinhere"><a href="http://www.mysite.com/joinhere.html"></a></div>

<?php } ?>
</div><!-- /header -->
</div><!-- /im-header -->

[floname]

I'd like to do something similar, but just with an affiliate banner. My header size is the default, however I'd like the banner to jog to the right of my logo and be centered in the up/down position. I'm not sure how I'd code this into the header and make it look right. Help?

My site is floname.com

You can see where the logo is off to the left and I'd like to fill the space on the right with say a 468x60 banner? Any help is always appreciated :)

[ssheldon]

Try this: Rename the image files below to what they actually are when adding them to the stylesheet. If you only have one image file for the banner, (no hover effect) you can delete the 3rd style: #headerbanner a:hover {background: url('images/headerbanner_on.jpg') no-repeat;}

Then add these styles to the style.css sheet and save:

#headerbanner {position:absolute; top:258px; left:801px; background: url('images/headerbanner_off.jpg') no-repeat;}
#headerbanner a {display:block; height:60px; width: 468px;}
#headerbanner a:hover {background: url('images/headerbanner_on.jpg') no-repeat;}

Then open your header.php file and add the code in red below between the existing code that shows above and below (replacing thesitebannerlinkto to your banner code):

<div class="descText socshadow"><?php echo stripslashes($header['descText']); ?></div>
<!-- end jc -->

<!-- Header Banner Ad-->
<div id="headerbanner"><a href="http://www.thesitebannerlinksto.com"></a></div>
<?php } ?>
</div><!-- /header -->
</div><!-- /im-header -->

You'll need to play around with the #headerbanner 258px and 801px to adjust the position of your banner until it is in the exact position you want.

That's what worked for me, though I was directing to another page on my site. Maybe Dan has a better solution as far as the banner code goes. Hope that helps!

Sue

[floname]

Thanks Sue! My question would be, does this turn my entire heder into a link for the banner site? Would the original portion of my header still link to my homepage?

[ssheldon]

The original header would still link to your homepage. Only the display block where your banner sits in (468px x 60px) would link to your banner site.

[plam]

Wow, really great information, i also looking for same and searching some idea about clickable image, here you give me good information about that. really nice one. thanks for sharing.

[ssheldon]

Glad to help and give back a little. The support for this theme is incredible, thanks to Dan and all the other members that step up to answer questions.

This was my first venture into Wordpress, and using this theme has made me wonder why I waited so long. So far, there is nothing I haven't been able to accomplish that I've wanted to do...as far as layout goes. Most answers are someone in this forum... or as Dan says...in google :)

Sue

[jronc23]

Hi. I did try this solution but it is not working for me. I need the right side of header ad to be clickable on this site http://www.myipadapps.com
I fiddled with it in CSS and figured out. Thanks