Use image map in header image
-
Hi.
I’m trying to use an image map as my header image. I’ve created the image, and the necessary html but I’m not sure where I need to insert that html. I assume header.php, but where. I’m a bit lost in terms of php.
I’m using my own child theme of Twentyeleven and the site in question can be viewed at: http://www.welearnlanguages.com.
Any help greatly appreciated.
-
In header.php, underneath
<img src="<?php header_image(); ?>" width="<?php echo $header_image_width; ?>" height="<?php echo $header_image_height; ?>" alt="" />Much appreciated. It’s worked, however I now have 2 header images. One’s my iamge map, and the other is the same image without the mappings.
Here’s (I believe) the relevant section of header.php
<?php // The header image // Check if this is a post or page, if it has a thumbnail, and if it's a big one if ( is_singular() && has_post_thumbnail( $post->ID ) && ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( $header_image_width, $header_image_width ) ) ) && $image[1] >= $header_image_width ) : // Houston, we have a new header image! echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' ); else : // Compatibility with versions of WordPress prior to 3.4. if ( function_exists( 'get_custom_header' ) ) { $header_image_width = get_custom_header()->width; $header_image_height = get_custom_header()->height; } else { $header_image_width = HEADER_IMAGE_WIDTH; $header_image_height = HEADER_IMAGE_HEIGHT; } ?> <img src="<?php header_image(); ?>" width="<?php echo $header_image_width; ?>" height="<?php echo $header_image_height; ?>" alt="" /> <img src="http://www.welearnlanguages.com/wp-content/uploads/2012/08/wellheader1.png" alt="" width="1200" height="264" usemap="#map" border="0" /> <map name="#map" id="map"> <area shape="rect" coords="313,160,475,229" alt="Check out all our posts" href="http://www.welearnlanguages.com/blog/" /> <area shape="rect" coords="498,160,714,229" alt="Learn a bit of information about who we are" href="http://www.welearnlanguages.com/about" /> <area shape="rect" coords="742,159,1121,230" alt="See the resources we use for language learning" href="http://www.welearnlanguages.com/resources" /> </map> <?php endif; // end check for featured image or standard header ?>I imagine I’ve done something wrong! Could you help me with this last bit?
Thanks.
Do you mean to say you have two header images on different pages?
No – 2 headers on the same page. The landing page. EDIT: All pages.
What is the problem, the duplicate image?
Yes. I have the image I uploaded as the header without the image mapping, and underneath the same image with the applied mapping I asked where to put in my original query. So my problem is, how can I remove that first image (the one without the mappings)?
How did you add the first image?
Through the dashboard.
Can you remove the first image through the dashboard?
Yes, but that then removes both images and I’m left with no header image at all! Is it worth posting a link to pastebin of my whole header.php?
in the header.php file,
remove<img src="http://www.welearnlanguages.com/wp-content/uploads/2012/08/wellheader1.png" alt="" width="1200" height="264" usemap="#map" border="0" />Then reset the header image in Dashboard?
Yes, if reset interprets to re-upload the image you want.
I have done. Now I’ve lost the mapping functionality again. ;(
You had a
usemap=in your<img>tag that has now been removed.
Add it into<img src="<?php header_image(); ?>" width="<?php echo $header_image_width; ?>" height="<?php echo $header_image_height; ?>" alt="" />
The topic ‘Use image map in header image’ is closed to new replies.