WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Use image map in header image (17 posts)

  1. hiphopinenglish
    Member
    Posted 1 year ago #

    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.

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    In header.php, underneath

    <img src="<?php header_image(); ?>" width="<?php echo $header_image_width; ?>" height="<?php echo $header_image_height; ?>" alt="" />
  3. hiphopinenglish
    Member
    Posted 1 year ago #

    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.

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    Do you mean to say you have two header images on different pages?

  5. hiphopinenglish
    Member
    Posted 1 year ago #

    No - 2 headers on the same page. The landing page. EDIT: All pages.

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    What is the problem, the duplicate image?

  7. hiphopinenglish
    Member
    Posted 1 year ago #

    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)?

  8. Andrew
    Forum Moderator
    Posted 1 year ago #

    How did you add the first image?

  9. hiphopinenglish
    Member
    Posted 1 year ago #

    Through the dashboard.

  10. Andrew
    Forum Moderator
    Posted 1 year ago #

    Can you remove the first image through the dashboard?

  11. hiphopinenglish
    Member
    Posted 1 year ago #

    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?

  12. Andrew
    Forum Moderator
    Posted 1 year ago #

    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" />
  13. hiphopinenglish
    Member
    Posted 1 year ago #

    Then reset the header image in Dashboard?

  14. Andrew
    Forum Moderator
    Posted 1 year ago #

    Yes, if reset interprets to re-upload the image you want.

  15. hiphopinenglish
    Member
    Posted 1 year ago #

    I have done. Now I've lost the mapping functionality again. ;(

  16. Andrew
    Forum Moderator
    Posted 1 year ago #

    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="" />
  17. hiphopinenglish
    Member
    Posted 1 year ago #

    Oops. My oversight. Thank you very much for your help and patience. Marking as resolved.

Topic Closed

This topic has been closed to new replies.

About this Topic