In the bottom right corner of the CodePen example, there should be a button that says Fork. Click it. This will make a copy of the code that you can save to your CodePen account.
While anyone can edit or fork a CodePen, you can’t save and share your work without creating a CodePen account. It’s easy and free. The button to do this is in the upper right corner of the CodePen window.
1. In the image - the name attribute must match the name attribute in the map, so...
<img ... usemap="#map">
<map name="map">
2. I suspect you drew different areas individually in the image map generator? The first one works once you fix problem #1, but the other 3 don't work. Maybe try again making clickable areas at one time on the image?
I tried to use the javascript code from https://stackoverflow.com/questions/13321067/dynamically-resizing-image-maps-and-images but couldn't get it working. My answer:
https://codepen.io/romola/pen/BaRyEoq
Looks great, works well! 🌈🌈🌈🦄🦄🦄
https://codepen.io/kajal-28/pen/mdWxbyQ
🌈🌈🌈🦄🦄🦄 🌈🌈🌈🦄🦄🦄 Awesome job!
Thanks. I appreciate your feedback 😊
https://codepen.io/kldickenson/pen/MWpwgjg
🌈🌈🌈🦄🦄🦄 Fantastic! Looks great, works well!
https://codepen.io/jarchaff/pen/RwKmYKv
🔥🔥🔥🎉🎉🎉 Woo woo, you got it!
https://codepen.io/kelsey-van-ert/pen/OJWGjZN?editors=1100 I think I'm missing something🧐
Great start! Two things:
1. In the image - the name attribute must match the name attribute in the map, so...
<img ... usemap="#map">
<map name="map">
2. I suspect you drew different areas individually in the image map generator? The first one works once you fix problem #1, but the other 3 don't work. Maybe try again making clickable areas at one time on the image?
You're almost there! 🎉🎉🎉🔥🔥🔥
Thank you!
Nicely done - you got the JavaScript in there too 🎉🎉🎉🔥🔥🔥