Title: Header image: Achieving a map effect
Last modified: August 22, 2016

---

# Header image: Achieving a map effect

 *  Resolved [Res2](https://wordpress.org/support/users/res2/)
 * (@res2)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/header-image-achieving-a-map-effect/)
 * Greetings nobita
 * I’ve made a raindrops child theme for my homepage, and I’m trying to edit my 
   raindrops-child header copy according to the header image effect I want.
 * Specifically, I’d like for the header image to NOT be clickable as a whole, but
   only in part, at a specific mapped postion.
 * the css code template I have for this is
 * <map name=”a”>
    <area shape=”circle” coords=”133,70,60″ href=’[http://…’&gt](http://…’&gt);
   </map> <img usemap=”#a” src=”image.jpg” > [](http://...)
 * Thing is, this css code inserted in the header, as it is, creates a whole new
   header image (an extra one), whereas I’d like for the affected image to simply
   be raindrops_header_image (I inserted a new one through customize), but I don’t
   know how to call it, or make it perform a similar action to the css code.
 * Can you help me with the appropriate code for making a specific part of the header
   image clickable?

Viewing 5 replies - 1 through 5 (of 5 total)

 *  Theme Author [nobita](https://wordpress.org/support/users/nobita/)
 * (@nobita)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/header-image-achieving-a-map-effect/#post-5332922)
 * 1. Not link header image
 * header.php ( if you selected xhtml at theme customizer, header-xhtml.php )
 * remove below
 *     ```
       if ( true == $raindrops_link_unique_text ) {
   
             echo raindrops_header_image( 'elements' );
        } else {
   
             echo raindrops_header_image( 'home_url' );
        }
       ```
   
 * change below
 *     ```
       echo raindrops_header_image( 'elements' );
       ```
   
 * 2. Change header image from background image to map image
 * functions.php
 * add page first (`<?php` before )
 *     ```
       <?php
       add_filter( 'raindrops_header_image_home_url', 'my_map_image' );
   
       function my_map_image( $header_image ) {
   
       	if ( is_front_page() || is_home() ) { //if only home page
       		$map_image = '<map name="a">' .
       		'<area shape="circle" coords="133,70,60" href="http://www.example.com">' .
       		'</map><img usemap="#a" src="http://www.example.com/image.jpg" >';
   
       		return $map_image;
       	}
       	return $header_image;
       }
       ?>
       ```
   
 * note: map responsive
 * [http://www.cssplay.co.uk/menu/cssplay-responsive-image-map.html](http://www.cssplay.co.uk/menu/cssplay-responsive-image-map.html)
 * map image style
    must needs when responsive
 *     ```
       max-width:100%;
       max-height:100%;
       ```
   
 * Thank you.
 *  Thread Starter [Res2](https://wordpress.org/support/users/res2/)
 * (@res2)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/header-image-achieving-a-map-effect/#post-5332944)
 * Dear nobita
 * thank you for the quick response.
 * I’ve deactivated the ‘home_url’ order in the header effectively, and then tried
   inserting the
 *     ```
       <?php
       add_filter( 'raindrops_header_image_home_url', 'my_map_image' );
   
       function my_map_image( $header_image ) {
   
       	if ( is_front_page() || is_home() ) { //if only home page
       		$map_image = '<map name="a">' .
       		'<area shape="circle" coords="133,70,60" href="http://www.example.com">' .
       		'</map><img usemap="#a" src="http://www.example.com/image.jpg" >';
   
       		return $map_image;
       	}
       	return $header_image;
       }
       ?>
       ```
   
 * into an otherwise empty functions.php in my raindrops-child, but for some reason
   it does not change raindrops header image back into a (now: area-specific) clickable
   one… What am I missing?
 *  Theme Author [nobita](https://wordpress.org/support/users/nobita/)
 * (@nobita)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/header-image-achieving-a-map-effect/#post-5332957)
 * Sorry　Could you back to the original
 * header.php
 *     ```
       echo raindrops_header_image( 'elements' );
       ```
   
 * back to
 *     ```
       if ( true == $raindrops_link_unique_text ) {
   
             echo raindrops_header_image( 'elements' );
        } else {
   
             echo raindrops_header_image( 'home_url' );
        }
       ```
   
 * Thank you
 * I’ve found the cause
 * It was a problem that occurred because it was a mistake, the name of the hook.
   
   Since normally even undoing the header.php, please do not worry
 *  Thread Starter [Res2](https://wordpress.org/support/users/res2/)
 * (@res2)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/header-image-achieving-a-map-effect/#post-5332976)
 * Ah, ok!
 * I’ve changed the header back to the original, and your added code to the (otherwise
   empty) functions.php in my child-theme is now functional! 🙂
 * Much obliged! Thank you!
 *  Thread Starter [Res2](https://wordpress.org/support/users/res2/)
 * (@res2)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/header-image-achieving-a-map-effect/#post-5332999)
 * I have one problem which occurred after the code applied here, though:
 * The header image (which is 1200×139) does not fill out the top
    (#top) which 
   has become 1280×143…
 * Can you help me on how to get the header image to fill out the top, so that it
   matches the doc3 part of the theme?
 * (also, the max-height: 100% and max-width: 100% seem to serve no function, for
   now, but that is less important than correcting the size of the banner image 
   to fit the rest of the page.)

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Header image: Achieving a map effect’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/raindrops/1.700/screenshot.png)
 * raindrops
 * [Support Threads](https://wordpress.org/support/theme/raindrops/)
 * [Active Topics](https://wordpress.org/support/theme/raindrops/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/raindrops/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/raindrops/reviews/)

 * 5 replies
 * 2 participants
 * Last reply from: [Res2](https://wordpress.org/support/users/res2/)
 * Last activity: [11 years, 6 months ago](https://wordpress.org/support/topic/header-image-achieving-a-map-effect/#post-5332999)
 * Status: resolved