Header with clickable areas

  • Hello-

    I’m hoping someone can help me…I’ve been mucking around for almost two hours with no success.

    I’m trying to create a header where only PART of the image is clickable (over my site name). After reading about image mapping I went to https://www.isdntek.com/tagbot/imap.htm and created an image map of my header. It gave me this code:

    <img src="https://www.megandowntherabbithole.com/wp-content/uploads/2011/09/cropped-megandowntherabbitholeSept11.jpg" width="940" border="0" usemap="#imap_56" >
<map id="imap_56" name="imap_56" >
  <area shape="rect" coords="2,7,553,71" alt="https://www.megandowntherabbithole.com/" title="https://www.megandowntherabbithole.com/" href="https://www.megandowntherabbithole.com/">
</map>

    So…my question is, WHERE does this code go? I read in another post that you’re supposed to put it in the header.php file, but when I did that I ended up with a DOUBLE header (the first one still wasn’t linked but the second one was). It took forever to get rid of the extra header, so I really don’t want to try again without knowing what I’m doing wrong.

    My site is https://www.megandowntherabbithole.com

    Any insight is much appreciated. Thanks in advance!

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

  • try this https://www.mcld.co.uk/blog/blog.php?259

    Thread Starter megandowntherabbithole

    (@megandowntherabbithole)

    Thanks. So their code is a little different than mine. The closest thing I can find to that in my header php is this:

    <div id="header">
		<div id="masthead">
			<div id="branding" role="banner">
				<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
				<<?php echo $heading_tag; ?> id="site-title">
					<span>
						<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
					</span>
				</<?php echo $heading_tag; ?>>
				<div id="site-description"><?php bloginfo( 'description' ); ?></div>

				<?php

    I’m still a little confused with what gets replaced.

    Soooo…. the first thing we need to talk about is the fact that your are editing the twentyten theme directly which is not the best idea, you may lose all yur hard work if the theme gets updated

    https://vudu.me/child about that…

    Anyway, the bit of code you posted has nothing to do with images, that is the title and description part…

    Are you looking to totally replace the default header image with yours? on every page? Totally want to remove the featured image as header functionality on posts and pages?

    If so, this is the code to replace

    <?php
					// Check if this is a post or page, if it has a thumbnail, and if it's a big one
					if ( is_singular() && current_theme_supports( 'post-thumbnails' ) &&
							has_post_thumbnail( $post->ID ) &&
							( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
							$image[1] >= HEADER_IMAGE_WIDTH ) :
						// Houston, we have a new header image!
						echo get_the_post_thumbnail( $post->ID );
					elseif ( get_header_image() ) : ?>
						<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
					<?php endif; ?>

    by putting twentyten’s header.php in your child theme, and editing it there

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Header with clickable areas’ is closed to new replies.