[TS-VCSC-Icon-Title title=”Image Hotspot Features” align=”center” font_family=”Default:regular” size=”48″ font_weight=”300″ highlight_allow=”true” highlight_color=”#2691bd” highlight_strings=”RmVhdHVyZXM=”]
[TS_VCSC_Fancy_List list_type=”image” marker_image=”http://tekanewascripts.com/composium/wp-content/plugins/ts-visual-composer-extend/images/bullets/bullet_arrow_blue.png”]
Did you ever want to “spice” up your images and make them more interactive? Maybe highlight some sections of the image and provide more information about it? Than don’t look any further. Visual Composer Extensions provides you with the “TS Image Hotspots” element, which does just that.
- Real-time preview for hotspot location
- Drag-and-drop positioning of hotspot
- Define all hotspot colors
- Just use a tooltip or assign one of 7 other hotspot events (see below)
- Tooltip allows for four positions (top / bottom / left/ right)
- Tooltip comes in 10 different color patterns
- Option to make image full width
- Image and hotspots are fully responsive
[/TS_VCSC_Fancy_List][TS-VCSC-Spacer height=”30″]
[TS_VCSC_Image_Hotspot_Container hotspot_image=”22045″ hotspot_break=”true” hotspot_large=”1203″][TS_VCSC_Image_Hotspot_Single hotspot_title=”Looking at me?” hotspot_positions=”36,53″ hotspot_content=”icon” hotspot_icon=”ts-awesome-hand-o-right” content_tooltip_html=”false” content_tooltip_content=”Are you looking at me? Look at the other one instead!” content_tooltip_css=”true”][/TS_VCSC_Image_Hotspot_Single][TS_VCSC_Image_Hotspot_Single hotspot_title=”Go back to the other one!” hotspot_positions=”50,49″ hotspot_content=”icon” hotspot_color_content=”#606060″ hotspot_icon=”ts-awesome-hand-o-left” hotspot_color_dot=”#ffffff” hotspot_color_circle=”#2691ef” hotspot_color_pulse=”#1f30c6″ content_tooltip_html=”false” content_tooltip_content=”Oh great, now you’re staring at me! Look at the other one!” content_tooltip_css=”true”][/TS_VCSC_Image_Hotspot_Single][/TS_VCSC_Image_Hotspot_Container]
[TS-VCSC-Spacer height=”20″][TS_VCSC_Image_Hotspot_Container hotspot_image=”16108″ hotspot_large=”800″ hotspot_medium=”500″][TS_VCSC_Image_Hotspot_Single hotspot_title=”Vimeo Video” hotspot_positions=”65,39″ hotspot_content=”string” hotspot_string=”I” hotspot_event=”vimeo” hotspot_video_link=”http://vimeo.com/26152501″ content_tooltip_html=”false” content_tooltip_title=”Vimeo in Lightbox …” content_tooltip_content=”Click me to watch a video on Vimeo.” content_tooltip_style=”ts-simptip-style-gray” content_tooltip_css=”true”][/TS_VCSC_Image_Hotspot_Single][TS_VCSC_Image_Hotspot_Single hotspot_title=”DailyMotion Video” hotspot_positions=”68,88″ hotspot_content=”string” hotspot_string=”II” hotspot_color_circle=”#22a6d6″ hotspot_color_pulse=”#116ebf” hotspot_event=”dailymotion” hotspot_video_link=”http://www.dailymotion.com/video/x192jhb_adorable-kittens-compilation-so-funny-animals_animals” content_tooltip_html=”false” content_tooltip_title=”DailyMotion in Lightbox …” content_tooltip_content=”Click me to watch a video on DailyMotion.” content_tooltip_style=”ts-simptip-style-blue” content_tooltip_css=”true” hotspot_youtube_related=”false” hotspot_youtube_auto=”true” hotspot_dailymotion_auto=”true” hotspot_vimeo_auto=”true” lightbox_custom_background=”none” lightbox_background_size=”cover” lightbox_background_repeat=”no-repeat” lightbox_background_color=”#ffffff”][/TS_VCSC_Image_Hotspot_Single][TS_VCSC_Image_Hotspot_Single hotspot_title=”YouTube Video” hotspot_positions=”27,80″ hotspot_content=”string” hotspot_string=”III” hotspot_color_circle=”#e06133″ hotspot_color_pulse=”#dd1111″ hotspot_event=”youtube” hotspot_video_link=”https://www.youtube.com/watch?v=c1c0a4fo1zo” content_tooltip_html=”false” content_tooltip_title=”YouTube in Lightbox …” content_tooltip_content=”Click me to watch a video on YouTube.” content_tooltip_style=”ts-simptip-style-red” el_file=”” content_tooltip_css=”true” hotspot_youtube_related=”false” hotspot_youtube_auto=”true” hotspot_dailymotion_auto=”true” hotspot_vimeo_auto=”true” lightbox_custom_background=”none” lightbox_background_size=”cover” lightbox_background_repeat=”no-repeat” lightbox_background_color=”#ffffff”][/TS_VCSC_Image_Hotspot_Single][TS_VCSC_Image_Hotspot_Single hotspot_title=”Another Image” hotspot_positions=”41,87″ hotspot_event=”image” hotspot_picture=”16125″ content_tooltip_html=”false” content_tooltip_title=”Image in Lightbox …” content_tooltip_content=”Click me to see another image.” content_tooltip_css=”true” hotspot_image=”16106″ hotspot_youtube_related=”false” hotspot_youtube_auto=”true” hotspot_dailymotion_auto=”true” hotspot_vimeo_auto=”true” lightbox_custom_background=”none” lightbox_background_size=”cover” lightbox_background_repeat=”no-repeat” lightbox_background_color=”#ffffff”][/TS_VCSC_Image_Hotspot_Single][TS_VCSC_Image_Hotspot_Single hotspot_title=”Just a Tooltip” hotspot_positions=”52,58″ hotspot_color_circle=”#74e547″ hotspot_color_pulse=”#38b542″ content_tooltip_html=”false” content_tooltip_title=”Really just a tooltip …” content_tooltip_content=”This is just a tooltip without any other events.” content_tooltip_style=”ts-simptip-style-green” content_tooltip_css=”true”][/TS_VCSC_Image_Hotspot_Single][TS_VCSC_Image_Hotspot_Single hotspot_title=”Modal Popup” hotspot_positions=”31,52″ hotspot_event=”popup” hotspot_text=”JTNDc3Ryb25nJTNFRGVmaW5pdGlvbiUzQSUzQyUyRnN0cm9uZyUzRSUyMG5vdW4lMjBUaGUlMjBmb3JtYXRpdmUlMjBwZXJpb2QlMjBvZiUyMGNhdCUyMGFnZSUyMGJldHdlZW4lMjBiaXJ0aCUyMGFuZCUyMGFwcHJveGltYXRlJTIwYWdlJTIwb2YlMjBvbmUlMjB5ZWFyLiUwQSUzQ2JyJTJGJTNFJTNDYnIlMkYlM0UlMEElM0NzdHJvbmclM0VQcm9udW5jaWF0aW9uJTNBJTNDJTJGc3Ryb25nJTNFJTIwS0lULXRlbi1ob29kJTBBJTNDYnIlMkYlM0UlM0NiciUyRiUzRSUwQSUzQ3N0cm9uZyUzRUFsdGVybmF0ZSUyMFNwZWxsaW5ncyUzQSUzQyUyRnN0cm9uZyUzRSUyMGtpdHRlbi1ob29kJTJDJTIwa2l0dGVuJTIwaG9vZCUwQSUzQ2JyJTJGJTNFJTNDYnIlMkYlM0UlMEElM0NzdHJvbmclM0VFeGFtcGxlcyUzQSUzQyUyRnN0cm9uZyUzRSUyMEtpdHRlbmhvb2QlMjBpcyUyMHRoZSUyMG1vc3QlMjBzaWduaWZpY2FudCUyMHBhcnQlMjBvZiUyMGRldmVsb3BtZW50JTIwaW4lMjBhJTIwY2F0JTI3cyUyMGxpZmUuJTIwVGhlJTIwZGV2ZWxvcG1lbnQlMjBhbmQlMjBncm93dGglMjBmcm9tJTIwYmlydGglMjB0byUyMG9uZSUyMHllYXIlMkMlMjBhbmQlMjBwYXJ0aWN1bGFybHklMjBkdXJpbmclMjB0aGUlMjBmaXJzdCUyMHNpeCUyMHdlZWtzJTIwb2YlMjBhJTIwa2l0dGVuJTI3cyUyMGxpZmUlMjBpcyUyMHVuZXF1YWxlZC4=” content_tooltip_html=”false” content_tooltip_title=”Modal Popup in Lightbox …” content_tooltip_content=”Click me to learn more about ‘kittenhood’.” content_tooltip_css=”true”][/TS_VCSC_Image_Hotspot_Single][TS_VCSC_Image_Hotspot_Single hotspot_title=”Wikipedia Page” hotspot_positions=”26,17″ hotspot_event=”iframe” content_tooltip_html=”false” content_tooltip_title=”iFrame in Lightbox …” content_tooltip_content=”Click me to learn more about kittens.” content_tooltip_css=”true” hotspot_link=”url:http%3A%2F%2Fen.wikipedia.org%2Fwiki%2FKitten||target:%20_blank”][/TS_VCSC_Image_Hotspot_Single][TS_VCSC_Image_Hotspot_Single hotspot_title=”More about Kittens.” hotspot_positions=”46,21″ hotspot_event=”link” content_tooltip_html=”false” content_tooltip_title=”Link to another page …” content_tooltip_content=”Click me to see another page with cute kittens.” content_tooltip_css=”true” hotspot_link=”url:http%3A%2F%2Fwww.kittenwar.com%2F||target:%20_blank”][/TS_VCSC_Image_Hotspot_Single][/TS_VCSC_Image_Hotspot_Container]
[TS-VCSC-Spacer height=”20″][TS-VCSC-Icon-Title title=”Hotspot Events” align=”center” font_family=”Default:regular” size=”48″ font_weight=”300″ highlight_allow=”true” highlight_color=”#2691bd” highlight_strings=”RXZlbnRz”][TS_VCSC_Fancy_List list_type=”image” marker_image=”http://tekanewascripts.com/composium/wp-content/plugins/ts-visual-composer-extend/images/bullets/bullet_arrow_blue.png”]
- Open link to another page
- Open link in iFrame lightbox
- Open another image in lightbox
- Open YouTube video in lightbox
- Open DailyMotion video in lightbox
- Open Vimeo video in lightbox
- Open custom text (with HTML) in modal popup (lightbox)
[/TS_VCSC_Fancy_List][TS-VCSC-Spacer height=”20″]
Check the hotspots on the image to the left to see all the different hotspot events in action.
