Can you use an image with hot spots?

[wetherme]

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 out

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

[kmeeusen]

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

[wetherme]

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! 

[kmeeusen]

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

Kelley

[mchild76]

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:

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]

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 · Accepted solution]

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.

[kmeeusen]

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]

*waves*

[wetherme]

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! 

[tom_gibbons]

Excellent! Because I set a width of 80% on the main grid div, I only have to set a 10% left margin to center the grid. If I weren't setting a width for the grid div, I'd have to set both margins.