[ARCHIVED] Can a link be created in a sector within an image in the html edits?

[mcarbajalh]

Hello, someone has an idea of how to make a link in a sector within an image. example:

Image:

Sector link:

Author of the design:  @gcarrasco ‌

Note: I do not want to use tables because I would lose the background design.

[Chris_Hofer]

Hi  @mcarbajalh ...

I don't have tons of experience with this, but I'll try my best.  The short answer is...I don't think this is possible...at least not using similar code that I've provided below.

Using Adobe Dreamweaver, I tried to create a hotspot/image map within an image on a new page, and then tweaking the code sightly for Canvas, I came up with something like this:

<p>
<img src="/courses/###/files/#####/preview" alt="Koala" width="640" height="480" usemap="#Map"/>
<map name="Map">
  <area shape="rect" coords="221,216,445,362" href="http://www.google.com/" target="_blank" alt="Google Website">
</map>
</p>‍‍‍‍‍‍

However, after saving this code in a Canvas page, the image map didn't work for the area that I had selected in Dreamweaver.  In fact, when I went back to edit the code in the Canvas page, it looked quite different than what I had pasted in from Dreamweaver...including some stuff about data-api-endpoint and data-api-returntype="File" which I assume has to do with the location of the image in the course "Files".  My assumption is that Canvas stripped out some of my code because it is not part of the HTML whitelist...specifically the map and area tags.

[mcarbajalh]

Hi  @Chris_Hofer ,

Thank you very much for the contribution.

The same tried and worked in the same way .

[sonya_mcchristi]

This is so much harder than it should be... why Canvas doesn't allow the use of the <map> tag I don't know, but in any case you can get there by using it in a standalone HTML page and inserting that page into your Canvas page using an iFrame. This old video guide is helpful - How to create an image map in Canvas.mp4 - YouTube  - and as an added bonus you get to see retro Canvas!

[swinning]

 @mcarbajalh ‌ you could try slicing the image so that the bottom quarter of the image serves as the link. So it won't be just the green button, but it'll do the trick since the entire bottom of the image can be the link.

[joseph_clark]

Good idea. In fact, is there a reason you couldn't just make the whole image a link? That is, is there a concern that someone might expect something different to happen if they clicked elsewhere on the image?

[aaron_bahmer]

Although I don't have experience doing so, I think you could use css to add a layered image and link set to an absolute position related to a div that contains the image. It would have to be set to an appropriate z-index so it sits on top of the image.

• CSS Layout - The position Property (scroll down about 4/5 of the page for a "text on image" example)
• CSS z-index property