Header image: Achieving a map effect

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="https://www.example.com">' .
		'</map><img usemap="#a" src="https://www.example.com/image.jpg" >';

		return $map_image;
	}
	return $header_image;
}
?>

note: map responsive

https://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.

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="https://www.example.com">' .
		'</map><img usemap="#a" src="https://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?

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

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!

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