Insert a image map in mts pages

%3CLINGO-SUB%20id%3D%22lingo-sub-33267%22%20slang%3D%22en-US%22%3EInsert%20a%20image%20map%20in%20mts%20pages%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-33267%22%20slang%3D%22en-US%22%3E%3CP%3EIn%20%22classic%22%20sharepoint%20pages%20i%20use%20often%20image%20maps%2C%20links%20on%20graphic%2C%20for%20graphical%20landscapes%2C%20users%20like%20this.%20It's%20possible%20to%20insert%20a%20html%20code.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWith%20the%20new%20mts%20webpart%20%22content%20embed%22%20it's%20not%20possible%20to%20insert%20plain%20html%20code%20or%20iframes%20from%20the%20sharepoint...%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHow%20is%20the%20way%20in%20the%20modern%20teamsite%20pages%20to%20insert%20image%20maps%3F%3C%2FP%3E%3CP%3EOr%20other%2C%20good%2C%20new%20ways%20available%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Ethanks%2C%20david%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-33267%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3ESharePoint%20Online%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESites%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-61341%22%20slang%3D%22en-US%22%3ERe%3A%20Insert%20a%20image%20map%20in%20mts%20pages%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-61341%22%20slang%3D%22en-US%22%3ESorry%20David%2C%20we%20don't%20allow%20embedding%20script%20currently%20due%20to%20the%20concern%20of%20the%20security%20as%20now%20web%20part%20is%20totally%20running%20on%20client%20side.%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-33521%22%20slang%3D%22en-US%22%3ERe%3A%20Insert%20a%20image%20map%20in%20mts%20pages%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-33521%22%20slang%3D%22en-US%22%3E%3CP%3EYes%20sure%2C%20it's%20new%2C%20limited%2C%20but%20new%20chance%20available%20%3A)%3C%2Fimg%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EOther%20ideas%20for%20implement%20image%20maps%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ENew%20MTS%20document%20webpart%20with%20visio%2C%20but%20visio%20is%20not%20supported%20in%20the%20document%20webpart%2C%20others%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-33460%22%20slang%3D%22en-US%22%3ERe%3A%20Insert%20a%20image%20map%20in%20mts%20pages%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-33460%22%20slang%3D%22en-US%22%3ESo%20I%20guess%20as%20others%20have%20stated%20over%20here%20that%20this%20webpart%20is%20very%20limited%20and%20not%20a%20replacement%20for%20the%20content%20editor%20webpart%20and%20the%20script%20editor%20one%20%3A(%3C%2Fimg%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-33324%22%20slang%3D%22en-US%22%3ERe%3A%20Insert%20a%20image%20map%20in%20mts%20pages%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-33324%22%20slang%3D%22en-US%22%3E%3CP%3EYes%2C%20i%20do%20that.%20But%20without%20an%20impact.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-33321%22%20slang%3D%22en-US%22%3ERe%3A%20Insert%20a%20image%20map%20in%20mts%20pages%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-33321%22%20slang%3D%22en-US%22%3EHave%20you%20tried%20to%20add%20the%20domain%20of%20your%20site%20yourcompany.sharepoint.com%20in%20the%20HTML%20Field%20Security%20configuration%20option%20in%20the%20site%20administration%3F%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-33273%22%20slang%3D%22en-US%22%3ERe%3A%20Insert%20a%20image%20map%20in%20mts%20pages%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-33273%22%20slang%3D%22en-US%22%3E%3CP%3ESure%20%3A)%3C%2Fimg%3E%3C%2FP%3E%3CP%3EMy%20steps...%3C%2FP%3E%3CP%3E1.%20i%20create%20a%20html%20page%20with%20my%20graphic%20and%20insert%20image%20maps%20on%20this%20graphic%20(save%20in%20siteassets)%3C%2FP%3E%3CP%3E2.%20insert%20a%20new%20content%20embed%20webpart%3C%2FP%3E%3CP%3E3.%20insert%20the%20iframe%20code%3C%2FP%3E%3CP%3E...he%20doesn't%20work...see%20in%20the%20screen.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHope%20this%20helps.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-33269%22%20slang%3D%22en-US%22%3ERe%3A%20Insert%20a%20image%20map%20in%20mts%20pages%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-33269%22%20slang%3D%22en-US%22%3ECan%20you%20share%20a%20screenshot%20of%20what%20you%20are%20trying%20to%20do%3F%20It's%20true%20that%20Content%20Embed%20WebPart%20is%20very%20far%20from%20what%20we%20can%20achieve%20with%20the%20Content%20Editor%20WebPart%20and%20the%20Script%20Editor%20WebPart%2C%20but%20it%20might%20happen%20your%20problem%20is%20more%20related%20to%20the%20way%20you%20are%20using%20the%20WebPart%20(that's%20why%20I'm%20asking%20a%20screenshot%20%3A-))%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1021583%22%20slang%3D%22en-US%22%3ERe%3A%20Insert%20a%20image%20map%20in%20mts%20pages%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1021583%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F26129%22%20target%3D%22_blank%22%3E%40David%20Mehr%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20recently%20created%20a%20complex%20map%20of%20the%20world%20with%20a%20bunch%20of%20plants%20all%20over%20the%20world.%20I%20had%20to%20have%20clickable%20links%20for%20each%20plant%20around%20the%20world.%20Obviously%2C%20Microsoft%20forgot%20that%20people%20needed%20to%20add%20html%20to%20pages%20so%20I%20tricked%20the%20modern%20page%20by%20creating%20the%20image%20in%20Photoshop%20(photoshop%20doesn't%20need%20to%20be%20the%20program)%20Then%20I%20created%20a%20Word%20document%20that%20was%20the%20exact%20size%20of%20the%20modern%20page%20width.%20I%20added%20the%20image%20into%20the%20Word%20document.%20I%20then%20made%20sure%20the%20image%20was%20not%20anchored%20to%20text%20and%20sat%20in%20back%20of%20all%20items.%20Insert%20shapes%20that%20you%20want%20over%20the%20top%20of%20the%20links%20you%20need.%20Add%20a%20link%20to%20the%20shape%2C%20then%20make%20the%20background%20and%20outline%20blank%20for%20the%20image.%20You%20should%20be%20able%20to%20just%20see%20your%20image%20and%20not%20the%20shape%20that%20you%20added.%20I%20then%20saved%20the%20document%20as%20a%20pdf%20and%20the%20links%20work.%3C%2FP%3E%3CP%3ENow%20for%20the%20modern%20page%2C%20you%20just%20add%20the%20webpart%20to%20view%20a%20file%20in%20a%20full%20one%20column%20on%20the%20page%20and%20add%20your%20pdf%20file.%20You%20now%20have%20a%20type%20of%20an%20image%20map.%3C%2FP%3E%3CP%3EThe%20document%20can%20be%20altered%20if%20you%20have%20Adobe%20Acrobat%20pro%20as%20well.%3C%2FP%3E%3CP%3EHope%20that%20helps.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ERon%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1022140%22%20slang%3D%22en-US%22%3ERe%3A%20Insert%20a%20image%20map%20in%20mts%20pages%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1022140%22%20slang%3D%22en-US%22%3EAchieved%20the%20same%20using%20PowerPoint%20with%20linked%20shapes%20and%20text%20on%20the%20slide%20and%20then%20embed%20this%20on%20the%20page.%20This%20enabled%20the%20user%20to%20easily%20change%20the%20diagram%2Fpicture.%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1275732%22%20slang%3D%22en-US%22%3ERe%3A%20Insert%20a%20image%20map%20in%20mts%20pages%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1275732%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F180%22%20target%3D%22_blank%22%3E%40Alan%20Marshall%3C%2FA%3E%26nbsp%3BHow%20easy%20is%20that%20%3A)%3C%2Fimg%3E%20Thank%20you%20Alan!%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1973354%22%20slang%3D%22en-US%22%3ERe%3A%20Insert%20a%20image%20map%20in%20mts%20pages%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1973354%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F180%22%20target%3D%22_blank%22%3E%40Alan%20Marshall%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20am%20wondering%20if%20there%20is%20an%20example%20I%20can%20see%20on%20how%20you%20went%20about%20making%20the%26nbsp%3B%3C%2FP%3E%3CDIV%20class%3D%22lia-message-subject-wrapper%20lia-component-subject%20lia-component-message-view-widget-subject-with-options%22%3E%3CDIV%20class%3D%22MessageSubject%22%3E%3CDIV%20class%3D%22MessageSubjectIcons%20%22%3EPowerPoint%20with%20linked%20shapes%20and%20text%20on%20the%20slide%20and%20then%20embed%20this%20on%20the%20page%3F%3CP%3EThank%20you%3C%2FP%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FLINGO-BODY%3E
Occasional Contributor

In "classic" sharepoint pages i use often image maps, links on graphic, for graphical landscapes, users like this. It's possible to insert a html code.

 

With the new mts webpart "content embed" it's not possible to insert plain html code or iframes from the sharepoint...

 

How is the way in the modern teamsite pages to insert image maps?

Or other, good, new ways available?

 

thanks, david

11 Replies
Can you share a screenshot of what you are trying to do? It's true that Content Embed WebPart is very far from what we can achieve with the Content Editor WebPart and the Script Editor WebPart, but it might happen your problem is more related to the way you are using the WebPart (that's why I'm asking a screenshot :-))

Sure :)

