Need help adding in code for image map to my headers

  • debycoles

    (@debycoles)


    13 years ago

    Hi All
    I am using Mantra theme, which has no facility to add a top widget and just allows a graphic as the header image. I have a cute new image which incorporates a menu and social media icons and have code in CSS or HTML to add this to WordPress.

    I want to remove my current header image and replace it with the new graphic, and add the image map code to make sections of the graphic clickable.

    Trouble is, the trial and error method of adding this to my header.php isn’t working and I simply don’t know what I am supposed to do.

    Here is the header.php code:

    <?php
/**
 * The Header
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package Cryout Creations
 * @subpackage mantra
 * @since mantra 0.5
 */
 ?><!DOCTYPE html >
<html <?php language_attributes(); ?>>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo( 'charset' ); ?>" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<?php  	cryout_seo_hook(); ?>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php
 	cryout_header_hook();
	wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php cryout_body_hook(); ?>
<div id="wrapper" class="hfeed">
<?php cryout_wrapper_hook(); ?>
<header id="header">
		<div id="masthead"> 

			<div id="branding" role="banner" > 

				<?php cryout_branding_hook();?>
				<div style="clear:both;"></div>

			</div><!-- #branding --> 

			<nav id="access" role="navigation">

				<?php cryout_access_hook();?>

			</nav><!-- #access -->

		</div><!-- #masthead -->

	<div style="clear:both;"> </div>

</header><!-- #header -->
<div id="main">
	<div  id="forbottom" >
		<?php cryout_forbottom_hook(); ?>
		<div style="clear:both;"> </div> 

		<?php cryout_breadcrumbs_hook();?>

    And this is the HTML for the Image Map.

    <div style="text-align:center; width:1000px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_7201304150956189" src="http://so-sew-easy.com/wp-content/uploads/2013/04/new-website-banner-draft.jpg" usemap="#Image-Maps_7201304150956189" border="0" width="1000" height="200" alt="" />
<map id="_Image-Maps_7201304150956189" name="Image-Maps_7201304150956189">
<area shape="rect" coords="638,5,688,55" href="https://plus.google.com/117695635189754905375/about" alt="google plus" title="google plus"    />
<area shape="rect" coords="879,9,929,59" href="https://twitter.com/DebyAtSoSewEasy" alt="Twitter" title="Twitter"    />
<area shape="rect" coords="940,9,990,59" href="http://www.youtube.com/user/DebyAtSoSewEasy" alt="YouTube" title="YouTube"    />
<area shape="rect" coords="698,7,748,57" href="http://www.facebook.com/PrintorPlain" alt="Facebook" title="Facebook"    />
<area shape="rect" coords="758,8,808,58" href="mailto:deby@so-sew-easy.com" alt="Emil me" title="Emil me"    />
<area shape="rect" coords="817,9,867,59" href="http://pinterest.com/debycoles/" alt="Pinterest" title="Pinterest"    />

    Can anyone help me interpret how I insert this image map code into my header.php.
    I had posted this on the Mantra support forum but didn’t get an answer.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter debycoles

    (@debycoles)

    13 years ago

    I got all over excited and clicked post before I was ready. I should have remembered to say thank you to everyone who takes a look – how rude of me!

    stephaniek

    (@stephaniek)

    13 years ago

    I think you would need to replace <?php cryout_branding_hook();?> with your html and image map code.

    If that doesn’t work, try replacing the entire #branding div with your html and image map code.

    I hope that works for you!

    WPyogi

    (@wpyogi)

    13 years ago

    Make very sure that you are using a Child Theme for any modifications to theme files – otherwise your changes will be overwritten when the theme is updated.

    http://codex.wordpress.org/Child_Themes

    Thread Starter debycoles

    (@debycoles)

    13 years ago

    That worked beautifully. Now I just need to fiddle a little with the size and resolution and it will be perfect – thank you SO MUCH! Made my day!

    Ah – child themes. I see them mentioned from time to time but I have no idea really how this works and how to set one up. Can anyone recommend a good tutorial suitable for a newbie?
    It would be very annoying to lose all the little tweaks when I upgrade.
    Thanks once again Stephaniek.

    WPyogi

    (@wpyogi)

    13 years ago

    Yes, you REALLY don’t want to lose all the work you’ve done. The link above tells you how to make a child theme, but you can find various tutorials or YouTube videos as well (Google can help you there 🙂 )!

    Do know that you will have to move all your changes so far to the child theme – but it’s still worth the extra work now to avoid far bigger problems later. You will also need to redo various settings/options as those may not carry over to a child theme.

    stephaniek

    (@stephaniek)

    13 years ago

    You are very welcome! Glad I could help.

    Thank you WPyogi for pointing out the Child Theme stuff. 🙂

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

The topic ‘Need help adding in code for image map to my headers’ is closed to new replies.