{"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:\/\/wp.2ifs.com\/index.php\/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-76895e14256c24b4f483360a2516568f\">\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-76895e14256c24b4f483360a2516568f  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 class='wp-image-315 avia-img-lazy-loading-not-315 avia_image' src='https:\/\/wp.2ifs.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-6cc137af41a57cd9ee20e6106f6e725f\">\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-6cc137af41a57cd9ee20e6106f6e725f  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 class='wp-image-316 avia-img-lazy-loading-not-316 avia_image' src='https:\/\/wp.2ifs.com\/wp-content\/uploads\/2012\/04\/2-300x195.jpg' alt='' title='2'  height=\"195\" width=\"300\"  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><\/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-f3526aca24001125fa7d4d5ee7d1c11d\">\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-f3526aca24001125fa7d4d5ee7d1c11d  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 class='wp-image-314 avia-img-lazy-loading-not-314 avia_image' src='https:\/\/wp.2ifs.com\/wp-content\/uploads\/2012\/04\/013-300x195.jpg' alt='' title='013'  height=\"195\" width=\"300\"  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>\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"],"_links":{"self":[{"href":"https:\/\/wp.2ifs.com\/index.php\/wp-json\/wp\/v2\/pages\/3192","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wp.2ifs.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wp.2ifs.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wp.2ifs.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wp.2ifs.com\/index.php\/wp-json\/wp\/v2\/comments?post=3192"}],"version-history":[{"count":0,"href":"https:\/\/wp.2ifs.com\/index.php\/wp-json\/wp\/v2\/pages\/3192\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/wp.2ifs.com\/index.php\/wp-json\/wp\/v2\/pages\/750"}],"wp:attachment":[{"href":"https:\/\/wp.2ifs.com\/index.php\/wp-json\/wp\/v2\/media?parent=3192"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}