Image Map Not Working in Twenty Fourteen

  • Resolved dleewms1

    (@dleewms1)


    10 years, 9 months ago

    Hi,

    I’ve created an image map for my header image and replaced this line of my child theme <?php bloginfo( ‘name’ ); ?>
    with the code from the image map file. However, when I click on the areas, I am not redirected to the new page as defined in the code. The code is below. Any help would be greatly appreciated.

    Thanks!

    /* =Theme customization starts here
-------------------------------------------------------------- */

<?php

// Stick your php code in here

/**
 * The Header for our theme
 *
 * Displays all of the <head> section and everything up till <div id="main">

*
 * @package WordPress
 * @subpackage Twenty_Fourteen

* @since Twenty Fourteen 1.0
 */
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->

<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->

<!--[if !(IE 7) | !(IE 8) ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->

<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width">
	<title><?php wp_title( '|', true, 'right' ); ?></title>
	<link rel="profile" href="https://gmpg.org/xfn/11">
	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
	<!--[if lt IE 9]>
	<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
	<![endif]-->
	<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<?php if ( get_header_image() ) : ?>
<div id="site-header">
	<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
	<img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="">
	</a>
	</div>
	<?php endif; ?>

	<header id="masthead" class="site-header" role="banner">
	<div class="header-main">
	<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
<img id="Header_map" src="https://www.remnantllc.com/wp-content/uploads/2014/06/Logo.png" border="0" width="1260" height="240" orgWidth="1260" orgHeight="240" usemap="Remnant_map" alt="" />

<map name="Remnant_map" id="Header_Map">

<area  alt="Home" title="Home" href="https://www.remnantllc.com" shape="rect" coords="13,169,171,218" style="outline:none;" target="_self"     />

<area  alt="Performances" title="Performances" href="https://www.remnantllc.com/performances/" shape="rect" coords="184,171,556,225" style="outline:none;" target="_self"     />

<area  alt="About" title="About" href="https://www.remnantllc.com/about" shape="rect" coords="569,172,764,226" style="outline:none;" target="_self"     />

<area  alt="Support" title="Support" href="https://www.remnantllc.com/support/" shape="rect" coords="779,169,1008,223" style="outline:none;" target="_self"     /> 

<area  alt="Contact" title="Contact" href="https://www.remnantllc.com/contact/" shape="rect" coords="1034,173,1256,220" style="outline:none;" target="_self"     /><a href="https://remnantllc.com">

</map>

</a></h1>

	<div class="search-toggle">

		<a href="#search-container" class="screen-reader-text"><?php _e( 'Search', 'twentyfourteen' ); ?></a>

	</div>

<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
		<button class="menu-toggle"><?php _e( 'Primary Menu', 'twentyfourteen' ); ?></button>
		<a class="screen-reader-text skip-link" href="#content"><?php _e( 'Skip to content', 'twentyfourteen' ); ?></a>
		<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
		</nav>

		</div>

		<div id="search-container" class="search-box-wrapper hide">
			<div class="search-box">
				<?php get_search_form(); ?>
			</div>
		</div>
	</header><!-- #masthead -->

	<div id="main" class="site-main">

?>
Viewing 1 replies (of 1 total)
  • Thread Starter dleewms1

    (@dleewms1)

    I figured this one out on my own. Here is the code in case it helps anyone else. Added it to the header.php file.

    <div id="page" class="hfeed site">
<?php if ( get_header_image() ) : ?>
<div id="site-header">

<img id="Logo-Map-id" src="https://www.remnantllc.com/wp-content/uploads/2014/06/Logo.png" border="0" width="1260" height="240" orgWidth="1260" orgHeight="240" usemap="#Logo-map" alt="">
</img>
<map name="Logo-map" id="Logo-Map">

<area  alt="Home" title="Home" href="https://www.remnantllc.com" shape="rect" coords="13,169,171,218" style="outline:none;" target="_self" />
<area  alt="Performances" title="Performances" href="https://www.remnantllc.com/performances/" shape="rect" coords="184,171,556,225" style="outline:none;" target="_self" />
<area  alt="Abojut" title="About" href="https://www.remnantllc.com/about/" shape="rect" coords="569,172,764,226" style="outline:none;" target="_self" />
<area  alt="Support" title="Support" href="https://www.remnantllc.com/support/" shape="rect" coords="779,169,1008,223" style="outline:none;" target="_self" />
<area  alt="Contact" title="Contact" href="https://www.remnantllc.com/contact/" shape="rect" coords="1034,173,1256,220" style="outline:none;" target="_self" />
</map>

	</div>
Viewing 1 replies (of 1 total)
  • The topic ‘Image Map Not Working in Twenty Fourteen’ is closed to new replies.

Tags