Tag HTML Image <map>

Hi friends,
Is there a way to do something like the and HTML tags to map some areas over a image so we can create some clickable areas over the image ?

Something like this:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">

More about maps here

Can you elaborate on how you would envisage using such a capability, if it existed.

Hi there @Chr1sG.

I’ve designed an example of how we could use this feature. Take a look at this image, please.

Imagine we have a home page where all users can see a Image like a map. The example here is a map/diagram desined in a ludic way so the users can look at this picture and understand the mains processes and departments tha relates in order to deliver value to their customers.

By looking at a map like these, they can click the desired process, departments and then have access to documents, policies, metrics, procedures, tutoriais, videos or any other resource related to their navigation.

This is just an example of an use case. A feature like this can enable very interesting user experience. Navigable and clickable Images, maps, diagramas, etc are always an attractive way for end users. And, if they have the ability to look at a image, “click” the desired pieace of information over the image and then being redirected to an embbeded link, I think we can offer a very intuitive experience.

I did this some time ago using Wikimedia, Sharepoint and Html webpages. But, nothing compares to the many other benefits a platform like Fibery offers. :heart_eyes:

Hope we can have a way to do this soon. The HTML map tag is just a suggestion, of course.

Have you considered using a document database for storing the information (instead of document views) and then using the whiteboard to show the various document entities?
Admittedly, the shape of the entities on the whiteboard can’t be changes, so you wouldn’t quite get what you have mocked up, but you could drop the entity cards into frames and adjust the size of these.

1 Like

Do they work like links too? If so, it can be a workaround for now

I saw here… yes… by double clicking on the card we can access the contents! Interesting!

1 Like