Adding a clickable image in the header

Community Forums Forums Design Tips and Tricks Adding a clickable image in the header

This topic is: not resolved

This topic contains 10 replies, has 3 voices, and was last updated by  pdguyonus 1 year, 6 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #23411

    kathiemt
    Participant
    Post count: 119

    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.


    Virtual Assistant & Nature Photographer
    Kathie Thomas: VADirectoryClick here for Australian images

    #23424

    NewSeasonDesign
    Participant
    Post count: 35

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

    #23428

    kathiemt
    Participant
    Post count: 119

    Ok, thanks, will give that a try.


    Virtual Assistant & Nature Photographer
    Kathie Thomas: VADirectoryClick here for Australian images

    #25641

    pdguyonus
    Participant
    Post count: 7

    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.

     

     

    #25652

    NewSeasonDesign
    Participant
    Post count: 35

    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.

    #25653

    NewSeasonDesign
    Participant
    Post count: 35

    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.

    #25694

    pdguyonus
    Participant
    Post count: 7

    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.

    #25695

    NewSeasonDesign
    Participant
    Post count: 35

    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.

    #25697

    NewSeasonDesign
    Participant
    Post count: 35

    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.

    #25704

    pdguyonus
    Participant
    Post count: 7

    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.

     

     

     

    #25712

    pdguyonus
    Participant
    Post count: 7

    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

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.