Image map problems

Hey all,

Please excuse the extra long backstory before my actual problem. I figure its relevant to maybe solve my issue. Having said that, I’m having an issue with a site I’m building for a client. The site is for an online magazine in which they use large JPG images for each “page”, and many of the pages contain links that are supposed to be hyperlinked. With their old HTML-only site I used image maps. For their new site they want to integrate their WordPress blog and online magazine into one site. I chose to use RocketTheme’s Mixxmag 1.2 template and utilize its built-in RokFeature module to display each page of the magazine.

To display each page in RokFeature, a post must be made for each page, using the Custom Fields to display the page image. By itself RokFeature just displays the image, with Title and Read On spans overlayed (which I have removed to just display the image). To the left of the page image area, I have modified the mouse-over tabs to switch between each page of the magazine. I also created a new Custom Field for each post to inject the image map HTML into the page.

Now let me say I’m not a great coder, most of what I know of PHP is from reverse engineering the code and learning bits and pieces as I go. I wrote new code to display the image map over each page image, using a DIV and a 1×1 pixel PNG stretched to the page dimensions. As it is, the code does work…but the only problem is, the hotspot areas appear on all the page images rather than its intended page when switching pages. So my question is, what am I doing wrong, and how can I fix it? Below is the template index.php code. This is the code between the “module-table” and “main-content” DIVs. The code for the image map is called from “rokfeature-imgmap”:

<?php if (get_posts('cat='.get_option('mixx_feature_cat_id')) && get_option('mixx_feature_cat_id') != '-1') { ?>

<div id="featured-block">
<script type="text/javascript">
   var RokFeatureImages = [];
   window.addEvent('domready', function() {
   new RokFeature('featured-block', {
      'transition': Fx.Transitions.Quad.easeOut,
      'duration': 800,
      'opacity': 0.8,
      'autoplay': false,
      'delay': 7000
      });
    });
</script>

<div id="rows-3" class="rokfeature-mod">
 <div class="rokfeature-image">
  <div class="rokfeature-options">
   <?php $i = 1; ?>
    <?php query_posts('cat='.get_option('mixx_feature_cat_id').'&showposts=30&orderby=desc'); ?>
     <?php while (have_posts()) : the_post(); ?>
<div class="rokfeature-option-block">
 <div class="rokfeature-tab-<?php echo $i; ?>"></div>
  <div class="rokfeature-block-<?php echo $i; ?>">
   <?php $large = get_post_meta($post->ID, 'large', TRUE); ?>
    <?php if($large) { ?>
     <a href="<?php the_permalink(); ?>" title="<?php the_title();
     ?>"><img src="<?php bloginfo('template_directory');
     ?>/timthumb.php?src=<?php echo $large ?>&w=65&h=65&
     amp;zc=1&q=75" alt="<?php the_title(); ?>" class="rokfeature-
     thumb" height="66" width="72" /></a>
   <?php } ?>

  <?php remove_filter('the_excerpt', 'wpautop'); ?>
    <span class="showthumb"><?php the_excerpt(); ?></span>
      <?php add_filter('the_excerpt', 'wpautop'); ?>

<div class="rokfeature-block-bg<?php echo $i; ?>"></div>
   </div><!-- .rockfeature-block-3 --> 

  <?php $large = get_post_meta($post->ID, 'large', TRUE); ?>
    <?php if($large) { ?>
      <script type="text/javascript">
            RokFeatureImages.push('<?php echo $large; ?>');
      </script>
    <?php } ?>
  </div>

<!-- .rockfeature-option-block -->
  <div class="rokfeature-imgmap">
    <?php $imgmap = get_post_meta($post->ID, 'imgmap', TRUE); ?>
      <?php if($imgmap) { ?>
	<?php echo $imgmap; ?>
	  <?php } ?>
   </div>

<!-- .rokfeature-imgmap -->
    <?php $i++;?>
      <?php endwhile;?>
   </div>
<!-- .rokfeature-option-block -->
  </div>
 </div>
</div>
<!-- #row-3 -->
   <?php } ?>

And here is the CSS code in template.css:

/* RokFeature */

#rows-1.rokfeature-mod {height:95px;}
#rows-2.rokfeature-mod {height:190px;}

/* begin original */
/* #rows-3.rokfeature-mod {height:285px;} */
/* end original*/

/* mod for Lunchbox */
#rows-3.rokfeature-mod {height:425px;}
/* end mod */

