--- title: "Clickable Image" description: "The Clickable Image Component can be used to display an Image with Tooltip Buttons on it on a Page, like an Infographic for Example." path: https://www.eonshowroom.eon.com/en/content-elements/clickable-image-brand-evolution.html lastModified: 2026-05-05T06:14:27.423Z --- # Clickable Image # Clickable Image ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/ocr-example%3A2-1?fmt=webp) digit 1 light Waste Heat ##### Waste Heat Unutilized Heat in Industrial Processes, e.g. exhaust Gas, excess Steam and hot Liquids. digit 2 light Heat Exchange ##### Heat Exchanger Transfer of Waste Heat to ORC Modules. A heat exchanger for an ORC transfers heat from a hot source to a working fluid in an ORC system. It allows the working fluid to vaporize and drive a turbine, generating electricity. Heat exchangers are crucial for the efficiency and performance of ORC systems. digit 3 light Modular ORC System ##### Modular ORC System Generation of clean Power from Waste Heat at low Cost. - Low-temperature heat sources - Turbine - Generator digit 4 light Power ##### Power Cheap, clean and CO2-neutral for Onsite Consumption. [How to Configure](#how-to) ### Description The Clickable Image Component can be used to display an Image with Clickable Areas on it on a Page, like an Infographic for Example. - Cropping of different Ratios is possible - Multiple Clickable Area are addable - Features like Alt-Text, and Title are available - Lazy Load is default Option (but it is deselectable) - Different Indicator Style and Detail Information Variants are available [Check it out on Storybook](https://storybook.web-ui.eon.com/eon/master/?path=/story/content-clickable-image--interactive) ### Inspirations ![ORC](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/ocr-example%3A2-1?fmt=webp) digit 1 light Waste Heat ##### Waste Heat Unutilized Heat in Industrial Processes, e.g. exhaust Gas, excess Steam and hot Liquids. digit 2 light Heat Exchange ##### Heat Exchanger Transfer of Waste Heat to ORC Modules. A heat exchanger for an ORC transfers heat from a hot source to a working fluid in an ORC system. It allows the working fluid to vaporize and drive a turbine, generating electricity. Heat exchangers are crucial for the efficiency and performance of ORC systems. digit 3 light Modular ORC System ##### Modular ORC System Generation of clean Power from Waste Heat at low Cost. - Low-temperature heat sources - Turbine - Generator digit 4 light Power ##### Power Cheap, clean and CO2-neutral for Onsite Consumption. ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/clickable-image-demo%3A2-1?fmt=webp-alpha) Wind Turbine ##### Wind Turbine ![Wind Turbine](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/wind_energy_green_fields%3A2-1?fmt=webp) A Wind Turbine is a Device that converts the Kinetic Energy of Wind into electrical Energy. Hundreds of Thousands of large Turbines, in Installations known as Wind Farms, now generate over 650 Gigawatts of Power, with 60 GW added each Year. Solar Panel ##### Solar Panel ![Solar Panel](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/eon-solarpark-tucson_351_RGB%3A2-1?fmt=webp) A Solar Cell Panel, Solar Electric Panel, Photo-Voltaic (PV) Module or Solar Panel is an assembly of Photo-Voltaic Cells mounted in a Framework for Installation. Solar Panels use Sunlight as a Source of Energy to generate direct current Electricity. A Collection of PV Modules is called a PV Panel, and a System of PV Panels is called an Array. [Phone us](tel:00495555555) Electric Car ##### Electric Car ![Electric Car](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Geiselwind_EMobility%3A2-1?fmt=webp) There is no Mobility without Vehicles There is already a large Number of different electrically driven Cars, Motorcycles, Scooters and Bicycles available Today. When it comes to Cars, in particular, Customers have a choice of completely different Drive and Energy Storage Concepts. [E-Mobility by E.ON](https://www.eon.com/en/new-energy/e-mobility.html) ### Usage Rules & Features ##### Features - Multiple Clickable Areas are addable - Different Indicator Style and Detail Information Variants are choosable ##### Properties - Clickable Image Details are configured as Experience Fragments - For each Clickable Area, exact Position can be choosen on the Image via direct Selection ##### Design - Indicator Color Scheme Color can be Red 500, Grey 900, or White - For Icon as Indicator Style dark or bright Label Color is available ##### In which Grid Columns does it fit? | Grid Columns | Does it fit? | | --- | --- | | 2 | no | | 3 | no | | 4 | no | | 5 | no | | 6 | no | | 8 | yes | | 9 | yes | | 10 | yes | | 12 | yes | ##### DO's - Always crop the Image - For Icon Indicator Style use bright Label Color Scheme on bright Images - For Icon Indicator Style use dark Label Color Scheme on dark Images - Always check it on all Viewports ##### DONT's - Do not use it in smaller Grid then 8 Column Grid - Do not add to many Items - Do not add Items directly next to each other, as it breaks Design on smaller Viewports - Do not use Labels if an Image with a lot of Movement / Colors is used, as it can cause Problems with Readability - If choosing "Hover" to open Clickable Image Details, please do not include Interactions (Link/Button) in Clickable Image Detail Components as User can not reach it then ## Configuration ## Trackable Component This Component can be tracked. [Read more about Tracking](https://www.eonshowroom.eon.com/en/aem-basics/tracking.html) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Pattern_7-1%3A2-1?fmt=webp-alpha) ![Dialog of Image Clickable Image Component - Image Tab](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/click-img_add-image%3A1-1?fmt=webp) ### Adjust Image At first, Editor can add an Image and adjust it in same Way as for normal Image Component using Image Tab. [Read more about Image Component](https://www.eonshowroom.eon.com/en/content-elements/image.html) [Read more about Image Handling](https://www.eonshowroom.eon.com/en/aem-basics/image-handling.html) [Read more about WebP Options](https://www.eonshowroom.eon.com/en/aem-basics/webp-image-options.html) ![Dialog of Image Clickable Image Component - Image Maps Tab](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/click-img_add-items%3A3-4?fmt=webp) ### Configuration of Clickable Area Items In Image Maps Tab, Editor can add one or multiple Clickable Area Items. For each, Editor needs to choose a Position (read more about it below). Beside this, Editor enter a Label and choose a Path to an Experience Fragment that contains a Clickable Image Detail Component. If Icon Variant is choosen in Styling Tab, Editor can also select an Icon per Clickable Area Item. If Editor wants to use additional Icons, please add those in FoundationNg Bullet List Icon Config. [More about FoundationNg Bullet List Icon Config](https://www.eonshowroom.eon.com/en/aem-basics/configuration-pages.html) ![Dialog of Image Clickable Image Component - Choose Clickable Area of an Image by positioning of Clickable Detail Element](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/click-img_add-items-position%3A2-1?fmt=webp) ### Positioning of Clickable Detail Element To choose a Position for a Clickable Detail Element, Editor needs to click on Map clickable Area Button. This opens a Dialog, where the Position can be defined by either clicking on the Position on the Image and save it, or by enter Values of Top and Left Position manually and save it. If entering it manually, it must be a Value between 2.00 and 98.00. ![Dialog of Image Clickable Image Component - Styling Tab](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/click-img_style_tooltip-modal%3A1-1?fmt=webp) ##### Tooltip Indicator Style with Modal Detail Variant - Indicator Color Scheme Indicator Color Scheme Color can be Red 500, Grey 900, or White. ### Style Clickable Image In Styling Tab at first Indicator Style and Detail Information Variant needs to be choosen. Indicator Style can be Button, Icon, or Tooltip. While Detail Information Variant can be Tooltip or Modal (for Tooltip Indicator Style only Modal Detail Information Variant is available). Other Styling Options depend on Selection of Indicator Style and Detail Information Variant. ![Dialog of Image Clickable Image Component - Styling Tab](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/click-img_style_button-tooltip%3A1-1?fmt=webp) ##### Button Indicator Style with Tootip Detail Variant - Interaction Mode Choose whether to open Clickable Image Details on Click or on Hover. **Keep in Mind:**When choosing"Hover" to open Clickable Image Details, please do not include Interactions (Link/Button) in Clickable Image Detail Components as User can not reach it then. - Indicator Color Scheme Indicator Color Scheme Color can be Red 500, Grey 900, or White. ![Dialog of Image Clickable Image Component - Styling Tab](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/click-img_style_button-modal%3A1-1?fmt=webp) ##### Button Indicator Style with Modal Detail Variant - Indicator Color Scheme Indicator Color Scheme Color can be Red 500, Grey 900, or White. ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/click-img_style_icon-tooltip%3A3-4?fmt=webp) ##### Icon Indicator Style with Tootip Detail Variant - Interaction Mode Choose whether to open Clickable Image Details on Click or on Hover. **Keep in Mind:**When choosing"Hover" to open Clickable Image Details, please do not include Interactions (Link/Button) in Clickable Image Detail Components as User can not reach it then. - Label Color Indicator Style dark or bright Label Color is available for Selection. - Indicator Color Scheme Indicator Color Scheme Color can be Red500, Grey900, or White. - Hide Text Label Editor can hide Labels by activating this Checkbox. ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/click-img_style_icon-modal%3A3-4?fmt=webp) ##### Icon Indicator Style with Modal Detail Variant - Label Color Indicator Style dark or bright Label Color is available for Selection. - Indicator Color Scheme Indicator Color Scheme Color can be Red500, Grey900, or White. - Hide Text Label Editor can hide Labels by activating this Checkbox. ## Clickable Image Detail Keep in Mind Per Clickable Area Item a separat Experience Fragment is needed as Clickable Image Detail ! ### Create Experience Fragment At first, Editor needs to create an Experience Fragment in Experience Fragments Part. [Find out more about Experience Fragment Handling](https://www.eonshowroom.eon.com/en/aem-basics/experience-fragment-handling.html) ![Add Content in Experience Fragment of Modal](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/click-img-detail_add-component%3A2-1?fmt=webp) ### Add Clickable Image Detail Component in Experience Fragment Inside the Experience Fragment, Editor needs to add a Clickable Image Detail Component. ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/click-img-detail_content%3A3-4?fmt=webp) ### Maintain Content of Clickable Image Detail Component As Content, Editor can add a Headline with adjustable HTML Tag for SEO, some Abstract and some Text, as well as a Link. ###### Keep in Mind: If choosing "Hover" to open Clickable Image Details, please do not include a Link in Clickable Image Detail Components as they will not get rendered. [More about Links](https://www.eonshowroom.eon.com/en/content-elements/link.html) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/click-img-detail_image%20(2)%3A4-3?fmt=webp) ### Add Image in Clickable Image Detail Component Editor can add an Image and adjust it in same Way as for normal Image Component using Image Tab. [Read more about Image Component](https://www.eonshowroom.eon.com/en/content-elements/image.html) [Read more about Image Handling](https://www.eonshowroom.eon.com/en/aem-basics/image-handling.html) [Read more about WebP Options](https://www.eonshowroom.eon.com/en/aem-basics/webp-image-options.html) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/click-img-detail_parsys%3A2-1?fmt=webp) ### Add Content in Parsys In Parsys additional Components can be added. ###### Keep in Mind: If choosing "Hover" to open Clickable Image Details, please do not include Interactions (Link/Button) in Clickable Image Detail Components as they will not get rendered.