{"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-09T12:42:19","modified_gmt":"2014-07-09T12:42:19","slug":"images-with-hotspots","status":"publish","type":"page","link":"https:\/\/kriesi.at\/themes\/enfold\/shortcodes\/images-with-hotspots\/","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-14d84effb1a21ac65b191ca2ae58f0cb\">\n.av-hotspot-image-container .av-image-hotspot.av-av_image_spot-394c7fa42da12514a8ab3d38bc900243{\ntop:48.2%;\nleft:35.3%;\n}\n.av-hotspot-image-container .av-image-hotspot.av-av_image_spot-37d661fdc8c0222d446ba6afd7e7aad6{\ntop:35%;\nleft:49.4%;\n}\n.av-hotspot-image-container .av-image-hotspot.av-av_image_spot-a61a5d2cdd61fa0f76273da1cb39acc4{\ntop:71%;\nleft:51.5%;\n}\n.av-hotspot-image-container .av-image-hotspot.av-av_image_spot-a61a5d2cdd61fa0f76273da1cb39acc4 .av-image-hotspot_inner{\nbackground-color:#000000;\ncolor:#ffffff;\n}\n.av-hotspot-image-container .av-image-hotspot.av-av_image_spot-a61a5d2cdd61fa0f76273da1cb39acc4 .av-image-hotspot-pulse{\nbackground-color:#1e73be;\n}\n.av-hotspot-image-container .av-image-hotspot.av-av_image_spot-49614bd1d8b755203a4352f867484e9a{\ntop:36.4%;\nleft:77.7%;\n}\n.av-hotspot-image-container .av-image-hotspot.av-av_image_spot-c216412c179cf3c6d97c94fd5eab478e{\ntop:72%;\nleft:90.3%;\n}\n.av-hotspot-image-container .av-image-hotspot.av-av_image_spot-be4cb220ce83576c4eb2519707f6c28e{\ntop:61%;\nleft:14.3%;\n}\n<\/style>\n<div  class='av-hotspot-image-container av-av_image_hotspot-14d84effb1a21ac65b191ca2ae58f0cb  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-394c7fa42da12514a8ab3d38bc900243 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-37d661fdc8c0222d446ba6afd7e7aad6 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-a61a5d2cdd61fa0f76273da1cb39acc4 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><div class='av-image-hotspot av-av_image_spot-49614bd1d8b755203a4352f867484e9a av-image-hotspot-4 ' data-avia-tooltip-position='left' data-avia-tooltip-alignment='top' data-avia-tooltip-class='av-tt-xlarge-width av-tt-pos-left av-tt-align-top  av-mobile-fallback-active  main_color av-tt-hotspot' data-avia-tooltip='&lt;p&gt;Use your Hotspots to mark any interesting things on your image. Best used for ecommerce and products&lt;\/p&gt;\n'><div class='av-image-hotspot_inner'>4<\/div><div class='av-image-hotspot-pulse'><\/div><\/div><div class='av-image-hotspot av-av_image_spot-c216412c179cf3c6d97c94fd5eab478e av-image-hotspot-5 ' data-avia-tooltip-position='left' data-avia-tooltip-alignment='centered' data-avia-tooltip-class='av-tt-default-width av-tt-pos-left av-tt-align-centered  av-mobile-fallback-active  main_color av-tt-hotspot' data-avia-tooltip='&lt;p&gt;This is a mountain!&lt;\/p&gt;\n'><div class='av-image-hotspot_inner'>5<\/div><div class='av-image-hotspot-pulse'><\/div><\/div><div class='av-image-hotspot av-av_image_spot-be4cb220ce83576c4eb2519707f6c28e av-image-hotspot-6 ' data-avia-tooltip-position='top' data-avia-tooltip-alignment='left' data-avia-tooltip-class='av-tt-default-width av-tt-pos-above av-tt-align-left  av-mobile-fallback-active  main_color av-tt-hotspot' data-avia-tooltip='&lt;p&gt;Another Mountain! Probably the biggest mountain on this image!&lt;\/p&gt;\n'><div class='av-image-hotspot_inner'>6<\/div><div class='av-image-hotspot-pulse'><\/div><\/div><img decoding=\"async\" fetchpriority=\"high\" class='wp-image-3210 avia-img-lazy-loading-not-3210 avia_image' src=\"https:\/\/kriesi.at\/themes\/enfold\/wp-content\/uploads\/sites\/37\/2014\/07\/photodune-2254959-snowboard-l-1500x630.jpg\" alt='' title='-'  height=\"630\" width=\"1500\"  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 class='av-hotspot-fallback-tooltip av-image-hotspot-4 '><div class=\"av-hotspot-fallback-tooltip-count\">4<div class=\"avia-arrow\"><\/div><\/div><div class=\"av-hotspot-fallback-tooltip-inner clearfix\"><p>\nUse your Hotspots to mark any interesting things on your image. Best used for ecommerce and products<\/p>\n<\/div><\/div><div class='av-hotspot-fallback-tooltip av-image-hotspot-5 '><div class=\"av-hotspot-fallback-tooltip-count\">5<div class=\"avia-arrow\"><\/div><\/div><div class=\"av-hotspot-fallback-tooltip-inner clearfix\"><p>\nThis is a mountain!<\/p>\n<\/div><\/div><div class='av-hotspot-fallback-tooltip av-image-hotspot-6 '><div class=\"av-hotspot-fallback-tooltip-count\">6<div class=\"avia-arrow\"><\/div><\/div><div class=\"av-hotspot-fallback-tooltip-inner clearfix\"><p>\nAnother Mountain! Probably the biggest mountain on this image!<\/p>\n<\/div><\/div><\/div>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-av_heading-71dd827413185de83fc514e4b6a52c6e\">\n#top .av-special-heading.av-av_heading-71dd827413185de83fc514e4b6a52c6e{\npadding-bottom:10px;\n}\nbody .av-special-heading.av-av_heading-71dd827413185de83fc514e4b6a52c6e .av-special-heading-tag .heading-char{\nfont-size:25px;\n}\n.av-special-heading.av-av_heading-71dd827413185de83fc514e4b6a52c6e .av-subheading{\nfont-size:15px;\n}\n<\/style>\n<div  class='av-special-heading av-av_heading-71dd827413185de83fc514e4b6a52c6e 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 Hotspots<\/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-a7bac4a6e49c8eb47262a43fda825da8 '   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-40d23ed31859ff59cd7445960ef49005\">\n.av-hotspot-image-container .av-image-hotspot.av-av_image_spot-cbd970f8256ca7d5f88bd946e6dc066c{\ntop:43.7%;\nleft:47.5%;\n}\n.av-hotspot-image-container .av-image-hotspot.av-av_image_spot-cbd970f8256ca7d5f88bd946e6dc066c .av-image-hotspot-pulse{\nbackground-color:#000000;\n}\n<\/style>\n<div  class='av-hotspot-image-container av-av_image_hotspot-40d23ed31859ff59cd7445960ef49005  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-cbd970f8256ca7d5f88bd946e6dc066c 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-2980 avia-img-lazy-loading-not-2980 avia_image' src=\"https:\/\/kriesi.at\/themes\/enfold\/wp-content\/uploads\/sites\/37\/2014\/04\/photodune-2005039-hawaiian-vacation-sunset-concept-l-300x200.jpg\" alt='' title='Hawaiian Vacation Sunset Concept'  height=\"200\" width=\"300\"  itemprop=\"thumbnailUrl\" srcset=\"https:\/\/kriesi.at\/themes\/enfold\/wp-content\/uploads\/sites\/37\/2014\/04\/photodune-2005039-hawaiian-vacation-sunset-concept-l-300x200.jpg 300w, https:\/\/kriesi.at\/themes\/enfold\/wp-content\/uploads\/sites\/37\/2014\/04\/photodune-2005039-hawaiian-vacation-sunset-concept-l-1030x686.jpg 1030w, https:\/\/kriesi.at\/themes\/enfold\/wp-content\/uploads\/sites\/37\/2014\/04\/photodune-2005039-hawaiian-vacation-sunset-concept-l-1500x1000.jpg 1500w, https:\/\/kriesi.at\/themes\/enfold\/wp-content\/uploads\/sites\/37\/2014\/04\/photodune-2005039-hawaiian-vacation-sunset-concept-l-705x470.jpg 705w, https:\/\/kriesi.at\/themes\/enfold\/wp-content\/uploads\/sites\/37\/2014\/04\/photodune-2005039-hawaiian-vacation-sunset-concept-l-450x300.jpg 450w\" 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-b51168870d26eac9084c0e2dc495efe0 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-c4c557aaf63ff64682115ea4648d5522\">\n.av-hotspot-image-container .av-image-hotspot.av-av_image_spot-df957490905fbe341391124e2126a643{\ntop:28.3%;\nleft:17.5%;\n}\n.av-hotspot-image-container .av-image-hotspot.av-av_image_spot-1a1a8e59dcc87402ac830913f4e311c8{\ntop:57.7%;\nleft:83.5%;\n}\n.av-hotspot-image-container .av-image-hotspot.av-av_image_spot-1a1a8e59dcc87402ac830913f4e311c8 .av-image-hotspot_inner{\nbackground-color:#000000;\ncolor:#ffffff;\n}\n.av-hotspot-image-container .av-image-hotspot.av-av_image_spot-1a1a8e59dcc87402ac830913f4e311c8 .av-image-hotspot-pulse{\nbackground-color:#136ebf;\n}\n<\/style>\n<div  class='av-hotspot-image-container av-av_image_hotspot-c4c557aaf63ff64682115ea4648d5522  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-df957490905fbe341391124e2126a643 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-1a1a8e59dcc87402ac830913f4e311c8 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-2973 avia-img-lazy-loading-not-2973 avia_image' src=\"https:\/\/kriesi.at\/themes\/enfold\/wp-content\/uploads\/sites\/37\/2014\/04\/photodune-277307-rock-concert-m-300x200.jpg\" alt='' title='rock concert'  height=\"200\" width=\"300\"  itemprop=\"thumbnailUrl\" srcset=\"https:\/\/kriesi.at\/themes\/enfold\/wp-content\/uploads\/sites\/37\/2014\/04\/photodune-277307-rock-concert-m-300x200.jpg 300w, https:\/\/kriesi.at\/themes\/enfold\/wp-content\/uploads\/sites\/37\/2014\/04\/photodune-277307-rock-concert-m-1030x686.jpg 1030w, https:\/\/kriesi.at\/themes\/enfold\/wp-content\/uploads\/sites\/37\/2014\/04\/photodune-277307-rock-concert-m-1500x1000.jpg 1500w, https:\/\/kriesi.at\/themes\/enfold\/wp-content\/uploads\/sites\/37\/2014\/04\/photodune-277307-rock-concert-m-705x470.jpg 705w, https:\/\/kriesi.at\/themes\/enfold\/wp-content\/uploads\/sites\/37\/2014\/04\/photodune-277307-rock-concert-m-450x300.jpg 450w, https:\/\/kriesi.at\/themes\/enfold\/wp-content\/uploads\/sites\/37\/2014\/04\/photodune-277307-rock-concert-m.jpg 1732w\" 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-a7bac4a6e49c8eb47262a43fda825da8 '   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":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"class_list":["post-3192","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/kriesi.at\/themes\/enfold\/wp-json\/wp\/v2\/pages\/3192","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kriesi.at\/themes\/enfold\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kriesi.at\/themes\/enfold\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kriesi.at\/themes\/enfold\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kriesi.at\/themes\/enfold\/wp-json\/wp\/v2\/comments?post=3192"}],"version-history":[{"count":0,"href":"https:\/\/kriesi.at\/themes\/enfold\/wp-json\/wp\/v2\/pages\/3192\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/kriesi.at\/themes\/enfold\/wp-json\/wp\/v2\/pages\/750"}],"wp:attachment":[{"href":"https:\/\/kriesi.at\/themes\/enfold\/wp-json\/wp\/v2\/media?parent=3192"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}