Title: Image map problems
Last modified: August 19, 2016

---

# Image map problems

 *  [tripellex](https://wordpress.org/support/users/tripellex/)
 * (@tripellex)
 * [16 years, 4 months ago](https://wordpress.org/support/topic/image-map-problems-1/)
 * 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="http://www.somelink.com" target="_blank" alt="" />
       </map>
       ```
   
 * If anyone has any ideas on how I can fix the problem, I’d really appreciate it.

The topic ‘Image map problems’ is closed to new replies.

## Tags

 * [imagemap](https://wordpress.org/support/topic-tag/imagemap/)
 * [rockettheme](https://wordpress.org/support/topic-tag/rockettheme/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 0 replies
 * 1 participant
 * Last reply from: [tripellex](https://wordpress.org/support/users/tripellex/)
 * Last activity: [16 years, 4 months ago](https://wordpress.org/support/topic/image-map-problems-1/)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics