In a UX-focused discussion titled ‘Image with hot spots,’ DMRF seeks to implement clickable image hotspots on their Discourse platform—similar to an interactive map—where users can click on areas (e.g., buildings) to view textual descriptions. Simon suggests using HTML map and area tags for simple image maps, possibly in a custom header, though embedding interactive elements in topics or banners would require JavaScript. DMRF shares an example and asks about elegance versus barebones HTML; Simon clarifies that while complex interactivity needs JS, simpler hover/click panels could be built with HTML/CSS, though precise positioning is tricky. Schungx notes the utility for newcomers and suggests a hide feature. Tobiaseigen adds a related use case: annotating photos in Discourse topics with clickable hotspots for family photo identification, proposing a plugin inspired by Discourse Footnote. No native solution exists yet, but multiple approaches—HTML, JS, iframes, or future plugins—are viable.
Hello,
I’m writing to see if anyone has ever looked into adding an element like this on their discourse platform.
My boss is interested in exploring if we could present the user with an image with different hotspots on the discourse platform itself. It would act as a sort of map, with information contained in each ‘spot’. I’d love to know if something like this is even possible before exploring how or who could help with this.
Are there any examples online that are similar to what you are trying to achieve? Where do you want the image, or images, to appear on your forum?
Like a map and click on a region to jump to that category. Or a products map.
Very useful for newcomers. Probably need a feature to hide afterward.
You can create an image map with html using map and area tags. It would be easy to add one to a custom header. To add the tags to a topic or banner would require some javascript.
Hi Simon,
Here’s an example of something similar. We have someone doing a drawing of a collection of buildings, and we want people to be able to click on each building and read some textual descriptions.
This example is for a plug-in for other platforms, but I’m looking for a way to accomplish this on our site, as you said a custom header might be best. Is it really as easy as using html? I’m not sure how elegant we can make it - or if it needs to be barebones using html.
@schungx Yes, an option to hide it would also be good - I think people would navigate around easier using the category view
Yes, that’s a little more complex. It would require some javascript, but it’s still doable. You could also create the map on another site and embed it as an iframe.
Edit: If all you need is to display and hide information panels when a button is clicked, you could get quite far with a customization using html and css. The example you gave is using buttons positioned over an image. The tricky part would be positioning the buttons.
I was just looking for such a thing today, but using markdown and internal to discourse. I’m working with my family on identifying people in photos, and I’d love to be able to create a topic with a jpg in the OP, and let people reply to discuss the photo and describe everything they know about it and the people in it. The OP could be a wiki that can be edited to add annotations assigned to specific places on the photo. These would appear as hotspots when you mouseover the photo that can be clicked on to read the annotation about that spot.
I am pretty sure this does not exist and am just spitballing here. Maybe it could be a new plugin inspired by Discourse Footnote which also provides inline expansion.