My steps...

1. i create a html page with my graphic and insert image maps on this graphic (save in siteassets)

2. insert a new content embed webpart

3. insert the iframe code

...he doesn't work...see in the screen.

 

Hope this helps.

Have you tried to add the domain of your site yourcompany.sharepoint.com in the HTML Field Security configuration option in the site administration?

Yes, i do that. But without an impact.

So I guess as others have stated over here that this webpart is very limited and not a replacement for the content editor webpart and the script editor one :(

Yes sure, it's new, limited, but new chance available :)

 

Other ideas for implement image maps?

 

New MTS document webpart with visio, but visio is not supported in the document webpart, others?

Sorry David, we don't allow embedding script currently due to the concern of the security as now web part is totally running on client side.

@David Mehr 

I recently created a complex map of the world with a bunch of plants all over the world. I had to have clickable links for each plant around the world. Obviously, Microsoft forgot that people needed to add html to pages so I tricked the modern page by creating the image in Photoshop (photoshop doesn't need to be the program) Then I created a Word document that was the exact size of the modern page width. I added the image into the Word document. I then made sure the image was not anchored to text and sat in back of all items. Insert shapes that you want over the top of the links you need. Add a link to the shape, then make the background and outline blank for the image. You should be able to just see your image and not the shape that you added. I then saved the document as a pdf and the links work.

Now for the modern page, you just add the webpart to view a file in a full one column on the page and add your pdf file. You now have a type of an image map.

The document can be altered if you have Adobe Acrobat pro as well.

Hope that helps.

 

Ron

Achieved the same using PowerPoint with linked shapes and text on the slide and then embed this on the page. This enabled the user to easily change the diagram/picture.

@Alan Marshall How easy is that :) Thank you Alan!

@Alan Marshall 

 

I am wondering if there is an example I can see on how you went about making the 

PowerPoint with linked shapes and text on the slide and then embed this on the page?

Thank you