I’m Dudley Storey, author of Pro CSS3 Animation, Smashing Magazine contributing editor, teacher and speaker. This is my site (formerly demosthenes.info), where I write about all aspects of web development, including: To receive more information, including news, updates, and tips, follow me on Twitter or add me on Google+. 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. A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names. An auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done. 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: 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. 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: Note that the <,image>, element in SVG 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: 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: 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: In an article for Creative Bloq /Net magazine I showed how to use SVG to make an even more impressive form of responsive imagemap. Source.