Skip to main content

This is my first time trying to use the HTML Widget. Thank you for any help you can provide.

 

I am trying to add an image that has 3 clickable areas. I have the Image map code and the image. I have tried to insert the code into the HTML field and upload the Image in the WYSIWYG field of the widget. This produces the image as expected, but no links.

@Bfarkas Could you possible help me figure out what am I doing wrong?

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.

Reply


Terms & ConditionsCookie settings