HTML Image Mapping / Image Maps [ Coordinates, Area ]

[@shudocode]

Get Image Co-Ordinates [Updated Link]
www.programminghead.com/Projects/find-coordinates-of-image-online.html
🎓 Need a Personal Tutor?
💻Learn any Programming language from Scratch.
↩Reply and GET a
🆓FREE DEMO session!

[@cireeric]

I’m not a coder or in IT, I just needed this information to do something quickly. You made this so simple and easy ton understand! Thank you!!!

[@shudocode]

I always try to make all my tutorials simple and easy to understand. Thanks for sharing your experience and also thanks for watching.

[@aymenmaiza6167]

my man !!!!!!!!!!! it was great ,helpful,simple to understand really like it

[@shudocode]

Thanks for watching

[@hehehehehheheheheheheheheh9805]

Thank you bro this is the video we require clear cut keep growing 👍👍👍

[@shudocode]

I am glad that you find this video helpful
thanks again for watching

[@afshinshaikh704]

That was way so easy thank you so much I was confused a lot but this vdo made it easy for me thank you so much

[@shudocode]

i am glad that i could help. BTW thanks for watching and leaving such a positive feedback.

[@ajaybirare1845]

❤❤it was great ,helpful,simple to understand really like it

[@shudocode]

Thanks for Watching

[@muhammadwasim5741]

thanks a lot for all your valueable information and links 😊

[@shudocode]

Thanks for watching the video and for this very kind comment
have a good day

[@HimashiMehra]

thankquu sir ,apki videos bhout helpfull hoti ha ..❤❤🥰🥰

[@shudocode]

you think so..
you are too kind
thanks

[@HimashiMehra]

@@shudocode 😃🤗☺

[@rinrinwinn]

this was very helpful, thank you!

[@shudocode]

happy that i could help. Thanks for Watching BTW

[@DarkSkilly]

Circle: Draw a line from the right edge to the center of the circle. Let's say right edge is x coord is 290. Center X coord is 180. Do 290-180 = 110 to get the Radius. Perfect, we have radius, now what? Select x,y coordinate from center. example coords: 180, 180, 110
Polygon: Pretend you are doing a line clock-wise. Let's do a triangle. I choose one point of x,y on top, then I choose next point of x,y on bottom right, then I choose next point of x,y on bottom left. It would look like 535, 65, 403, 290, 666, 290
Rectangle: Start on top left for x,y and end on bottom right x y for example coords 785, 66, 1010, 290

[@shudocode]

Wow. Well Explained 😀
BTW Thanks for Witching

[@hauhoang7369]

tysm, that's all i need

[@shudocode]

Thanks for watching. have a GoodDAY

[@Seburg]

super! Thank you!

[@shudocode]

Thanks for watching

[@petplayermess-de5cs]

Thank u it’s working

[@shudocode]

i am glad to hear that. BTW thanks for Watching

[@injhs]

1:50 the text I love it😳

[@shudocode]

무궁화 꽃 이 피었 습니다
나는 오징어 게임을 좋아한다. 그래서 그 텍스트를 사용했습니다. 나는 이미 오징어 게임에서 이러한 모양을 알고 있다고 생각합니다. 저는 한국 ROM COM 드라마를 정말 좋아합니다. 그나저나 시청해주셔서 감사합니다

[@vulavalajahnavi3752]

Very helpful thank you

[@shudocode]

thanks for watching

[@sophiakougkoulou6647]

Very helpful ❤

[@shudocode]

Happy to hear that. BTW Thanks for watching

[@mohamedchine-ky6yk]

wow you are really good thank you

[@shudocode]

Thanks for Watching

[@Life-style-5]

Thank you brother....🤗

[@shudocode]

Thanks for watching bro.. have a good Day

[@wkwkkpooh635]

thank you very much sir!

[@shudocode]

Thanks for watching

[@helloinchannel]

Thank You 💓

[@shudocode]

Thanks for Watching 💓

[@Onudhabon]

you deserve more views .

[@shudocode]

Thanks for saying that

[@ابوكرمتكنولوجيا]

