How to CREATE an IMAGE MAP in HTML + CSS

How to CREATE an IMAGE MAP in HTML + CSS
Hey guys and girls, I'll be showing you how to create and set up an image map using HTML and of course, a tint of CSS.
Sit back relax and enjoy. It's crazy, it's been 10 months, and the wait is over, let's get back to bidnez. 😁😁
Here are some useful links:
Source code: rhymbil.netlify.com
Image Map Generator: imagemap.org
Image Resizer: imageresizer.org
Background beat: • J. Cole x Mac Miller T...
You know where to HMU. If not, do some math:
01110010 01101000 01111001 01101101 01100010 01101001 01101100 01111001 01110100 01000000 01100111 01101101 01100001 01101001 01101100 00101110 01100011 01101111 01101101
LOL.
Until next time RHymBil Out!

[@palmtreepanic]

Thank you so much! I had no idea there was a website that could automatically provide all the coordinates for you. This is incredibly helpful!

[@spide8748]

Thank youuuuuu! I've been thinking how do I do it and your video is the best help I need

[@priyadarshinimohapatra4599]

Thank u for valuable knowledge

[@cagrahmetodabas5230]

Thank you for this info bro, this information was very useful in my project.

[@orlamdc]

Great tutorial. I must try that.
Do you know if there's a way to create a hover effect when you rollover each of your maps?....say you want it to have a 75% opacity on rollover.

[@qadejaquest2795]

Such a fun tut will subscribe

[@LaurenCandia]

amazing thank you

[@MaxProgramming]

Long time no see. Welcome back my friend!!!!

[@MelvinAdekanye]

Wow wow. Thanks. Pretty excited to drop more videos.

[@makdem4603]

Brilliant video, thanks.

[@MelvinAdekanye]

Glad you enjoyed it

[@hafidnurfirmansyah2839]

Wow thank you

[@MelvinAdekanye]

You're very welcome.

[@ravinderyadav97833]

Great

[@DeltaOmega2515]

Finally a new video!

[@MelvinAdekanye]

Hahaha. Love the reaction.

[@arshidvaishnavi9686]

Thank you so much sir

[@Mr.Celebrity25]

Very helpful thnx❤

[@RedWax.]

Love your tutorials. Will there be a new video soon?

[@MelvinAdekanye]

That's awesome. I appreciate your compliment. And of course!

[@Aulacode]

good !!

[@MARCDUINMENIANO]

can i put area tag in a div and make it enlarge when hover ?

[@rajshah7734]

Hey man, from where do I get the image you used in that video?

[@MelvinAdekanye]

I wish I saved the image link. But if you look up "food chart". That should prompt you with similar images.

[@jakegaming3417]

Also Thanks For New Videos!

[@MelvinAdekanye]

Glad you like them!

[@TheFuture36520]

Without an image map generator it is difficult to determine coordinates especially with shapes of rect, circle and polygons.

[@cagrahmetodabas5230]

I am trying to add pins on the image, it is really difficult to give coordinates. I am trying this method now.

[@MoongiePhowngie1]

The I is Impressed

[@GenericUsername1388]

I got it to work but I would like to know if there's a way to make the area on the image map light up as you hover over it? Whenever I try to do so it won't overlay on the image but as a separate box just below

[@safiahussain2430]

Did you ever figure this out? I am trying to do the same thing and have not found any solution

[@GenericUsername1388]

@@safiahussain2430 sadly no I didn't. Hope you can find it though

[@jmv1969]

This video is missing an important step.
img src ="cool_image.jpg" is not a valid path for the image location. If you just copy and paste from image map generator, you get nothing but a broken image link. You have to reference the image from your images folder. Also make sure the image there is the exact size as the one you uploaded to the image generator or the map will be off.

[@MelvinAdekanye]

You're completely right. The path of course is definitely important. But the key point is sizing. If you resize the image with CSS/styling, the map will no longer function properly.
Thanks for the heads up.

[@4ida]

except it probably wont work nicely on moble... for example you have a banner from corner to corner at top of page...

[@dibel3669]

i wonder if we can customize that hover text, im pretty knew so i have no clue how to approach this hfeeeee

[@MelvinAdekanye]

Elaborate on "hfeeeee"

[@marvinperegrin8897]

I can't open it on Google chrome what should I do?

[@palmtreepanic]

Use another browser

[@NomarRH]

Abrí los ojos

[@Snozzie]

Are you on any other social media?

[@MelvinAdekanye]

Hehe. While I do love making tutorials. I'm also on Twitch (RhymBillive) as well as Patreon.

[@amos2175]

It didn't work for me though

[@TheFuture36520]

Haha you've joined the darkside

[@youcefg9760]

1:04 HTML program wtf?

[@cyberkotlik]

this is not for begginers!

[@MelvinAdekanye]

I'll make it easier next time. Thanks for letting me know!

[@junjunpyotv7600]

This definitely is. Skill issue. Git gud

[@acigaa1494]

360 no click!!!!

[@Anonymous-zi5wr]

Your sound is bad. You need to make it louder and it has a weird sound to it.

[@junjunpyotv7600]

U come here for knowledge not to nitpick sht.

[@dessertplate301]

thank you so much sir