cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
mcarbajalh
Community Member

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

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

Image:

273128_pastedImage_1.jpg

Sector link:

273130_pastedImage_3.png

Author of the design:  @gcarrasco ‌

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

6 Replies
Chris_Hofer
Community Coach
Community Coach

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.

Hi  @Chris_Hofer ,

Thank you very much for the contribution.

The same tried and worked in the same way Smiley Sad.

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
New Member

 @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.

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?

0 Kudos
Reply
aaron_bahmer
Community Contributor

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.

0 Kudos
Reply