4 {{ upvoteCount | shortNum }}
4 {{ upvoteCount | shortNum }}

Specific WP knowledge needed

by Kevin Birch
3 replies
Hi

I'm wanting to create an image map for a WP header so that 'hot spots' links can be clicked.

I've got the image map don in html, but how can I get wordpress to see and act on it?

Thanks
#knowledge #needed #specific
  • Profile picture of the author txconx
    Originally Posted by Kevin Birch View Post

    Hi

    I'm wanting to create an image map for a WP header so that 'hot spots' links can be clicked.

    I've got the image map don in html, but how can I get wordpress to see and act on it?

    Thanks
    I think you're going to have to edit the theme file for the header and just hard code it in.
    {{ DiscussionBoard.errors[2720054].message }}
  • Profile picture of the author Valdor Kiebach
    Find the file /wp-content/themes/default/header.php and open it in a text editor.
    Near the end of that file you'll find the h1 element where the heading is printed. The block looks like this:
    Code:
    <div id="header" role="banner">
<div id="headerimg">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>
</div>
</div>
    The quick hack is to change it like this:
    Code:
    <div id="header" role="banner" style="background-image: none !important;">
 <div id="headerimg">
<h1 style="margin: 0px; padding: 0px;">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/mynewimage.png" alt="<?php bloginfo('name'); ?>" id="_Image-Maps_3200907261653144"  usemap="#Image-Maps_3200907261653144" />
 </h1>
<map id="_Image-Maps_3200907261653144" name="Image-Maps_3200907261653144">             <area shape="rect" coords="32,20,234,188" href="http://www.parpface.com/" alt="go to parpface" title="go to parpface"    />
</map>
</div>
</div>
    There are four changes:
    • I added some CSS in that first line to stop the background image from showing.
    • I added an img tag inside the h1 tag to show my image
    • I added some CSS to the h1 tag to stop it having a big empty border
    • I added the image map - i.e. the map tag and all that
    That's pretty hacky but it seems to work.
    original article:
    MCLD blog: How to put an imagemap in the header of your wordpress template
    {{ DiscussionBoard.errors[2720065].message }}

Trending Topics