Adding a clickable image in the header

[kathiemt]

I want to know if it's possible to put a clickable image in the header please?

I've been building a site in the Outreach theme at http://vtio.org.au/.  They have got 5 sponsors, one is top level and the other four then next level. I was thinking of putting the four in the footer like has been done at http://fdsa.org/dev_site/ but that would mean I need to give the top level sponsor much higher profile and was thinking it would be good to put it in the header and linked.

Alternate would be to put it next to the slider - I imagine that would mean resizing the slider. But again, I'd need to know what has to be done re putting a widget beside the slider to do that.

Thanks in advance for your help and suggestions.

---

Kathie Thomas

[NewSeasonDesign]

I use the Genesis Simple Hooks plugin and then add the image (with link) to the header hook. Then use CSS to position it.

[kathiemt]

Ok, thanks, will give that a try.

---

Kathie Thomas

[pdguyonus]

Can you please give an example of how this is done using Genesis Simple Hooks? I want to have visitors taken to an order page when they click on the header (there is a call to action to "Get Tickets Now")

Thanks.

 

 

[NewSeasonDesign]

You can add the image to the header hook (the Get Tickets Now image that is) and make it clickable:<div id="clicknow"><a href="your URL here"><img src="your image URL"></a></div>Then you could use CSS to position that image where you want it to be in the header.If your Get Tickets Now image is part of your header image already, you could map the header using http://image-maps.com. They'll give you code to put into that header hook.

[NewSeasonDesign]

You can add the image to the header hook (the Get Tickets Now image that is) and make it clickable:

<div id="clicknow"><a href="your URL here"><img src="your image URL"></a></div>

Then you could use CSS to position that image where you want it to be in the header.

If your Get Tickets Now image is part of your header image already, you could map the header using http://image-maps.com. They'll give you code to put into that header hook.

[pdguyonus]

Thanks I used http://image-maps.com and got map because the Get Tickets Now is part of the header. Only problem is the header appears above the header. Here is the image map code.

 

<div id="header" style="text-align:center; width:920px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_1201303121501059" src="http://thinkandgrowrichsummit.com/wp-content/themes/lifestyle/images/header.png" usemap="#Image-Maps_1201303121501059" border="0" width="920" height="214" alt="" />
<map id="_Image-Maps_1201303121501059" name="Image-Maps_1201303121501059">
<area shape="rect" coords="1,0,915,209" href="http://thinkandgrowrichsummit.com/specials" alt="Think and Grow Rich Get your Tickets Now" title="Think and Grow Rich Get your Tickets Now"    />
</map>
</div>

I have it disabled now because the site is live. I am not a css guru by any means. Any help would be appreciated.

[NewSeasonDesign]

You probably have to click the box next to "Unhook genesis_do_header() function from this hook?" in the genesis_header hook. Sorry I forgot that step before. That should remove the old header and just put yours in there.

[NewSeasonDesign]

Oops. That read my post as code. Let me try that again with some spaces. 🙂

You probably have to click the box next to “Unhook genesis do header function from this hook?” in the genesis_header hook. Sorry I forgot that step before. That should remove the old header and just put yours in there.

[pdguyonus]

That helped! But I still have an alignment problem or there seems to be two images there.  Here is my site.

http://thinkandgrowrichsummit.com

Thanks for your help.

 

 

 

[pdguyonus]

I see the problem. There are two images and the image map image is narrower than the one in the header. Not sure how that happened. I left justified it and it looks a little better but the right edge looks a little strange. I will see if I can track down what is going on.

That Genesis Hooks seem pretty handy, as does the image mapper. I was thinking an image map would be the solution but did not know how to implement it.

Thanks so much for your help!

Paul Guyon

[Author]

Posts