cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
wetherme
Community Participant

Can you use an image with hot spots?

Jump to solution

Hoping someone can help me! I created an image that I want to use as course home page and the idea was to use add hot spots for the buttons. However, each time I put in the hot spot code, Canvas strips it out280096_Navigation.png

I know I could create the same look with a table - but I really try to avoid using tables for layout. Any other ideas?

Thanks!

Melissa

1 Solution

Accepted Solutions
tom_gibbons
Community Contributor

I've done this with divs and images, rather than the button code. Buttons might be better for accessibility, but the images have alt that replicates the text, and the percentage width works great with the card images for resizing. So, this works in mobile, too. This looks like a table, but it isn't. The borders are part of the individual images for each lesson card. You can grab the code from here. I've been meaning to pair this with the trick that lets you link to module items in mobile, but haven't yet.

grid of images on a canvas page

View solution in original post

10 Replies
kmeeusen
Community Coach
Community Coach

Hi  @wetherme 

There is a great Blog posting about how to do this in the Instructional Designers group area. Check it out at Image Mapping for a Home Page.

I hope this is helpful; and for the record, I found it fairly easy.

Kelley

mchild76
Community Contributor

Hi Melissa -

You could achieve the same effect by creating two rows of buttons under your header image. I continue to struggle to get these to be as responsive and fit the way I'd like, but essentially:

Banner image

<div style="min-width: 100%; padding: 15px 20px 15px 20px;">
<p><img src="[location]" alt="banner" width="95%" data-api-endpoint="[location]" data-api-returntype="File" /></p>

Followed by buttons organized in rows

<div style="min-width: 50%; padding: 15px 0px 15px 0px;"><a id="" class="btn btn-inverse" style="width: 27%; margin-top: 5px;" title="Course Syllabus" href="[location]" data-api-endpoint="[location]" data-api-returntype="Page">Course Syllabus</a> <a id="" class="btn btn-inverse" style="width: 27%; margin-top: 5px;" title="Project Overview" href="[location]" data-api-endpoint="[location]" data-api-returntype="Page">Major Project Overview</a> <a id="" class="btn btn-inverse" style="width: 27%; margin-top: 5px;" title="Library Resources" href="[location]" data-api-endpoint="[location]" data-api-returntype="Page">Library Resources</a></div>

Gets me the following page layout:

screenshot

As I mentioned, I continually struggle with getting the size relationships correct. I'd be interested to hear if there is an easier way to do this. I'm stuck in a trial end error approach. Of course, on mobile, the buttons show as hyperlinks.

wetherme
Community Participant

Thank you Kelley! I thought I had seen this previously but my searches were coming up empty! This was much easier than all the steps I went through to actually map the image and write the code! 

Great,  @wetherme  , I am glad it was useful!

Kelley

wetherme
Community Participant

Yes Melissa I can see how this would work too - and since I am still struggling with the image map - now all the links are opening in the iframe - I might just use this approach. Thank you! 

tom_gibbons
Community Contributor

I've done this with divs and images, rather than the button code. Buttons might be better for accessibility, but the images have alt that replicates the text, and the percentage width works great with the card images for resizing. So, this works in mobile, too. This looks like a table, but it isn't. The borders are part of the individual images for each lesson card. You can grab the code from here. I've been meaning to pair this with the trick that lets you link to module items in mobile, but haven't yet.

grid of images on a canvas page

View solution in original post

Thanks for sharing this,  @tom_gibbons !

It's nice to see that the dust has settled enough in the newest chapter of your life, that you are back contributing in the Community!

Kelley

tom_gibbons
Community Contributor

*waves*

wetherme
Community Participant

Thank you to everyone for the help and ideas!

I first tried the suggestion from  @kmeeusen , the video was easy to follow and it did exactly what I was looking for - until I tried the links which then appeared in the iframe. Looking at the code, sure enough Canvas had added an extra line of code, so I took it out but Canvas didn't like that and put it back in perhaps it has to do with changes since this method was discovered I'm not sure - but that didn't seem like it was going to work. 

Next, I tried the suggestion from melissa.childress1317‌ adjusting some of the percentages and it looked okay - not exactly what I had in mind but functional. I was ready to call it good and move on.

Then I saw the post from  @tom_gibbons this morning. A big thank you to Tom! I now have almost exactly what I was looking for - but actually better when considering mobile and accessibility! I can tab to each button, and by using alt tags the page can be read by a text reader. I used a margin-right: 5% and a margin-left: 5% on the div rather than the margin-left: 10%  and this seems to have centered the images on the page. 

Thanks again everyone - the Canvas Community is AMAZING!