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. To allow this calculation to work properly, the main image's width and height MUST be entered into the widget settings. This is taken care of in the code using CSS calc. 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. The width of the hot spots is set as a percentage of the main image's width. 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. When a hot spot is clicked or tapped, the related image opens in a lightbox window. 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. The main caption is optional and can be positioned to overlay the top or bottom of the image. Select and copy the HTML iframe embed code. Select the size of the map from the drop down. The font size is reduced when the page is displayed on smaller devices. Enter the business address in the search bar, then click the search button. The spots have a control for setting the background color and its opacity and can have a border and/or a box shadow. The hover has an option to add a scale animation. 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 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. The Responsive Image Map widget adds hot spots using the EverWeb widget API Assets List. 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.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |