What are Image Hotspots?
Image Hotspots are points on an image that provide an interactive component, usually in the form of a tooltip style popup containing content. The examples I use in this article will hopefully give you an idea of what they are, and how Image Hotspots might add value to your website design and user experience.
How can Image Hotspots add value?
Image Hotspots can be used to boost user engagement as well as open avenues to present content in a creative and contextual way. The following working demos are live examples implemented using Elementor.
1. Product Hotspots for your eCommerce Website
Why settle for boring static images when you can make them interactive and easily highlight a product’s most enticing features. Using a image hotspot allows the user to have a visual context when reviewing these features.
Try out the below Product Hotspot Demo
- 1050D ballistic nylon with two plies.
- Military grade, resistant to tears, scuffs, and abrasions
- Premium quality materials designed for toughness and durability.
- Seven soft grip handles for virtual unlimited training options.
- Genuine YKK Large size coil zipper for quality and strength
- Sewn-on Velcro strip to attach Velcro weight patch
2. Map Hotspots to show office locations and info
In this next example, we imagine we are a business with 3 offices in different parts of Australia. Users will be able to see these office locations visually, opening markers of interest to see more content, in this case we’ve add the office name and Image.
You can even use Image Hotspots as a navigation method, by adding links to the markers and tooltips you can give users a way to navigate to content based on an image!
Try out the below Map Hotspot Demo
Sydney Office
1 of 3
Brisbane
Brisbane Office
Perth Office
3. Hotspots used in an animated presentation
Using Image Hotspot animations, effects and setting it to play in a sequence allows you to tell a story or present your tooltips in a tour format.
This image hotspot example is set to autoplay, but you can control it too.
Sol
A Yellow Dwarf Star.
1 of 8Mercury
A world made of molten rock
2 of 8Venus
A planet-sized thunderstorm of poisonous gases.
3 of 8Earth
Dinosaurs used to live here.
4 of 8Mars
Known as the Red planet, it’s full of dust.
5 of 8Jupiter
A gas giant that once had the potential to become its own star.
6 of 8Saturn
Its rings are hard to miss.
7 of 8Neptune
Last planet in the sol system since someone decided pluto didn’t count anymore.
8 of 8
Adeptive can implement Image Hotspots on your website, customised to your specific needs. Feel free to get in touch for a chat.
