Psuedo Image Map Using Links

Overview

It is possible to use a elements instead of an image map to create "hotspots" over a given image. The a elements must be set to display:block in order to show visual focus indication.

The advantage of standard image-map implementations, i.e., those that use the map and area elements is that they provide a positioning context for a given image. Developer can use a coordinate system to create "hotspots" with the image. A disavantage is evident when using the shape attribute. This removes visual focus indication in browsers that use the Trident and Blink rendering engines. See Image Map with various shapes for hotspots.

Implementation

• The map and area elements are NOT used
• The image itself and the a elements are siblings within a parent container
• The a elements are used to create "hotspots" over the image. This is achieved with relative positioning using pixel values. Percentages did not work the same across browsers.
• a elements were set to display:block to show visual focus indication.

Example

Focus Order Testing

OS	Browser	Engine	Results
Windows 7	IE 11	Trident	Focus order is logical in both Desktop and Windows Phone emulation
Windows 7	FireFox 56	Gecko	Focus order is logical in both Desktop and Responsive views
Windows 7	Chrome 63	Blink	Focus order is logical in both Desktop and Responsive views
iOS 11.2	Safari	Mobile Webkit with VoiceOver	Focus order is logical