How to make a mapped image responsive?

  • 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="https://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="https://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="https://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="https://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="https://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="https://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.

Viewing 3 replies - 1 through 3 (of 3 total)

  • 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

    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:

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

    Thread Starter rob-fritz

    (@rob-fritz)

    Thanks folks! Using sprites in a different application but didn’t think to use them in this application. ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to make a mapped image responsive?’ is closed to new replies.