Making an image map responsive

9:42 AM 9/4/2016 & 1:41 AM 11/7/2018

One of my favorite collection! This classic <map> technology for the <img> HTML element was once very popular, a few years back. But as there are new alternatives (e.g. SVG and HTML5 canvas), only a very few websites still use it today. A pity, as browsers from different ages support it :(

Originally the script listened to a javascript's resize-event for its responsiveness. This has become a very robust technique, through years of development.

This page however attempts to use another, a simpler and modern technique described at Media queries based javascript. And instead of listening resize event, it will now listen to CSS generated transitionend event, to adjust image map coordinates.

The difference is, changes for the latter technique can only be made in steps, a discrete (non-continuous) changes. Set your browser to responsive design mode and see following test.

Ssme_schematic_(updated).svg.png chamber-coolant-valve fuel-preburner-injector fuel-preburner-ox-valve fuel-preburner high-pressure-fuel-turbopump high-pressure-oxidizer-turbopump hot-gas-manifold low-pressure-fuel-turbopump low-pressure-oxidizer-turbopump main-combustion-chamber main-fuel-valve main-injector main-oxidizer-valve nozzle oxidizer-heat-exchanger oxidizer-preburner-injector oxidizer-preburner-ox-valve oxidizer-preburner By Jkwchui with minor adjustments from Chouser - SSME schematic and RS-25 schematic, Public Domain.

Comments