{"id":344,"date":"2017-02-19T04:36:22","date_gmt":"2017-02-19T04:36:22","guid":{"rendered":"http:\/\/localhost\/enfold\/documentation\/?p=344"},"modified":"2019-05-15T17:30:01","modified_gmt":"2019-05-15T17:30:01","slug":"image-with-hotspots","status":"publish","type":"post","link":"https:\/\/kriesi.at\/documentation\/enfold\/image-with-hotspots\/","title":{"rendered":"Image With Hotspots"},"content":{"rendered":"\n<p><\/p>\n\n\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-dhins-93f6acfd3ea4642ed1b8f612bea5b616\">\n#top .av-special-heading.av-dhins-93f6acfd3ea4642ed1b8f612bea5b616{\npadding-bottom:10px;\n}\nbody .av-special-heading.av-dhins-93f6acfd3ea4642ed1b8f612bea5b616 .av-special-heading-tag .heading-char{\nfont-size:25px;\n}\n.av-special-heading.av-dhins-93f6acfd3ea4642ed1b8f612bea5b616 .av-subheading{\nfont-size:15px;\n}\n<\/style>\n<div  class='av-special-heading av-dhins-93f6acfd3ea4642ed1b8f612bea5b616 av-special-heading-h2 blockquote modern-quote  avia-builder-el-0  el_before_av_hr  avia-builder-el-first '><h2 class='av-special-heading-tag '  itemprop=\"headline\"  >Image With Hotspots<\/h2><div class=\"special-heading-border\"><div class=\"special-heading-inner-border\"><\/div><\/div><\/div>\n<div  class='hr av-4i62sg-e75f8a353ee702bda011b451add2d45a hr-default  avia-builder-el-1  el_after_av_heading  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-g12yg-25b96a09580ffc9cfce83da2815ddb04 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Overview<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-4a985s-8dfe1c82f2480a973b58ca097e965c67 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>The Image with Hotspots allows you to place either a fullwidth or content size image on the screen that has various hotspots (any number possible) which will be shown once the image scrolls into the browser viewport.<\/p>\n<p>There are \u2013 as always \u2013 several color options, as well as options for each individual hotspot. For example how and when the text overlay should be shown.<\/p>\n<\/div><\/section>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-uwx4-3aa5c11f5c298ac26b65bdf9adc7bbab\">\n.flex_column.av-uwx4-3aa5c11f5c298ac26b65bdf9adc7bbab{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-uwx4-3aa5c11f5c298ac26b65bdf9adc7bbab av_one_full  avia-builder-el-4  el_after_av_textblock  el_before_av_textblock  first flex_column_div av-zero-column-padding  column-top-margin'     ><style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-sub-av-42g3sg-578d7e6bcede3f49383f7b2d1dc65d43\">\n.av-hotspot-image-container .av-image-hotspot.av-3xl89k-9801e17f192ec58b1e3718d9f7f6ed02{\ntop:76.2%;\nleft:67.5%;\n}\n.av-hotspot-image-container .av-image-hotspot.av-3p3f08-f8ac4d7c0547d3f2d3893da698c2fbc2{\ntop:74.3%;\nleft:19.1%;\n}\n.av-hotspot-image-container .av-image-hotspot.av-3jbwbs-98f939cdd8fc2218122724f21cb182cb{\ntop:42%;\nleft:33.9%;\n}\n<\/style>\n<div  class='av-hotspot-image-container av-42g3sg-578d7e6bcede3f49383f7b2d1dc65d43  avia-builder-el-5  avia-builder-el-no-sibling  av-hotspot-numbered av-permanent-tooltip av-mobile-fallback-active  av-non-fullwidth-hotspot-image'  itemprop=\"image\" itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/ImageObject\" ><div class='av-hotspot-container'><div class='av-hotspot-container-inner-cell'><div class='av-hotspot-container-inner-wrap'><div class='av-image-hotspot av-3xl89k-9801e17f192ec58b1e3718d9f7f6ed02 av-image-hotspot-1 av-permanent-tooltip' data-avia-tooltip-position='bottom' data-avia-tooltip-alignment='centered' data-avia-tooltip-class='av-tt-default-width av-tt-pos-below av-tt-align-centered  av-mobile-fallback-active  av-permanent-tooltip-single  main_color av-tooltip-shadow av-tt-hotspot' data-avia-tooltip='&lt;p&gt;Mouse&lt;\/p&gt;\n'><div class='av-image-hotspot_inner'>1<\/div><div class='av-image-hotspot-pulse'><\/div><\/div><div class='av-image-hotspot av-3p3f08-f8ac4d7c0547d3f2d3893da698c2fbc2 av-image-hotspot-2 av-permanent-tooltip' data-avia-tooltip-position='top' data-avia-tooltip-alignment='centered' data-avia-tooltip-class='av-tt-default-width av-tt-pos-above av-tt-align-centered  av-mobile-fallback-active  av-permanent-tooltip-single  main_color av-tooltip-shadow av-tt-hotspot' data-avia-tooltip='&lt;p&gt;Keyboard&lt;\/p&gt;\n'><div class='av-image-hotspot_inner'>2<\/div><div class='av-image-hotspot-pulse'><\/div><\/div><div class='av-image-hotspot av-3jbwbs-98f939cdd8fc2218122724f21cb182cb av-image-hotspot-3 av-permanent-tooltip' data-avia-tooltip-position='top' data-avia-tooltip-alignment='right' data-avia-tooltip-class='av-tt-default-width av-tt-pos-above av-tt-align-right  av-mobile-fallback-active  av-permanent-tooltip-single  main_color av-tooltip-shadow av-tt-hotspot' data-avia-tooltip='&lt;p&gt;Monitor&lt;\/p&gt;\n'><div class='av-image-hotspot_inner'>3<\/div><div class='av-image-hotspot-pulse'><\/div><\/div><img decoding=\"async\" fetchpriority=\"high\" class='wp-image-3731 avia-img-lazy-loading-not-3731 avia_image' src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/04\/banner-big-1030x450.png\" alt='' title='banner-big'  height=\"450\" width=\"1030\"  itemprop=\"thumbnailUrl\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/04\/banner-big-1030x450.png 1030w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/04\/banner-big-300x131.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/04\/banner-big-768x336.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/04\/banner-big-1500x655.png 1500w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/04\/banner-big-705x308.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/04\/banner-big-450x197.png 450w\" sizes=\"(max-width: 1030px) 100vw, 1030px\" \/><\/div><\/div><\/div><div class='av-hotspot-fallback-tooltip av-image-hotspot-1 av-permanent-tooltip'><div class=\"av-hotspot-fallback-tooltip-count\">1<div class=\"avia-arrow\"><\/div><\/div><div class=\"av-hotspot-fallback-tooltip-inner clearfix\"><p>\nMouse<\/p>\n<\/div><\/div><div class='av-hotspot-fallback-tooltip av-image-hotspot-2 av-permanent-tooltip'><div class=\"av-hotspot-fallback-tooltip-count\">2<div class=\"avia-arrow\"><\/div><\/div><div class=\"av-hotspot-fallback-tooltip-inner clearfix\"><p>\nKeyboard<\/p>\n<\/div><\/div><div class='av-hotspot-fallback-tooltip av-image-hotspot-3 av-permanent-tooltip'><div class=\"av-hotspot-fallback-tooltip-count\">3<div class=\"avia-arrow\"><\/div><\/div><div class=\"av-hotspot-fallback-tooltip-inner clearfix\"><p>\nMonitor<\/p>\n<\/div><\/div><\/div><\/div><section  class='av_textblock_section av-3da74w-a3bca6d9d21723ab4727c8089f84ea11 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>View examples of the <a href=\"https:\/\/kriesi.at\/themes\/enfold-2017\/elements\/image-with-hotspots\/\" target=\"_blank\" rel=\"noopener noreferrer\">image with hotspots<\/a>.<\/p>\n<\/div><\/section><\/p>\n<div  class='hr av-3a9gs8-1d796ef23072d645d96fa24ce3a92c58 hr-default  avia-builder-el-7  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-as9w0-968a74be37b13380b86504e035284f8f '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Creating images with hotspot<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-anmg8-dcf25c4b76e4c9e4a0937b459f01e26a '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>The<strong>\u00a0Images with Hotspots <\/strong>element is located in the\u00a0<em>Media Elements<\/em>\u00a0tab.<strong>\u00a0<\/strong>You can see an example of it on the demo site here:\u00a0http:\/\/www.kriesi.at\/themes\/enfold\/shortcodes\/images-with-hotspots\/<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/image-with-hotspot-step-one.png\" alt=\"\" width=\"1079\" height=\"201\" class=\"alignnone size-full wp-image-7345\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/image-with-hotspot-step-one.png 1079w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/image-with-hotspot-step-one-300x56.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/image-with-hotspot-step-one-768x143.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/image-with-hotspot-step-one-1030x192.png 1030w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/image-with-hotspot-step-one-705x131.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/image-with-hotspot-step-one-450x84.png 450w\" sizes=\"auto, (max-width: 1079px) 100vw, 1079px\" \/><\/p>\n<p>Drag and drop the element into your layout, click on the indicated button and in the pop up that appears you can begin by adding the image and then each hotspot.<\/p>\n<p><strong>Adding Hotspots<\/strong> <\/p>\n<p>Once you\u2019ve selected the image, each time you click on the \u2018+ Add Hotspot\u2019 button a new hotspot will appear on the image. Using your mouse you can drag and drop the hotspot wherever you want on to the image.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5594\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/image-with-hotspot-step-two.png\" alt=\"\" width=\"1084\" height=\"747\" \/><\/p>\n<p><strong>Editing Hotspot tooltips<\/strong><\/p>\n<p>Clicking on a hotspot in the list of hotspots (or clicking on a hotspot already on the image) will open another popup where you can select the tooltip position, tooltip width and add the content of the data that will appear. Make sure to scroll down in that window for Tooltip Style and the Hotspot Color options.<\/p>\n<p>When you are finished make sure to Save and publish the page to see your new image with Hotspots!<\/p>\n<\/div><\/section>\n<div  class='hr av-2o9a9k-329f960adab4e4688315241c82a69b0b hr-default  avia-builder-el-10  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-2kbi3k-38901f65b1e6aab05d899a9f0c6bdffa '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Code Snippet<\/h2>\n<\/div><\/section>\n<div  class='avia-builder-widget-area clearfix  avia-builder-el-12  el_after_av_textblock  el_before_av_hr '><div id=\"text-3\" class=\"widget clearfix widget_text\">\t\t\t<div class=\"textwidget\"><p><strong>How to use the snippets?<\/strong><\/p>\n<ul>\n<li>Add the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/add-custom-css\/\" target=\"_blank\" rel=\"noopener\">CSS Snippets<\/a> to Enfold child theme styles.<\/li>\n<li>Add the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/add-custom-js-or-php-script\/\" target=\"_blank\" rel=\"noopener\">JS and PHP scripts<\/a> to your\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/how-to-install-enfold-theme\/#why-child-theme\" target=\"_blank\" rel=\"noopener\">child theme<\/a>\u00a0functions.php file.<\/li>\n<li>Shortcodes can be used in a text area in pages, posts, sliders and widget areas.\u00a0Enable\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#debug-mode\" target=\"_blank\" rel=\"noopener\">debug mode<\/a>\u00a0to view the page shortcode.<\/li>\n<li>Enable\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#turn-on-custom-css-class-field-for-all-alb-elements\">custom CSS class name support<\/a>\u00a0to\u00a0add your\u00a0class names to the theme elements.<\/li>\n<li>Disable <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/how-to-clear-the-cache\/\" target=\"_blank\" rel=\"noopener\">script merging and clear the cache<\/a>\u00a0to view the changes on the frontend.<\/li>\n<\/ul>\n<p><strong>NOTE<\/strong>: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due\u00a0to any customization already added to achieve a similar result. Please try removing your customization if any and feel free to change the values in the example codes to suit your design.<\/p>\n<\/div>\n\t\t<\/div><\/div>\n<div  class='hr av-27ye6g-b8bd5895d1889d589fc0002367e344aa hr-default  avia-builder-el-13  el_after_av_sidebar  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-21uhig-6f28051262e4bcbab7e46cb9b9df961e '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Shortcode<\/h3>\n<\/div><\/section>\n\n<div  class='hr av-5gx00-762c19f7303c379d620b3ab7cee39d0a hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-1h94gw-0e325fa753468f0b19ccba2c3d4d5f74 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Customization<\/h2>\n<\/div><\/section>\n<div  class='hr av-1b41d4-4476941d478f6ad88853672d7f1bd1f2 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-12e2w8-97efd6c8646ed078be2c45fb7f988fe6 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Remove pulse animation<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-wsv2g-f373088d69be7d48ec99af745815e3cc '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To remove the pulse effect simply enter the word &#8220;transparent&#8221; in the color\u00a0area for pulse. In case if you wish to make transparent hotspots, the same will work for hotspot color\u00a0\ud83d\ude42<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5591\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Hotspot.png\" alt=\"\" width=\"985\" height=\"498\" \/><\/p>\n<\/div><\/section>\n<div  class='hr av-qvenk-20958ec72f11c0bbd004837aa63e39f6 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-ksqqo-9b23fe12582ce848b22ef16a87bbab53 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Resource<\/h2>\n<\/div><\/section>\n<div  class='hr av-ehtrc-cf382bf1b7e596d7262afda24a0531d4 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-afcm0-4157b688468e8e938c62d23589a540a4 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Contributed video<\/strong>:<\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=GGINOXTzycE\"> Image Hotspot Element Tutorial <\/a><\/p>\n<\/div><\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"categories":[2,8],"tags":[],"class_list":["post-344","post","type-post","status-publish","format-standard","hentry","category-documentation","category-media-elements","documentation","media-elements"],"modified_by":"vinay","_links":{"self":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/344","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/comments?post=344"}],"version-history":[{"count":3,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/344\/revisions"}],"predecessor-version":[{"id":12535,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/344\/revisions\/12535"}],"wp:attachment":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/media?parent=344"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/categories?post=344"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/tags?post=344"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}