How to make header image hotspot?

[deck2deck]

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!

 

[Susan]

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/

 

 

[deck2deck]

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?

 

[Susan]

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

// 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/" title="%s">%s</a>', esc_attr( get_bloginfo( 'name' ) ), get_bloginfo( 'name' ) );
 return sprintf( '<%1$s id="title">%2$s</%1$s>', $wrap, $inside );
}

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]

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:

 

[deck2deck]

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?

[Susan]

@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]

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

[kastriebel]

Check out this link

http://wordpresstipsandmore.com/2011/05/add-multiple-header-links-to-genesis-corporate-child-theme-using-an-image-map/

[Author]

Posts