demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Resize the browser window and click on the central tower to see the responsive imagemap in action

Create A Responsive Imagemap With SVG

svg / imagemaps

Estimated reading time: 2 minutes

While traditional imagemaps remain a very effective UI pattern for certain sites – especially those that need a visitor to enter a geographical location, or used in navigation that has a particularly strong visual theme – they bring with them two significant disadvantages that make them ill-suited for modern web development:

  • Imagemap hotspots can take a long time to plot out, and are difficult to modify once created.
  • Traditional imagemaps cannot be made ; while the image can be rescaled, the imagemap coordinates will not, meaning that hotspots will drift out of registration with the underlying image as the picture is resized.

I’ve shown how to recreate simple imagemaps with SVG shapes, but that version did not incorporate bitmaps. As we’ll see, it’s entirely possible to integrate the two formats together.

Vectors & Bitmaps, Together At Last

SVG is generally understood as its acronym: Scalable Vector Graphics. It’s not generally appreciated that an SVG file can also incorporate bitmap images. Placing a JPEG in a new Adobe Illustrator document, cropping the artboard to the size of the image, and exporting the result as an SVG file will produce the following code, after a little cleanup:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 808" >
<image width="1200" height="808" xlink:href="burj-khalifa.jpg">
</image>
</svg>

Note that the <image> element in is very similar to the standard HTML tag, and that the cleaned-up result is already responsive. Once we have that, we can return to Illustrator to overlay a feature of interest in the bitmap image with a vector shape, shown here partially opaque for the purpose of illustration:

A bitmap in SVG overlaid with a vector shape

The code with a rectangular shape added:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 808" >
<image width="1200" height="808" xlink:href="burj-khalifa.jpg">
</image>
<rect x="535" y="28" fill="#fff" opacity="0.5" width="150" height="750" />
</svg>

You can probably see where this is going. It’s easy to link vector shapes to URLs, using SVG’s variation of the <a> tag. To make a linked vector shape invisible, you can either fill it with a transparent color (using rgba) or set its opacity to 0:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 808" >
<image width="1200" height="808" xlink:href="burj-khalifa.jpg">
</image>
<a xlink:href="//burjkhalifa.ae/en">
<rect x="535" y="28" fill="#fff" opacity="0" width="150" height="750" />
</a>
</svg>

It’s important to keep your hotspots fairly large relative to the image, so that they remain at least 50px × 50px in size when the imagemap is reduced to mobile screen sizes. That way, the interface can still be interacted with via touch.

To get the responsive imagemap on your page, simply add the SVG result into your HTML. To remove the generated space above and below the imagemap, use the responsive SVG technique I’ve demonstrated previously:

<figure id=burj>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 808" preserveAspectRatio="xMinYMin meet" >
<image width="1200" height="808" xlink:href="burj-khalifa.jpg">
</image>
<a xlink:href="//burjkhalifa.ae/en/">
<rect x="535" y="28" fill="#fff" opacity="0" width="150" height="750" />
</a>
</svg>
</figure>

The :

#burj { position: relative;
width: 100%; padding-bottom: 77%;
vertical-align: middle; margin: 0; overflow: hidden; }
#burj svg { display: inline-block;
position: absolute; top: 0; left: 0; }

Photograph by Bjoem Lauen

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.