Community Forums › Forums › Archived Forums › Design Tips and Tricks › How to make header image hotspot?
- This topic has 8 replies, 3 voices, and was last updated 11 years, 1 month ago by kastriebel.
-
AuthorPosts
-
January 20, 2013 at 12:03 pm #13294deck2deckMember
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!
January 20, 2013 at 1:10 pm #13304SusanModeratorTry 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/
January 20, 2013 at 2:30 pm #13320deck2deckMemberThank 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?
January 20, 2013 at 3:26 pm #13326SusanModeratorI 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")
January 20, 2013 at 3:31 pm #13328SusanModeratorAs 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:
January 20, 2013 at 4:53 pm #13353deck2deckMemberOK 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?
January 20, 2013 at 5:04 pm #13356SusanModerator@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...
January 20, 2013 at 7:12 pm #13372SusanModeratorOK 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...
February 27, 2013 at 10:22 pm #23236 -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.