WordPress.org

Ready to get started?Download WordPress

Forums

How to make a mapped image responsive? (4 posts)

  1. rob-fritz
    Member
    Posted 11 months ago #

    I may be going about this wrong but here is my dilemma.

    Twenty Twelve theme. Featured image for the Front Page Template.

    I need the image which consists of multiple products to be mapped so that when a visitor clicks on a particular product image, they are taken to the corresponding product page.

    The featured image worked well in the responsive layout but when I copied and pasted the mapped image it is no longer responsive causing it to look strange on a mobile phone. The site is guenschel.com so you can see the image and what I am trying to achieve.

    Below is the default template and my child template modified.

    <?php while ( have_posts() ) : the_post(); ?>
    				<?php if ( has_post_thumbnail() ) : ?>
    					<div class="entry-page-image">
    						<?php the_post_thumbnail(); ?>
    					</div><!-- .entry-page-image -->
    				<?php endif; ?>
    
    				<?php get_template_part( 'content', 'page' ); ?>
    
    			<?php endwhile; // end of the loop. ?>

    and now the child...

    <?php while ( have_posts() ) : the_post(); ?>
    				<?php if ( has_post_thumbnail() ) : ?>
    					<div class="entry-page-image">
    						<img src="http://guenschel.com/hgi/images/PI.jpg" usemap="#jd79081" width="400" height="800" alt="click map"   border="0" />
    <map id="jd79081" name="jd79081">
    <!-- Region 1 Viewall -->
    <area shape="rect" alt="Viewall Product Line" title="Viewall Product Line" coords="52,114,348,234" href="http://guenschel.com/hgi/viewall/" target="_self" />
    <!-- Region 2 Vista -->
    <area shape="rect" alt="Vista Product Line" title="Vista Product Line" coords="49,248,348,362" href="http://guenschel.com/hgi/vista/" target="_self" />
    <!-- Region 3 Accession -->
    <area shape="rect" alt="Accession Product Line" title="Accession Product Line" coords="49,380,348,486" href="http://guenschel.com/hgi/accession/" target="_self" />
    <!-- Region 4 Viewall Front -->
    <area shape="rect" alt="Viewall Glass Panel System" title="Viewall Glass Panel System" coords="49,550,349,659" href="http://guenschel.com/hgi/glass-panel-systems/" target="_self" />
    <!-- Region 5 Vista Front -->
    <area shape="rect" alt="Vista Glass Panel System" title="Vista Glass Panel System" coords="52,680,346,787" href="http://guenschel.com/hgi/glass-panel-systems/" target="_self" />
    <area shape="default" nohref alt="" />
    </map>
    					</div><!-- .entry-page-image -->
    				<?php endif; ?>
    
    				<?php get_template_part( 'content', 'page' ); ?>
    
    			<?php endwhile; // end of the loop. ?>

    What do I need to do to make this image responsive? Am I going about this wrong? Thanks.

  2. esmi
    Theme Diva & Forum Moderator
    Posted 11 months ago #

    For starters, the width & height of your image are being specified in the markup. You might be better off removing the width and height attributes and using CSS to define the dimensions of the image. That way you can apply a percentage with & height or similar.

    I'm not sure how (or even if) you can handle the map responsively itself because, almost by definition, image maps require browser coordinates - which ties them down to a minimum viewport size. There might be something in HTML5 that you can use (like canvas) but that's not going to be supported by all browsers.

    You might be better off dropping the map approach completely and seeing if you can approach this from another angle entirely

  3. Pioneer Valley Web Design
    Member
    Posted 11 months ago #

    Mapping is a technique that is outdated.

    Try CSS Sprites.

    In order to make this responsive on smaller screens, you will need to include an image for the device widths and CSS that is responsive:

    http://html5hacks.com/blog/2012/11/28/elegantly-resize-your-page-with-the-at-viewport-css-declaration/

  4. rob-fritz
    Member
    Posted 11 months ago #

    Thanks folks! Using sprites in a different application but didn't think to use them in this application. :)

Reply

You must log in to post.

About this Topic