Links or Lightbox Images

The map can have up to twelve markers which can display the ID number on page load or hover. The markers can open either internal or external pages on click or open an image in a lightbox window. The example on this page is set to open images.
Main Image
The main image is inserted using an HTML5 <picture> element rather than in the background. This allows the main image to have an alt text attribute for keywords for the search engines and to for two different sizes to be inserted - one for computers and a smaller one for mobile devices.
The images used in this demo were cropped to 1200px and 800px wide respectively before importing into EverWeb. The main image can have a border if required.
Markers
Markers are inserted using the EverWeb Widget API Assets List. Each marker is given an ID number. The IDs can appear on page load or on hover on computers if required.
There are checkboxes to add the function to show a title on hover and to change the click function to open a lightbox image rather than a URL.
The markers have options for styling the font size and color, the size, the background color and its opacity and for border width. Each marker can have a different border color if required and there is an option to add a hover scale animation.
Marker Position
Markers are positioned by entering their distamce along the X and Y axis as a percentage value. Unfortunately, these need to be inserted using plain numbers since the EverWeb Widget API doesn't allow for a slider control in the Widget Assets List at the time of writing.