Thanks 🌹

[@shudocode]

thanks for watching

[@Uconn-wy6vk]

Thanks bray

[@shudocode]

That was rude, LOL
BTW thanks for watching

[@anchalninama584]

This video is very nice

[@shudocode]

Your comment is very kind.
BTW thanks for Watching

[@emekailonwa8963]

Very helpful. Thank you!

[@shudocode]

Glad it was helpful!

[@SaminaAnsari-b1b]

Hey Shubham! Thanks for the video. I'm trying to do the same but when I'm taking the coordinates the desired area doesn't become clickable on the screen due to the mismatch of coordinates. Is this device dependent? If my application is getting used in different devices, will the same coordinates not work?

[@SaminaAnsari-b1b]

I need to derive coordinates of png file

[@shudocode]

this method is suitable for non-responsive images
if you use this method on responsive images then co-ordinates might be misplaced
because in responsive images, image size change according to device screen-size
to fix that you have to use one JS library (rwdImageMaps.js) which will reconfigure the co-ordinates on responsive images

[@whoeverwhoever400]

hmmm... so image must be in fixed width and height. It cannot be justified. Is it possible to make the area coordinates adaptable? like the image adapts the browser window size. Is it possible to make the area coordinates adaptable?

[@shudocode]

When we provide the Co-ordinates, we are pointing x,y Axis from a image. So if you change the Width or Height of that Image, your x,y will follow the path of old Image (that your have resized)
To fix this you can use different images like small (for mobile Screens) Medium (for Tabs) and Large (for Desktop/Laptops)
And for all these 3 Images use 3 Different Maps
This way you can make your image mapping KINDA Responsive.
Still if you want to use Responsive Image with Image Maps
Then you can use JQUERY - rwdImageMaps.js
In this JavaScript Library, you just need to call this rwdImageMaps() function and Jquery will handle rest.

[@Jamiechanrunsfar]

Very helpful!
The site link in the description seems to be broken. Can you reco another site that can quickly do the coordinates?

[@shudocode]

I am so sorry about that
Can you please tell me how that link is not working?
Are u not able to get correct Coordinates
Is that link broken (unreachable or 404)
Or
Something else

[@nowastenikki]

@@shudocode its saying error 404

[@shudocode]

I am So Sorry About that
Please try this LINK: (to get Co-Ordinates)
programminghead.com/Projects/find-coordinates-of-image-online.html

[@AhmedRaza-cg8kr]

very well explained Sir

[@shudocode]

Thanks for Watching

[@lalitjagtap4967]

Thank you sir for uploading image mapping video

[@shudocode]

It's my pleasure
Thanks for Watching and Also Thanks for the Video Idea

[@supunsanjeewa9476]

thank you very much

[@shudocode]

Thanks for Watching
Have a goodTime

[@Batman-qf8rb]

Thanks boss

[@shudocode]

Thanks for Watching Boss

[@Muan82]

How we can change color of area when we hover on the areas ?

[@shudocode]

for that you need to use maphighligher
here is the documentation projects.davidlynch.org/maphilight/docs/

[@Muan82]

It doesn't work somehow, I also tried imagemapster @@shudocode

[@shudocode]

Mail your code here: [e-mail]
and book a free googleMeet session

[@shudocode]

please check your Email

[@Muan82]

Thank you very much, image-mapster works fine now with your help@@shudocode

[@anshikaguptapiano]

It's also been one WHOLE year you haven't posted anything.... I hope we're going to see more tech videos from your side too shubham... All The Best ☺️👍

[@shudocode]

Same issue with me. I was busy doing something else (No study BTW)
I will defiantly upload Video BUT you need to Start first.
I am waiting for your Video.
This means, my future Videos Depends upon you.

[@anshikaguptapiano]

​@@shudocode This is not fair to say so 😂😂 What if I don't post any content from now? You must create videos regularly. Your channel has a good engagement too. Please upload videos without waiting for me. I'm waiting for your video from now. 😊

[@shudocode]

@@anshikaguptapiano wait what
no
I said it first
So you need to upload first

