Image with hot spots

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.

1 个赞

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?

1 个赞

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.

1 个赞

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.

2 个赞

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

2 个赞

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.

我今天正好在找类似的东西,但希望是基于 Markdown 并集成在 Discourse 内部。我正在和家人一起辨认照片里的人物,我希望能创建一个主题,在主帖(OP)中插入一张 JPG 图片,然后让大家回复讨论这张照片,描述他们了解的关于照片及其中人物的所有信息。主帖可以是一个可编辑的 Wiki,用于添加标注,并将这些标注关联到照片的特定位置。当鼠标悬停在照片上时,这些标注会以热点形式显示,点击即可查看该位置的注释内容。

我相当确定目前还没有这样的功能,这里只是抛砖引玉。也许可以开发一个新插件,灵感来源于 https://meta.discourse.org/t/discourse-footnote/84533,该插件也提供行内展开功能。