#rows-4.rokfeature-mod {height:380px;}
#rows-5.rokfeature-mod {height:475px;}
#rows-6.rokfeature-mod {height:570px;}
.rokfeature-mod {width: 100%;position: relative; overflow:hidden;}
.rokfeature-overlay {width: 728px; height: 425px; position: absolute; bottom: 0; margin-left: 22px; overflow: hidden; z-index: 100;}
.rokfeature-image {width: 100%;height: 100%;background: #000 url(../images/spinner.gif) 76% 47% no-repeat;}
.rokfeature-options {height: 100%;position: relative;z-index: 5;}
.rokfeature-option-block {height: 18.5px;width: 22px;position: relative;overflow: hidden;}
/* .rokfeature-tab-1, .rokfeature-tab-2, .rokfeature-tab-3, .rokfeature-tab-4, .rokfeature-tab-5, .rokfeature-tab-6 {width: 22px;height: 100%;position: absolute;top: 0;left: 0;cursor: pointer;} */
.rokfeature-tab-1, .rokfeature-tab-2, .rokfeature-tab-3, .rokfeature-tab-4, .rokfeature-tab-5, .rokfeature-tab-6, .rokfeature-tab-7, .rokfeature-tab-8, .rokfeature-tab-9, .rokfeature-tab-10, .rokfeature-tab-11, .rokfeature-tab-12, .rokfeature-tab-13, .rokfeature-tab-14, .rokfeature-tab-15, .rokfeature-tab-16, .rokfeature-tab-17, .rokfeature-tab-18, .rokfeature-tab-19, .rokfeature-tab-20, .rokfeature-tab-21, .rokfeature-tab-22, .rokfeature-tab-23 {width: 22px;height: 18px;position: absolute;top: 0;left: 0;cursor: pointer;}
.rokfeature-block-1, .rokfeature-block-2, .rokfeature-block-3, .rokfeature-block-4, .rokfeature-block-5, .rokfeature-block-6, .rokfeature-block-7, .rokfeature-block-8, .rokfeature-block-9, .rokfeature-block-10, .rokfeature-block-11, .rokfeature-block-12, .rokfeature-block-13, .rokfeature-block-14, .rokfeature-block-15, .rokfeature-block-16, .rokfeature-block-17, .rokfeature-block-18, .rokfeature-block-19, .rokfeature-block-20, .rokfeature-block-21, .rokfeature-block-22, .rokfeature-block-23 {margin-left: 22px;height: 100%;overflow: hidden;position: relative;}
.rokfeature-block-bg1, .rokfeature-block-bg2, .rokfeature-block-bg3, .rokfeature-block-bg4, .rokfeature-block-bg5, .rokfeature-block-bg6, .rokfeature-block-bg7, .rokfeature-block-bg8, .rokfeature-block-bg9, .rokfeature-block-bg10, .rokfeature-block-bg11, .rokfeature-block-bg12, .rokfeature-block-bg13, .rokfeature-block-bg14, .rokfeature-block-bg15, .rokfeature-block-bg16, .rokfeature-block-bg17, .rokfeature-block-bg18, .rokfeature-block-bg19, .rokfeature-block-bg20, .rokfeature-block-bg21, .rokfeature-block-bg22, .rokfeature-block-bg23 {height: 100%;width: 100%; position: absolute; left: 0; top: 0; z-index: 1;}
.rokfeature-option-block span {padding: 12px;display: block;z-index: 5;position: relative;}
.rokfeature-option-block span.showthumb {margin-right: 83px;}
img.rokfeature-thumb {float: right;margin: 12px;width: 65px;height: 65px; z-index: 5;position: relative;}
.rokfeature-readon {position: absolute;right: 15px;bottom: 15px;}
.rokfeature-readon a {padding: 3px 5px;text-transform: uppercase;color:#fff;background:#000;}
.rokfeature-title {position: absolute;right:15px;top: 10px;width:270px;text-align:right;}
.rokfeature-title a:hover {text-decoration:none;}
.rokfeature-title span {text-align:right;font-size: 240%;color:#fff;background:#000; width:300px;line-height:135%;}

/* mod for ImgMap */
.rokfeature-imgmap {position: absolute;right: 0;bottom: 0;}
/* end mod */

Also, here is a sample of the imgmap code thats injected:

<img name="n18" src="../images/1x1.png" width="728" height="425" border="0" id="n18" usemap="#m_18" alt="" />
<map name="m_18" id="m_18">
<area shape="rect" coords="225,194,572,395" href="https://www.somelink.com" target="_blank" alt="" />
</map>

If anyone has any ideas on how I can fix the problem, I’d really appreciate it.