[@bhumbaro800]

Thanks Brother

[@shudocode]

Glad that i could help also Thanks for Watching

[@MinhLê-t3i]

cảm ơn vì video bổ ích

[@shudocode]

Cảm ơn bạn đã theo dõi và để lại bình luận tích cực như vậy. Cảm ơn

[@666TheCount]

thanks❤

[@shudocode]

Thanks for Watching

[@user-hb5sg1yl4z]

Sir can I add height and width for the image

[@shudocode]

Yes you can. but make sure that your given height and width matches with the image resolution.
If you use your own height and width value (different from the image) your mapping will be inaccurate.
Still if you want to use Responsive Image with Image Maps
Then you can use JQUERY - rwdImageMaps.js
In this JavaScript Library, you just need to call this rwdImageMaps() function and Jquery will handle rest.

[@sivakarthik2424]

Thanks its very useful, How to style hover area like filled color / border color , it will user easily identify we are in shapes. If any one how to do ,Share us, its really very use full..

[@shudocode]

for that you will have to use a JavaScript library called "maphilight"

[@sivakarthik2424]

@@shudocode Thanks i tried working but i need to try using ngstyle to highlight border over the image map area.In this case left and top co-ordinates(border property used to highlight while hover the area) properly aligned but width and height not properly aligned , that is i need to solve , this without using the third party library we are archived half the way need to complete other 50 % way only.if any idea regrading this ?

[@shudocode]

@@sivakarthik2424 arr you using a responsive design??

[@sivakarthik2424]

@@shudocode No , actually doing highlight a hover area with scss .

[@sivakarthik2424]

i;m trying a imagemap area while hover ,cursor pointer showing than why we re not append class to set border for that area without using third party library, actually i get a two co-ordinates alighted properly other two co-ordinates not alighted that one i'm checking it, if any idea share us , its very helpful.

[@nomanamin5174]

very helpful, could you share the link for taking coordinates on pic

[@shudocode]

Sorry for my Late Reply 😔
here is your LINK : programminghead.com/Projects/find-coordinates-of-image-online.php
also Thanks For Watching have a Good Day

[@ajaybirare1845]

when we change size of img that time how to manage cordinatess

[@shudocode]

That's you need to keep in mind
You can use this method on responsive image (images that change size according to screen size)
If you still want to work with responsive images
Then you can use percentage (%) values instead of pixel value (px)

[@moisesflores8426]

the link doesn't work for me

[@shudocode]

sorry about that .. use this link please slbs.online/Projects/find-coordinates-of-image-online.php

[@beastgaming6192]

Thankyou sir😍

[@shudocode]

Thanks for Watching

[@vinaykattula5923]

is the coords will be same if we change width and height of img in html page

[@shudocode]

no
for that you need to use javascript to update the Co-ordinates on SizeChange

[@ShaqovicScoops]

What if a hentagon hexagon pentagon?

[@shudocode]

For complicated shapes like that poly (polygon) is the best option.

[@badarqazi9979]

the link is not working

[@shudocode]

try this link: www.programminghead.com/Projects/find-coordinates-of-image-online.html

[@badarqazi9979]

@@shudocode Yeah its working now... thanks

[@shudocode]

@@badarqazi9979 Thank you for watching this Video. Have a Great Day

[@raffalshafiei733]

i want to make a quiz of clickable images like this, is this possible?

[@shudocode]

yes it is
you just have tp handle those clicks using onClick Event
then you can do whatever you want
like if the selected image js correct score++
otherwise score--

[@mhi5002]

How do you remove coordinates of the circle??

[@shudocode]

To get the coordinates of a circle watch the video from 6:29
If you are using my link
And want to remove/clear old coordinates value
Then you have a clear button to clear it

[@mhi5002]

​@@shudocodethank you 😁

[@shudocode]

@@mhi5002 thanks for Watching

[@Mikey-g8y]

yes

[@shudocode]

Thanks for Watching

[@Mona-Ali.]

this is really helpful. Thank you !

[@shudocode]

Glad it was helpful!