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
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 , Very cool! I just finished watching your (VERY) helpful video and can't wait to try it out for myself!
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.
This looks very interesting. I will have to get someone to look at all of this.
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
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:
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!
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
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
The video does not appear to be available. Is there another way for me to watch it?
