How to make header image hotspot?

Community Forums Forums Design Tips and Tricks How to make header image hotspot?

This topic is: not resolved

Tagged: ,

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

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #13294

    deck2deck
    Participant
    Post count: 14

    I need help making a portion of my header image clickable (‘hotspot’ or ‘image map’) to go to a different URL.

    I’m using the Metric theme and, although I’ve been able to find instructions on how to do it IF one is using a theme with a header.php file, the Metric theme does not appear to have that file (or I can’t find it).

    Can someone help me please?  I know it must be possible; I see websites with it all the time, but I’m not a programmer… just a lowly webmaster… and don’t know how to figure it out for myself.

    Thanks!

     

    #13304

    Susan
    Moderator
    Post count: 8729

    Try this (I just tested it on my testing site using the Metric Theme, and it worked):

    http://dreamwhisperdesigns.com/genesis-tutorials/change-genesis-header-home-link/

     

     


    Susan @ Graphically Designing I’d love to customize your website! I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

    #13320

    deck2deck
    Participant
    Post count: 14

    Thank you Susan… where in the functions.php file did you put the code?  I tried it at the end and it broke my site… gave me a syntax error.

    Also I was wanting to link only a portion of the image — not the whole thing.  I want a ‘hotspot’… do you know how to do that?

     

    #13326

    Susan
    Moderator
    Post count: 8729

    I put the code close to the top, here’s a snippet of my file:

    [php]

    // Add widgeted footer section
    add_action(‘genesis_before_footer’, ‘metric_include_footer_widgets’);
    function metric_include_footer_widgets() {
    require(CHILD_DIR.’/footer-widgeted.php’);
    }

    add_filter( ‘genesis_seo_title’, ‘child_header_title’, 10, 3 );
    /**
    * Change default Header URL.
    *
    * @author Jen Baumann
    * @link http://dev.studiopress.com/change-header-link.htm
    *
    * @param string $title complete title including $wrap and $inside
    * @param string $inside contents of the $title with link and site name
    * @param string $wrap outer $title tags, may be h1 or h4
    * @return string
    */
    function child_header_title( $title, $inside, $wrap ) {
    $inside = sprintf( ‘<a href="http://affordyourpassions.net/&quot; title="%s">%s</a>’, esc_attr( get_bloginfo( ‘name’ ) ), get_bloginfo( ‘name’ ) );
    return sprintf( ‘<%1$s id="title">%2$s</%1$s>’, $wrap, $inside );
    }

    [/php]

    You can see it in action on my test site (it links from my test site to my blog)

    As far as making part of the logo a hotspot, I would have to investigate further. I didn’t upload a logo – I just used the theme logo (“Metric”)


    Susan @ Graphically Designing I’d love to customize your website! I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

    #13328

    Susan
    Moderator
    Post count: 8729

    As far as creating a hotspot, so that the image goes to two different locations, I don’t think you need the code from my original post – that was to redirect your header to another URL. This is a tutorial which was recommended on the other forum:

     


    Susan @ Graphically Designing I’d love to customize your website! I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

    #13353

    deck2deck
    Participant
    Post count: 14

    OK thanks.  The image mapping on the second tutorial shows how to do it on an html page, which I can already do… I need to do it in .php (more specifically, in WordPress/Studiopress).

    I really appreciate you trying to help!  I’ve been wrestling with this beast for the better part of a week (searching forums, trying to find an answer).  So frustrating!!  I’m sure it can be done but I’m surprised at how difficult it’s proving to be to find instructions.

    Anyone else out there have any ideas?

    #13356

    Susan
    Moderator
    Post count: 8729

    @deck2deck – as the tutorial was recommended by one of the StudioPress staff on the other forum, I thought it would work for you – let me try to find another one for you…


    Susan @ Graphically Designing I’d love to customize your website! I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

    #13372

    Susan
    Moderator
    Post count: 8729

    OK thanks.  The image mapping on the second tutorial shows how to do it on an html page, which I can already do… I need to do it in .php (more specifically, in WordPress/Studiopress).

    If you already know how to do it with html, have you considered using the Genesis Simple hooks plug-in – that should allow you to insert the html code into the correct place using simple hooks…

    http://www.studiopress.com/plugins/simple-hooks


    Susan @ Graphically Designing I’d love to customize your website! I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

    #23236

    kastriebel
    Participant
    Post count: 5
Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.