{"id":3192,"date":"2014-07-08T17:58:03","date_gmt":"2014-07-08T17:58:03","guid":{"rendered":"http:\/\/www.kriesi.at\/themes\/enfold\/?page_id=3192"},"modified":"2014-07-08T17:58:03","modified_gmt":"2014-07-08T17:58:03","slug":"images-with-hotspots","status":"publish","type":"page","link":"https:\/\/demo2.enfoldtest.lougcloud.com\/?page_id=3192","title":{"rendered":"Images with Hotspots"},"content":{"rendered":"\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-sub-av-av_image_hotspot-d0d44f1ef06008b29e46216b721da395\">\n.av-hotspot-image-container .av-image-hotspot.av-av_image_spot-a6bd31952ba5fc3f70a0a8232fa0890f{\ntop:60.4%;\nleft:12.5%;\n}\n.av-hotspot-image-container .av-image-hotspot.av-av_image_spot-fbe93e30cf2431ea5b03e9b7c644ca46{\ntop:25.5%;\nleft:59%;\n}\n.av-hotspot-image-container .av-image-hotspot.av-av_image_spot-a134fddb4814970babcd60fb5d68174e{\ntop:67.4%;\nleft:69.5%;\n}\n.av-hotspot-image-container .av-image-hotspot.av-av_image_spot-a134fddb4814970babcd60fb5d68174e .av-image-hotspot_inner{\nbackground-color:#000000;\ncolor:#ffffff;\n}\n.av-hotspot-image-container .av-image-hotspot.av-av_image_spot-a134fddb4814970babcd60fb5d68174e .av-image-hotspot-pulse{\nbackground-color:#1e73be;\n}\n<\/style>\n<div  class='av-hotspot-image-container av-av_image_hotspot-d0d44f1ef06008b29e46216b721da395  avia-builder-el-0  el_before_av_heading  avia-builder-el-first  av-hotspot-numbered avia_animated_image avia_animate_when_almost_visible fade-in 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-av_image_spot-a6bd31952ba5fc3f70a0a8232fa0890f av-image-hotspot-1 ' data-avia-tooltip-position='right' data-avia-tooltip-alignment='centered' data-avia-tooltip-class='av-tt-default-width av-tt-pos-right av-tt-align-centered  av-mobile-fallback-active  main_color av-tt-hotspot' data-avia-tooltip='&lt;p&gt;Place any number of tooltips on the image&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-av_image_spot-fbe93e30cf2431ea5b03e9b7c644ca46 av-image-hotspot-2 ' data-avia-tooltip-position='bottom' data-avia-tooltip-alignment='centered' data-avia-tooltip-class='av-tt-xlarge-width av-tt-pos-below av-tt-align-centered  av-mobile-fallback-active  main_color av-tt-hotspot' data-avia-tooltip='&lt;p&gt;You can change styling, size and position of each of the tooltips to your likings&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-av_image_spot-a134fddb4814970babcd60fb5d68174e av-image-hotspot-3 ' data-avia-tooltip-position='top' data-avia-tooltip-alignment='left' data-avia-tooltip-class='av-tt-large-width av-tt-pos-above av-tt-align-left  av-mobile-fallback-active  transparent_dark av-tt-hotspot' data-avia-tooltip='&lt;p&gt;Here is an example of a tooltip with a different color scheme&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-315 avia-img-lazy-loading-not-315 avia_image' src=\"https:\/\/demo2.enfoldtest.lougcloud.com\/wp-content\/uploads\/2012\/04\/014-1000x430.jpg\" alt='' title='014'  height=\"430\" width=\"1000\"  itemprop=\"thumbnailUrl\"  \/><\/div><\/div><\/div><div class='av-hotspot-fallback-tooltip av-image-hotspot-1 '><div class=\"av-hotspot-fallback-tooltip-count\">1<div class=\"avia-arrow\"><\/div><\/div><div class=\"av-hotspot-fallback-tooltip-inner clearfix\"><p>\nPlace any number of tooltips on the image<\/p>\n<\/div><\/div><div class='av-hotspot-fallback-tooltip av-image-hotspot-2 '><div class=\"av-hotspot-fallback-tooltip-count\">2<div class=\"avia-arrow\"><\/div><\/div><div class=\"av-hotspot-fallback-tooltip-inner clearfix\"><p>\nYou can change styling, size and position of each of the tooltips to your likings<\/p>\n<\/div><\/div><div class='av-hotspot-fallback-tooltip av-image-hotspot-3 '><div class=\"av-hotspot-fallback-tooltip-count\">3<div class=\"avia-arrow\"><\/div><\/div><div class=\"av-hotspot-fallback-tooltip-inner clearfix\"><p>\nHere is an example of a tooltip with a different color scheme<\/p>\n<\/div><\/div><\/div>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-av_heading-750fc4f51e20aaa59d6a7caa77e45416\">\n#top .av-special-heading.av-av_heading-750fc4f51e20aaa59d6a7caa77e45416{\npadding-bottom:10px;\n}\nbody .av-special-heading.av-av_heading-750fc4f51e20aaa59d6a7caa77e45416 .av-special-heading-tag .heading-char{\nfont-size:25px;\n}\n.av-special-heading.av-av_heading-750fc4f51e20aaa59d6a7caa77e45416 .av-subheading{\nfont-size:15px;\n}\n<\/style>\n<div  class='av-special-heading av-av_heading-750fc4f51e20aaa59d6a7caa77e45416 av-special-heading-h1 blockquote modern-quote modern-centered  avia-builder-el-1  el_after_av_image_hotspot  el_before_av_textblock  avia-builder-el-first  av-thin-font'><h1 class='av-special-heading-tag'  itemprop=\"headline\"  >Images <strong>with Tooltips<\/strong><\/h1><div class=\"special-heading-border\"><div class=\"special-heading-inner-border\"><\/div><\/div><\/div>\n<section  class='av_textblock_section av-av_textblock-2989cb1a500f76248ec894598f4e8e5e '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/CreativeWork\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<\/p>\n<p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.<\/p>\n<\/div><\/section>\n<div  class='flex_column av-av_one_half-2a9015ff38129c418a3f2eafba3e9512 av_one_half  avia-builder-el-3  el_after_av_textblock  el_before_av_one_half  first flex_column_div  column-top-margin'     ><style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-sub-av-av_image_hotspot-26114c56f2e6d15c79a97330d174064b\">\n.av-hotspot-image-container .av-image-hotspot.av-av_image_spot-a6e2027fb74808427454c5e37be5fb0f{\ntop:43.7%;\nleft:47.5%;\n}\n<\/style>\n<div  class='av-hotspot-image-container av-av_image_hotspot-26114c56f2e6d15c79a97330d174064b  avia-builder-el-4  avia-builder-el-no-sibling  av-hotspot-numbered avia_animated_image avia_animate_when_almost_visible left-to-right 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-av_image_spot-a6e2027fb74808427454c5e37be5fb0f av-image-hotspot-1 ' data-avia-tooltip-position='right' data-avia-tooltip-alignment='centered' data-avia-tooltip-class='av-tt-default-width av-tt-pos-right av-tt-align-centered  av-mobile-fallback-active  main_color av-tt-hotspot' data-avia-tooltip='&lt;p&gt;Place any number of tooltips on the image&lt;\/p&gt;\n'><div class='av-image-hotspot_inner'>1<\/div><div class='av-image-hotspot-pulse'><\/div><\/div><img decoding=\"async\" fetchpriority=\"high\" class='wp-image-316 avia-img-lazy-loading-not-316 avia_image' src=\"https:\/\/demo2.enfoldtest.lougcloud.com\/wp-content\/uploads\/2012\/04\/2-300x195.jpg\" alt='' title='2'  height=\"195\" width=\"300\"  itemprop=\"thumbnailUrl\" srcset=\"https:\/\/demo2.enfoldtest.lougcloud.com\/wp-content\/uploads\/2012\/04\/2-300x195.jpg 300w, https:\/\/demo2.enfoldtest.lougcloud.com\/wp-content\/uploads\/2012\/04\/2-768x499.jpg 768w, https:\/\/demo2.enfoldtest.lougcloud.com\/wp-content\/uploads\/2012\/04\/2-705x458.jpg 705w, https:\/\/demo2.enfoldtest.lougcloud.com\/wp-content\/uploads\/2012\/04\/2.jpg 1000w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/div><\/div><\/div><div class='av-hotspot-fallback-tooltip av-image-hotspot-1 '><div class=\"av-hotspot-fallback-tooltip-count\">1<div class=\"avia-arrow\"><\/div><\/div><div class=\"av-hotspot-fallback-tooltip-inner clearfix\"><p>\nPlace any number of tooltips on the image<\/p>\n<\/div><\/div><\/div><\/div>\n<div  class='flex_column av-av_one_half-52c89597409f646e66e7cc675a5d9b4a av_one_half  avia-builder-el-5  el_after_av_one_half  el_before_av_textblock  flex_column_div  column-top-margin'     ><style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-sub-av-av_image_hotspot-508922e104a04354db00434ce32a7b15\">\n.av-hotspot-image-container .av-image-hotspot.av-av_image_spot-6c3973a51b0921b9b8089ea877e8f546{\ntop:28.3%;\nleft:17.5%;\n}\n.av-hotspot-image-container .av-image-hotspot.av-av_image_spot-82b7ab8f48ec744fc6619fa00836f1b4{\ntop:57.7%;\nleft:83.5%;\n}\n.av-hotspot-image-container .av-image-hotspot.av-av_image_spot-82b7ab8f48ec744fc6619fa00836f1b4 .av-image-hotspot_inner{\nbackground-color:#000000;\ncolor:#ffffff;\n}\n.av-hotspot-image-container .av-image-hotspot.av-av_image_spot-82b7ab8f48ec744fc6619fa00836f1b4 .av-image-hotspot-pulse{\nbackground-color:#aa1b1b;\n}\n<\/style>\n<div  class='av-hotspot-image-container av-av_image_hotspot-508922e104a04354db00434ce32a7b15  avia-builder-el-6  avia-builder-el-no-sibling  av-hotspot-numbered avia_animated_image avia_animate_when_almost_visible pop-up 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-av_image_spot-6c3973a51b0921b9b8089ea877e8f546 av-image-hotspot-1 ' data-avia-tooltip-position='right' data-avia-tooltip-alignment='centered' data-avia-tooltip-class='av-tt-default-width av-tt-pos-right av-tt-align-centered  av-mobile-fallback-active  main_color av-tt-hotspot' data-avia-tooltip='&lt;p&gt;Place any number of tooltips on the image&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-av_image_spot-82b7ab8f48ec744fc6619fa00836f1b4 av-image-hotspot-2 ' data-avia-tooltip-position='top' data-avia-tooltip-alignment='left' data-avia-tooltip-class='av-tt-large-width av-tt-pos-above av-tt-align-left  av-mobile-fallback-active  transparent_dark av-tt-hotspot' data-avia-tooltip='&lt;p&gt;Here is an example of a tooltip with a different color scheme&lt;\/p&gt;\n'><div class='av-image-hotspot_inner'>2<\/div><div class='av-image-hotspot-pulse'><\/div><\/div><img decoding=\"async\" fetchpriority=\"high\" class='wp-image-314 avia-img-lazy-loading-not-314 avia_image' src=\"https:\/\/demo2.enfoldtest.lougcloud.com\/wp-content\/uploads\/2012\/04\/013-300x195.jpg\" alt='' title='013'  height=\"195\" width=\"300\"  itemprop=\"thumbnailUrl\" srcset=\"https:\/\/demo2.enfoldtest.lougcloud.com\/wp-content\/uploads\/2012\/04\/013-300x195.jpg 300w, https:\/\/demo2.enfoldtest.lougcloud.com\/wp-content\/uploads\/2012\/04\/013-768x499.jpg 768w, https:\/\/demo2.enfoldtest.lougcloud.com\/wp-content\/uploads\/2012\/04\/013-705x458.jpg 705w, https:\/\/demo2.enfoldtest.lougcloud.com\/wp-content\/uploads\/2012\/04\/013.jpg 1000w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/div><\/div><\/div><div class='av-hotspot-fallback-tooltip av-image-hotspot-1 '><div class=\"av-hotspot-fallback-tooltip-count\">1<div class=\"avia-arrow\"><\/div><\/div><div class=\"av-hotspot-fallback-tooltip-inner clearfix\"><p>\nPlace any number of tooltips on the image<\/p>\n<\/div><\/div><div class='av-hotspot-fallback-tooltip av-image-hotspot-2 '><div class=\"av-hotspot-fallback-tooltip-count\">2<div class=\"avia-arrow\"><\/div><\/div><div class=\"av-hotspot-fallback-tooltip-inner clearfix\"><p>\nHere is an example of a tooltip with a different color scheme<\/p>\n<\/div><\/div><\/div><\/div>\n<section  class='av_textblock_section av-av_textblock-2989cb1a500f76248ec894598f4e8e5e '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/CreativeWork\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<\/p>\n<p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.<\/p>\n<\/div><\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":750,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-3192","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Images with Hotspots - Enfold Template Demo<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Images with Hotspots - Enfold Template Demo\" \/>\n<meta property=\"og:url\" content=\"https:\/\/demo2.enfoldtest.lougcloud.com\/?page_id=3192\" \/>\n<meta property=\"og:site_name\" content=\"Enfold Template Demo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/demo2.enfoldtest.lougcloud.com\/?page_id=3192\",\"url\":\"https:\/\/demo2.enfoldtest.lougcloud.com\/?page_id=3192\",\"name\":\"Images with Hotspots - Enfold Template Demo\",\"isPartOf\":{\"@id\":\"https:\/\/demo2.enfoldtest.lougcloud.com\/#website\"},\"datePublished\":\"2014-07-08T17:58:03+00:00\",\"dateModified\":\"2014-07-08T17:58:03+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/demo2.enfoldtest.lougcloud.com\/?page_id=3192#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/demo2.enfoldtest.lougcloud.com\/?page_id=3192\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/demo2.enfoldtest.lougcloud.com\/?page_id=3192#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/demo2.enfoldtest.lougcloud.com\/?page_id=734\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Shortcodes\",\"item\":\"https:\/\/demo2.enfoldtest.lougcloud.com\/?page_id=750\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Images with Hotspots\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/demo2.enfoldtest.lougcloud.com\/#website\",\"url\":\"https:\/\/demo2.enfoldtest.lougcloud.com\/\",\"name\":\"Enfold Template Demo\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/demo2.enfoldtest.lougcloud.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Images with Hotspots - Enfold Template Demo","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"Images with Hotspots - Enfold Template Demo","og_url":"https:\/\/demo2.enfoldtest.lougcloud.com\/?page_id=3192","og_site_name":"Enfold Template Demo","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/demo2.enfoldtest.lougcloud.com\/?page_id=3192","url":"https:\/\/demo2.enfoldtest.lougcloud.com\/?page_id=3192","name":"Images with Hotspots - Enfold Template Demo","isPartOf":{"@id":"https:\/\/demo2.enfoldtest.lougcloud.com\/#website"},"datePublished":"2014-07-08T17:58:03+00:00","dateModified":"2014-07-08T17:58:03+00:00","breadcrumb":{"@id":"https:\/\/demo2.enfoldtest.lougcloud.com\/?page_id=3192#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/demo2.enfoldtest.lougcloud.com\/?page_id=3192"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/demo2.enfoldtest.lougcloud.com\/?page_id=3192#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/demo2.enfoldtest.lougcloud.com\/?page_id=734"},{"@type":"ListItem","position":2,"name":"Shortcodes","item":"https:\/\/demo2.enfoldtest.lougcloud.com\/?page_id=750"},{"@type":"ListItem","position":3,"name":"Images with Hotspots"}]},{"@type":"WebSite","@id":"https:\/\/demo2.enfoldtest.lougcloud.com\/#website","url":"https:\/\/demo2.enfoldtest.lougcloud.com\/","name":"Enfold Template Demo","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/demo2.enfoldtest.lougcloud.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/demo2.enfoldtest.lougcloud.com\/index.php?rest_route=\/wp\/v2\/pages\/3192","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo2.enfoldtest.lougcloud.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo2.enfoldtest.lougcloud.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo2.enfoldtest.lougcloud.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo2.enfoldtest.lougcloud.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3192"}],"version-history":[{"count":0,"href":"https:\/\/demo2.enfoldtest.lougcloud.com\/index.php?rest_route=\/wp\/v2\/pages\/3192\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/demo2.enfoldtest.lougcloud.com\/index.php?rest_route=\/wp\/v2\/pages\/750"}],"wp:attachment":[{"href":"https:\/\/demo2.enfoldtest.lougcloud.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3192"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}