Hotspots overlay on a picture
Question
Application Type
Reactive

Hi Everyone,

Got a quick question does anyone know if OutSystems allows Hotspot functionality for pictures (Some times called Image Mapping)

HTML Image Maps (w3schools.com)


I would like to be able to take a picture and add links to parts of it via hot spots where the user can click specific items in the image eg if the user clicks the laptop it will open a page about laptops, if they click the mobile will open a page about mobile and so on.

workplace.jpg

mvp_badge
MVP

Hi Reece,

Yes, its possible to implement the HTML Image Maps concept in the OutSystems application. 

See this sample screen HTMLImageMapsDemo (RWA)

Refer to the attached .oml file


Hope this helps you!


Kind regards,

Benjith Sam

RWALabHTMLIMGMapDemo.oml

Yes, it's possible. You need additional attribute to your Image component (usemap) with value pointing to the 'name' attribute in your image map markup ("#<mapname>").

Creating such maps in maintainable way might be difficult, but there are online tools to create these hotspots (https://www.image-map.net/). 

what about if you want to make it so the links are responsive 


eg the picture grows and I want the points to still map to the correct place?

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.