a
We a team of artists, producers, brand strategists and marketing professionals dedicated to visual problem solving in all media, The Attic develops visual identities and branding strategies in broadcast, print, interactive and digital formats for a wide variety of clients, from cable networks to theme parks to regular TV advertisers and everything in between.
549 Water Street, Celebration FL, 34747
+1 (407) 491.5049
javier.beltran@theattic.tv
Follow Us
 

Image with Hotspots

[av_section min_height=” min_height_px=’500px’ padding=’default’ shadow=’no-border-styling’ bottom_border=’no-border-styling’ bottom_border_diagonal_color=’#333333′ bottom_border_diagonal_direction=” bottom_border_style=” id=’Intro’ color=’main_color’ custom_bg=” src=” attachment=” attachment_size=” attach=’scroll’ position=’top left’ repeat=’no-repeat’ video=” video_ratio=’16:9′ overlay_opacity=’0.5′ overlay_color=” overlay_pattern=” overlay_custom_pattern=” av_element_hidden_in_editor=’0′]
[av_hr class=’invisible’ height=’50’ shadow=’no-shadow’ position=’center’ custom_border=’av-border-fat’ custom_width=’50px’ custom_border_color=’#000000′ custom_margin_top=’30px’ custom_margin_bottom=’30px’ icon_select=’no’ custom_icon_color=” icon=’ue808′ font=’entypo-fontello’]

[av_heading tag=’h1′ padding=’20’ heading=’Image with Hotspots’ color=’custom-color-heading’ style=’blockquote modern-quote modern-centered’ custom_font=’#000000′ size=’40’ subheading_active=” subheading_size=’15’ custom_class=” admin_preview_bg=”][/av_heading]

[av_hr class=’custom’ height=’50’ shadow=’no-shadow’ position=’center’ custom_border=’av-border-fat’ custom_width=’50px’ custom_border_color=’#000000′ custom_margin_top=’30px’ custom_margin_bottom=’30px’ icon_select=’no’ custom_icon_color=” icon=’ue808′ font=’entypo-fontello’]

[av_image_hotspot src=’http://theattic.tv/wp-content/uploads/2015/07/multi_apple-1.jpg’ attachment=’376′ attachment_size=’full’ animation=’bottom-to-top’ hotspot_layout=’numbered’ hotspot_tooltip_display=’av-permanent-tooltip’ hotspot_mobile=’aviaTBhotspot_mobile’]
[av_image_spot tooltip_pos=’av-tt-pos-above av-tt-align-centered’ tooltip_width=’av-tt-large-width’ tooltip_style=’main_color av-tooltip-shadow’ link=” link_target=” hotspot_color=” custom_bg=” custom_font=” custom_pulse=” hotspot_pos=’13.7,27.8′]
Beautiful new demos with each release
[/av_image_spot]
[av_image_spot tooltip_pos=’av-tt-pos-above av-tt-align-centered’ tooltip_width=’av-tt-large-width’ tooltip_style=’main_color av-tooltip-shadow’ link=” link_target=” hotspot_color=” custom_bg=” custom_font=” custom_pulse=” hotspot_pos=’21,69.9′]
Free Stock Pictures included in all demos
[/av_image_spot]
[av_image_spot tooltip_pos=’av-tt-pos-above av-tt-align-centered’ tooltip_width=’av-tt-large-width’ tooltip_style=’main_color av-tooltip-shadow’ link=” link_target=” hotspot_color=” custom_bg=” custom_font=” custom_pulse=” hotspot_pos=’48.6,85.3′]
Retina ready and responsive – works great on devices of any size
[/av_image_spot]
[av_image_spot tooltip_pos=’av-tt-pos-above av-tt-align-centered’ tooltip_width=’av-tt-large-width’ tooltip_style=’main_color av-tooltip-shadow’ link=” link_target=” hotspot_color=” custom_bg=” custom_font=” custom_pulse=” hotspot_pos=’87.1,40.1′]
Amazing Theme Options for unlimited colors and styles
[/av_image_spot]
[av_image_spot tooltip_pos=’av-tt-pos-above av-tt-align-centered’ tooltip_width=’av-tt-large-width’ tooltip_style=’main_color av-tooltip-shadow’ link=” link_target=” hotspot_color=” custom_bg=” custom_font=” custom_pulse=” hotspot_pos=’63.2,11.3′]
Powerful Visual Layout Editor
[/av_image_spot]
[/av_image_hotspot]

[av_hr class=’invisible’ height=’50’ shadow=’no-shadow’ position=’center’ custom_border=’av-border-fat’ custom_width=’50px’ custom_border_color=’#000000′ custom_margin_top=’30px’ custom_margin_bottom=’30px’ icon_select=’no’ custom_icon_color=” icon=’ue808′ font=’entypo-fontello’ admin_preview_bg=”]

[av_one_half first min_height=” vertical_alignment=’av-align-top’ space=” margin=’0px’ margin_sync=’true’ padding=’0px’ padding_sync=’true’ border=” border_color=” radius=’0px’ radius_sync=’true’ background_color=” src=” attachment=” attachment_size=” background_position=’top left’ background_repeat=’no-repeat’ animation=’fade-in’ mobile_display=”]

[av_textblock size=” font_color=” color=” admin_preview_bg=’rgb(255, 255, 255)’]
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 vieport
[/av_textblock]

[/av_one_half][av_one_half min_height=” vertical_alignment=’av-align-top’ space=” margin=’0px’ margin_sync=’true’ padding=’0px’ padding_sync=’true’ border=” border_color=” radius=’0px’ radius_sync=’true’ background_color=” src=” attachment=” attachment_size=” background_position=’top left’ background_repeat=’no-repeat’ animation=’fade-in’ mobile_display=”]

[av_textblock size=” font_color=” color=” admin_preview_bg=’rgb(255, 255, 255)’]
There are – as always – several color options, as well as options for each individual hotspot. For example how and when the text overlay should be shown.
[/av_textblock]

[/av_one_half]
[/av_section]

[av_one_full first min_height=’av-equal-height-column’ vertical_alignment=’av-align-middle’ space=” margin=’0px’ margin_sync=’true’ padding=’0px’ padding_sync=’true’ border=” border_color=” radius=’0px’ radius_sync=’true’ background_color=” src=” attachment=” attachment_size=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_display=”]

[av_image_hotspot src=’http://theattic.tv/wp-content/uploads/2017/02/features-builder-1.jpg’ attachment=’787′ attachment_size=’full’ animation=’fade-in’ hotspot_layout=’numbered’ hotspot_tooltip_display=’av-permanent-tooltip’ hotspot_mobile=’aviaTBhotspot_mobile’]
[av_image_spot tooltip_pos=’av-tt-pos-above av-tt-align-centered’ tooltip_width=’av-tt-large-width’ tooltip_style=’main_color av-tooltip-shadow’ link=” link_target=” hotspot_color=’custom’ custom_bg=’#22689e’ custom_font=’#ffffff’ custom_pulse=’#22689e’ hotspot_pos=’18.8,62.5′]
Tons of elements to build your site
[/av_image_spot]
[av_image_spot tooltip_pos=’av-tt-pos-right av-tt-align-centered’ tooltip_width=’av-tt-large-width’ tooltip_style=’main_color av-tooltip-shadow’ link=” link_target=” hotspot_color=’custom’ custom_bg=’#22689e’ custom_font=’#ffffff’ custom_pulse=’#22689e’ hotspot_pos=’70.6,33.1′]
Canvas preview to build your layout
[/av_image_spot]
[/av_image_hotspot]

[av_textblock size=” font_color=” color=” admin_preview_bg=’rgb(255, 255, 255)’]
Here you can see an example of a non-fulwidth image with hotspots. Also on this image with have set a different color for the hotspot. You can assign colors individually for each hotspot.
[/av_textblock]

[/av_one_full]