Image Mapping for a Homepage (aka Image with Multi Links)

[jnassif]

This video is currently being processed. Please try again in a few minutes.

Image Map link:

Image Map Tool - On-line Image Map Creator - HTML & CSS | Image-Maps.com 

Attached below are some files to toy with before building your own image mapping file

test.zip

[Stef_retired]

This is fascinating,  @jnassif ‌, and I can envision plenty of applications for it! I noticed that you captured absolute URLs for each of the pages to which you linked in the course. Have you had a chance to test what happens to those links upon course copy? In other words, using this approach, do you recommend creating a new image map for each new iteration of the course?

[jnassif]

Hello Stefanie,

Unfortunately, I have not tested with course copy. The way I chose to go about it is to create zip file  containing the image file and the source code so it can be uploaded to the course.

[kona]

 @jnassif , Very cool! I just finished watching your (VERY) helpful video and can't wait to try it out for myself!

[jnassif]

Good Morning  @kona ,

I'm glad you found this to be helpful. Please do not hesitate to contact me if you have any questions.

Blessings,

John

[kona]

Shall do! Thanks!

[rhudy]

Thanks for sharing this,  @jnassif ! Very fun stuff to consider, especially for me since I'm currently playing around with home page templates. I'm wondering a couple things now (in addition to stefaniesanders's question about links after course copy). Here goes!

Have you tested this on mobile? I glanced at the code and it looks as though the image won't resize (probably to protect those link coordinates), so wondering what that might look like on a phone or tablet. The last time I made an image map was waaaay before mobile was an issue, but I remember running into problems with image sizing and link locations even back then -- I think I got creative about how I coded the link coordinates so they'd work whatever your screen resolution, but again...this was back when every website was little more than a series of cleverly organized tables, so I don't know that that would be an effective solution for a tiny iphone screen.

Also wondering -- and this goes to the accessibility experts out there -- how well image maps function for students using a screenreader or with other accessibility issues that might make it hard to use a mouse, say. I couldn't find much on this through googling, apart from a recommendation to also include redundant text links on the same page. 

Thanks again for sharing! It's so helpful to have folks on here pushing my thinking a bit about what we can do with our page designs.

[jnassif]

Hello Ellen, 

Thank you for bringing that up. As a matter of fact, I have been working on this recently because this format I have right now does not work on Mobile at all. I tried to add javascript to enable automatic resizing, but It is hard to do so with canvas. The only solution I found to be working is to host the .html(the one with the Javascript)  file for the image on an external server and then use the Iframe method to publish it on canvas. It seems like canvas can't quite handle my javascript. There are plenty of free hosting services out there, butter yet if your institution can provide you with a server space. Just make sure that it's an (https) server because (http) won't work for canvas Iframe.

As for accessibility, it will not be readable by normal text recognition software because it's an image. There might be an advanced text recognition out there that can read text on images. 

If you have any idea on how you can solve these problems, I would be very interested in knowing what you come up with.

blessings,

John

[rhudy]

Thanks for sharing what you've been trying,  @jnassif ! I've been poking around a bit since reading your first post yesterday, and all I'm sure of right now is that the Old Timey Internet solution (where you use percentages instead of pixels to map the link locations) doesn't work. No surprise there.

Some folks at stack overflow have good workarounds, but I'm not sure any will work within Canvas. If you look into any and they do, let me know!: html - Responsive image map - Stack Overflow 

The one solution mentioned there that might work is to slice up your image, so what you're actually doing is creating, say, links from five different images that you've positioned to look as though they're one. But again I think that might have the same end problem which is some wacky things happening with those images when you view on mobile. Given all I've come up with (ha), I'm curious to hear how you're able to work around the resizing issue!

[Shar]

My suggestion for an accessible and mobile homepage is to create a separate homepage navigation just for those users and plop that onto the page so that the screen-reader encounters that first. And of course hide that special navigation from desktop users.

One method is to use the screenreader-only class on the separate homepage. In the past, I've used hidden-desktop class to create a mobile-friendly version of a complex desktop layout. My accessible/mobile homepage is mainly text with maybe one or two (alt-text'd) image so the mobile user can see a familiar image from the desktop version.

Cheers - Shar

[rosemary_saul]

Catering for people who use screen readers is great, but you still need to design for people who are sighted but can't use a mouse. They depend on using a keyboard to interact with content. Test this by trying to tab through the content.

[Boekenoogen]

This looks very interesting. I will have to get someone to look at all of this. 

[kmeeusen]

There is a nice how-to for ensuring the accessibility of image maps provided by Penn State here Accessibility at Penn State | Image Maps in HTML 

I hope this helps for those who like to use this technique!

And keep in mind, as  @rosemary_saul ‌ has shared, that you need to test the keyboard accessibility of your map.

Kelley

[valla020]

This is exactly what I was looking for and I followed all the steps and everything worked except that the links open the entire page within the frame?  Any idea what might be wrong?  iframe code is this:  <p><iframe src="https://umnadvet.instructure.com/courses/196/files/25488/download" width="100%" height="800" data-api-endpoint="https://umnadvet.instructure.com/api/v1/courses/196/files/25488" data-api-returntype="File"> </iframe>

[farr]

Very helpful! Just what I was looking to accomplish. I did see an image on another in which the hotspot changed color when you hovered over it. I'll have to play with this tool. Thanks for the clear explanation!

[farr]

Hi-- The video is no longer available. Is there a comparable resource I can refer to, or can the video be reposted? I found this video very useful but cannot recall all of the steps without viewing it again. Thanks, in advance! 

@jnassif 

[Robbie_Grant]

@jnassif 

With the move to the new community, the great video that you posted was lost to the internet.  Would you be able to repost the video or maybe send the video to the Community Team so they can re-embedd it?

Thank you!

Robbie

[JJK326]

The video does not appear to be available.  Is there another way for me to watch it?