Support » How-To and Troubleshooting » Header Image Hotspots

Header Image Hotspots

  • I am trying to edit the code of index.php to display an image with hotspots. I have been able to display the image frame and have the hotspots activated but the image itself does not show up. I have tried using both header.php and index.php but both end in the same result. Here is the code I have thus far:

    <div id="header1">
    <p align="center"><map name="FPMap0">
    <area href="index.htm" shape="circle" coords="117, 160, 55">
    <area href="about.htm" shape="circle" coords="161, 72, 31">
    <area href="contact.htm" shape="circle" coords="227, 33, 24">
    <img border="0" src="images/banner.jpg" width="950" height="245" usemap="#FPMap0"></p>
    <?php get_header(); ?>
      <div id="container">
    	    <div id="leftnav">
    	  <?php get_sidebar(); ?>
        <div id="rightnav">
    	  <?php include (TEMPLATEPATH . '/sidebar2.php'); ?>
        <div id="content">
    	<?php if (have_posts()) : ?>
    		<?php while (have_posts()) : the_post(); ?>
    			<div class="post" id="post-<?php the_ID(); ?>">
    <div class="date"> <?php the_time('d') ?><br />
    				<?php the_time('M') ?> </div>
    				<h3 class="posttitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h3>
    				<div class="entry">
    					<?php the_content('Continue Reading &raquo;'); ?>
    				<div class="roundcont">
       <div class="roundtop">
    	 <img src="<?php bloginfo('template_url'); ?>/img/tr.png" alt=""
    	 width="5" height="5" class="corner"
    	 style="display: none" />
       </div><p class="postmetadata">Posted in <?php the_category(', ') ?> by: <?php the_author() ?><?php edit_post_link('Edit',' ',''); ?> <br /> <?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?></p> <div class="roundbottom">
    	 <img src="<?php bloginfo('template_url'); ?>/img/bl.png" alt=""
    	 width="5" height="5" class="corner"
    	 style="display: none" />
    		<?php endwhile; ?>
    		<div class="navigation">
    			<div class="alignleft"><?php next_posts_link('&laquo; Previous Entries') ?></div>
    			<div class="alignright"><?php previous_posts_link('Next Entries &raquo;') ?></div>
    	<?php else : ?>
    		<h2 class="center">Not Found</h2>
    		<p class="center">Sorry, but you are looking for something that isn't here.</p>
    		<?php include (TEMPLATEPATH . "/searchform.php"); ?>
    	<?php endif; ?>
    <?php get_footer(); ?>
Viewing 3 replies - 1 through 3 (of 3 total)
  • I suspect the url for the image isn’t correct. Try this:

    <img border=”0″ src=”<img src=”<?php bloginfo(‘template_directory’); ?>/images/banner.jpg” width=”950″ height=”245″ usemap=”#FPMap0″></p>

    Yes that worked, Thank you very much!

    tho one tweak was made from your code which was to take out the first


    so it reads:

    <img border="0" <img src="<?php bloginfo('template_directory'); ?>/images/banner.jpg" width="950" height="245" usemap="#FPMap0">


    I am trying to do the same thing – now a question did an html page replace the index.php?

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Header Image Hotspots’ is closed to new replies.
Skip to toolbar