Help Creating a HTML/WYSIWYG Widget with Image Map

Sounds like you might be overwriting your initial code with the wysiwyg code. Also, not everything is supported in the html widget, would be a great help if you could provide the code you are trying to use since there are many ways to approach image mapping, you could be using one that simply won’t work in the system. 

@Bfarkas Here’s my code:

<p><img src="https://cdn5.dcbstatic.com/files/e/t/ets1_docebosaas_com/userfiles/15360/footer.png" alt="" width="1292" height="67" usemap="#support"/></p>

<map name="support">

<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">

<area target="_blank" alt="LKMSharePoint" title="LKMSharePoint" href="https://etsorg1.sharepoint.com/teams/rd/ad/Training" coords="7,9,498,66" shape="rect">

<area target="_parent" alt="TrainingRequest" title="TrainingRequest" href="https://forms.office.com/Pages/ResponsePage.aspx?id=t-mmC7Ngrk-S835t3Z6bZUZox7DSKcxKtIKypNM5kEpURUZHRzZFVlo2SVpZT0s2RDcxNk9QRVpISS4u" coords="509,66,806,10" shape="rect">

<area target="_self" alt="ChannelRequest" title="ChannelRequest" href="https://forms.office.com/pages/responsepage.aspx?id=t-mmC7Ngrk-S835t3Z6bZWmdg2neMlFEm2OFLXm5nD9UQURROEE2Wk5ITkY0WFlLQTBaWUhFMUdaMi4u" coords="814,9,1282,66" shape="rect">

</map>

So, I would highly recommend not using an image map for this for a few reasons, but generally it is never a great idea to put text into an image, and especially not navigation:

• Accessibility
• Updatability
• Flexibility

Those three things should be top of mind when designing anything and the image map technique fails all three in this case.

I would look at just making 3 divs that float next to each other, center aligned text, the middle one has a border on it to get the two lines.

<div style="float: left; width: 33%; text-align: center; margin-top: -67px;"><a href="#">Visit the LKM SharePoint Site</a></div>
 <div style="float: left; width: 33%; text-align: center; border-left: #ffffff 3px solid; border-right: #ffffff 3px solid;"><a href="#">Request a Training</a></div>
 <div style="float: left; width: 33%; text-align: center;"><a href="#">Request a Channel</a></div>
 <br style="clear: left;" />

If the background colors/graphics are super important, could explore inserting it as a background image, or could just keep it simple and make it a background of blue...

Thank you! Will do.