Responsive Image Map
Responsive Image Map

Angle View

Top View

Effects

Video

EverWeb Widgets - Responsive Image Map

Hot Spots

Creating hot spots on an image is easy enough when creating a fixed width page layout but with a responsive item, the spots need to be responsive in size and be psotioned with percent values rather than pixels.
The Responsive Image Map widget adds hot spots using the EverWeb widget API Assets List. The size of the spot is adjusted using a slider and its position is set relative to the left or right and top or bottom using percentage values.
Captions
The spots can have a caption and, in the example above, they are set to show on hover when viewed on computers and on page load when viewed on touch devices. The hover has an option to add a scale animation.
The spots have a control for setting the background color and its opacity and can have a border and/or a box shadow. The font size is reduced when the page is displayed on smaller devices.
The main caption is optional and can be positioned to overlay the top or bottom of the image.
If viewing this page on a computer, reduce the browser width to see how the image and its hot spots adjust to the change in layout size.
Images
When a hot spot is clicked or tapped, the related image opens in a lightbox window. The image is responsive and its maximum width is 960px so the images should be cropped to no more than that width before importing into EverWeb.
Hot Spot Size
The width of the hot spots is set as a percentage of the main image's width. The height is calculated from the main image height divided by its width and multiplied by 100 to keep the spot round rather than oval on images that are not square. This is taken care of in the code using CSS calc.
To allow this calculation to work properly, the main image's width and height MUST be entered into the widget settings. Before importing it into EverWeb, crop the image to size and then right (control) click it to "Get Info" and make a note of these sizes.

YouTube Video

The widget has an option to add a hot spot which will open a YouTube video in a modal window. The hot spot is created and positioned like the others and then it just requires checking a box an entering the YouTube ID to make it all happen.
Testing
Like all responsive pages, it is essential to test the design in the iOS Simulator to see how it performs on a tablet and a mobile phone.

© EverWeb Widgets -