CODEWITHSUNDEEP
sharepointsharepoint-onlinesharepoint-designersharepoint-rest-api
user21725469
user21725469

Reputation: 9

How do I make images in SharePoint Online Modern UI clickable to alter content on the page itself?

I'm new to SharePoint and I'm looking for a way to create clickable SVG part in site pages. When a SVG part is clicked, I want specific content related to that part to display on the same page. Essentially, when I click on another part of the svg, I want the previously displayed content to hide and the content related to the newly clicked part to appear like hide and show.

I've attached the image for reference. Essentially, I want to be able to click on each shape and have the corresponding content display on the same page.

Sample Shape Diagram

I've been stuck on this for weeks and nothing I've found online seems to work for my specific scenario. Any help on how to achieve this would be greatly appreciated.

I've explored various options like quick links, hero sections, and image web parts, but none of them meet my requirements. I even tried using the Image Map plugin, but it's not compatible with the modern UI.

Upvotes: 0

Views: 137

Answers (1)

Farkas János
Farkas János

Reputation: 196

Not exactly what you are looking for, but it works if you can edit the pictures as backgrounds (if you can edit the texts to don't intervene with the image's main patterns):

  1. add Sections to the SPO page
  2. make them collapsible and set the default display to 'collapsed'
  3. add the images as backgrounds at set the focal points enter image description here

Upvotes: 0

Related Questions