How to create interactive images in SharePoint

hi everyone my name is juliano in this video i'll show you how you can create interactive images in sharepoint i'll show you how you can add layers and a tooltip link or embed youtube video when you navigate over a specific zone of the image okay let's move forward and i'll show you every step here i am on my pc and i have this sharepoint team site in the browser open i'm creating this new modern page product roadmap my team is working on a new product and i want to create in the body of this mage a nice interactive image as probably you already know it's not possible out of the box realize an interactive image on sharepoint in order to reach this goal i will install two apps coming from the sharepoint store at least a sharepoint admin is required to install and set up this solution if you don't know how to do that you can ask to your admin in your organization now i will click in the top right corner on the wheel icon here then i will click on add an app finally i can jump on the sharepoint store and i have to search these two apps in order to have the solution up and running so basically we have to install an image editor and then we have to install our sharepoint framework webpart okay let's search for the image editor and this is called this up it's called image maps this is the app that show up image apps as i say this is a powerful image editor let's click on it and then you can follow every step by clicking on the button edit i already performed this step now we have to install the second app which is our sharepoint framework web part you can search for image map if i jump in the second page i have available this second app called image map without s clicking on this app i'm able to request to install this app in my sharepoint site once you installed this to opt you are ready to go with this solution let me jump now in the side contents of my sharepoint site along with these two hubs there is a new picture library that show up called image map background this is the data source of the image editor i will click now on this feature library because i want to upload my picture i will click on upload and files and finally on this picture that i already have on my desktop now this picture is uploaded i will select this and then i can click on here in the comment bar there is a new button available called image a map let's click on it okay here we go i have my picture here available i can start now to place some layer on it i will select this ellipses because here i have circle i can start now to sketch my ellipses then you can adjust this ellipses and finally clicking on here on the tooltip style i'm able to decide the opacity to the position i want to show up this tooltip on top and then you can adjust some configuration without the width now i will click on tooltip content because i want to add elements in this panel here i have this text i will remove now this text because i want to embed a youtube video here in order to do that you have to click on the tab elements and then drag and drop the youtube icon in this area now i will pass a youtube video that i already have here here we go all good now i can close this panel and here we go we have now this youtube video embedded in the tooltip panel okay now i want to reuse this layer i can click on this ellipsis and then here on layer i can duplicate this one and then i can just drag and drop this ellipsis layer on the second circle i can do the same for all other here we go now i want to set a different content here okay now i will click on tooltip content and then i will delete this youtube video because i want to add a button now okay clicking on the button i'm able to adjust the text and i can just add a link here we go and also this panel looks okay in the third one i will add just text so i will remove this one i will create a new area and then i will drag and drop just text here clicking on lorem ipsum okay all good perfect i can close now this one and i have now just text in this other tooltip panel now i will save this image i will click ok because the major radixes and the file is successfully saved now i can jump back on my page product roadmap i can edit this modern page and i can add this new web part that i installed call it image map here we go here i can easily edit the this web part and the property panel show up the source is correct is the new picture library i have just to adjust and select the new picture that i uploaded so now i can just republish this page and here we go now that this interactive image is here loaded i can go over the first circle and we have this youtube video embedded hi there welcome to microsoft teams a collaboration app that helps your team stay or then i can go over the second one i have this button with this link more info please open the link that i added going back and finally on the third one i have just text now my product roadmap looks gorgeous on the website of the company that has created this solution you can check several licensing options by clicking on the pricing link alright that was a quick tutorial how you can create interactive images in sharepoint if you enjoy the video please give a thumbs up and subscribe to my channel to stay updated with my next videos if you want to see me cover any other topics in the future put a comment down below i read them all and this is also how i build my to-do list for my next videos i hope to see you next time bye

Channel: CIRRUS SOFT

Views: 5,005

Rating: 4.9354839 out of 5

Keywords:

Id: fNve024gSvk

Length: 7min 21sec (441 seconds)

Published: Tue Jan 26 2021