Тёмный
No video :(

HTML Image Mapping / Image Maps [ Coordinates, Area ] 

ShuDoCode
Подписаться 2,2 тыс.
Просмотров 47 тыс.
50% 1

HTML Image Mapping / Image Maps [ Coordinates, Area ]
Hi there
In this video tutorial, we are going to cover HTML IMAGE MAPs
So whenever
we use Images in HTML
most of the time we use them as a Display Image
What if we want to map a particular Shape from the Image
so we can Display the Name of that Shape or Redirect users to a different page whenever they click on it.
if you also want to do that
then this tutorial is for you
LINK : (to get Image Coordinates Online)
programminghead.com/Projects/...
------------------ Video Contents --------------------
0:00 Introduction - HTML Image Mapping / Image Maps
0:24 HTML Syntax
0:44 Inserting Our Image
1:21 Using MAP Tags
2:53 Using Area Tags
3:14 Assigning Coordinates
3:37 Finding Coordinates using MS Paint
5:05 Redirecting Users
5:29 Getting Image Coordinates Online
5:57 Rectangle Coordinates
6:29 Circle Coordinates
7:01 Ploy or Triangle Coordinates
7:54 Final Results
Tags :
HTML Image Map,HTML image Maps,HTML Images Map,how to map image,how to HTML image map,image coordinates,image coordinates in html,area in html,image area,map area,how to find coordinates,load images in html,mark in html Image,select image in HTML

Опубликовано:

 

6 авг 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 102   
@shudocode
@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
@cireeric 11 месяцев назад
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
@shudocode 11 месяцев назад
I always try to make all my tutorials simple and easy to understand. Thanks for sharing your experience and also thanks for watching.
@hehehehehheheheheheheheheh9805
@hehehehehheheheheheheheheh9805 9 дней назад
Thank you bro this is the video we require clear cut keep growing 👍👍👍
@shudocode
@shudocode 9 дней назад
I am glad that you find this video helpful thanks again for watching
@aymenmaiza6167
@aymenmaiza6167 8 месяцев назад
my man !!!!!!!!!!! it was great ,helpful,simple to understand really like it
@shudocode
@shudocode 8 месяцев назад
Thanks for watching
@muhammadwasim5741
@muhammadwasim5741 Месяц назад
thanks a lot for all your valueable information and links 😊
@shudocode
@shudocode Месяц назад
Thanks for watching the video and for this very kind comment have a good day
@ajaybirare1845
@ajaybirare1845 Год назад
❤❤it was great ,helpful,simple to understand really like it
@shudocode
@shudocode Год назад
Thanks for Watching
@Mona-Ali.
@Mona-Ali. Месяц назад
this is really helpful. Thank you !
@shudocode
@shudocode Месяц назад
Glad it was helpful!
@emekailonwa8963
@emekailonwa8963 2 года назад
Very helpful. Thank you!
@shudocode
@shudocode 2 года назад
Glad it was helpful!
@hauhoang7369
@hauhoang7369 11 месяцев назад
tysm, that's all i need
@shudocode
@shudocode 11 месяцев назад
Thanks for watching. have a GoodDAY
@Seburg
@Seburg 2 месяца назад
super! Thank you!
@shudocode
@shudocode 2 месяца назад
Thanks for watching
@injhs
@injhs Год назад
1:50 the text I love it😳
@shudocode
@shudocode Год назад
무궁화 꽃 이 피었 습니다 나는 오징어 게임을 좋아한다. 그래서 그 텍스트를 사용했습니다. 나는 이미 오징어 게임에서 이러한 모양을 알고 있다고 생각합니다. 저는 한국 ROM COM 드라마를 정말 좋아합니다. 그나저나 시청해주셔서 감사합니다
@mohamedchine-ky6yk
@mohamedchine-ky6yk Год назад
wow you are really good thank you
@shudocode
@shudocode Год назад
Thanks for Watching
@DarkSkilly
@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
@shudocode Год назад
Wow. Well Explained 😀 BTW Thanks for Witching
@sophiakougkoulou6647
@sophiakougkoulou6647 5 месяцев назад
Very helpful ❤
@shudocode
@shudocode 5 месяцев назад
Happy to hear that. BTW Thanks for watching
@vulavalajahnavi3752
@vulavalajahnavi3752 Месяц назад
Very helpful thank you
@shudocode
@shudocode Месяц назад
thanks for watching
@wkwkkpooh635
@wkwkkpooh635 5 месяцев назад
thank you very much sir!
@shudocode
@shudocode 5 месяцев назад
Thanks for watching
@lalitjagtap4967
@lalitjagtap4967 2 года назад
Thank you sir for uploading image mapping video
@shudocode
@shudocode 2 года назад
It's my pleasure Thanks for Watching and Also Thanks for the Video Idea
@Life-style-5
@Life-style-5 3 месяца назад
Thank you brother....🤗
@shudocode
@shudocode 3 месяца назад
Thanks for watching bro.. have a good Day
@helloinchannel
@helloinchannel Год назад
Thank You 💓
@shudocode
@shudocode Год назад
Thanks for Watching 💓
@Onudhabon
@Onudhabon Год назад
you deserve more views .
@shudocode
@shudocode Год назад
Thanks for saying that
@cntsingbutigtsol
@cntsingbutigtsol Год назад
Very helpful! The site link in the description seems to be broken. Can you reco another site that can quickly do the coordinates?
@shudocode
@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
@nowastenikki Год назад
@@shudocode its saying error 404
@shudocode
@shudocode Год назад
I am So Sorry About that Please try this LINK: (to get Co-Ordinates) programminghead.com/Projects/find-coordinates-of-image-online.html
@anshikaguptapiano
@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
@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
@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
@shudocode Год назад
@@anshikaguptapiano wait what no I said it first So you need to upload first
@supunsanjeewa9476
@supunsanjeewa9476 Год назад
thank you very much
@shudocode
@shudocode Год назад
Thanks for Watching Have a goodTime
@AhmedRaza-cg8kr
@AhmedRaza-cg8kr Год назад
very well explained Sir
@shudocode
@shudocode Год назад
Thanks for Watching
@bhumbaro800
@bhumbaro800 Год назад
Thanks Brother
@shudocode
@shudocode Год назад
Glad that i could help also Thanks for Watching
@Batman-qf8rb
@Batman-qf8rb Год назад
Thanks boss
@shudocode
@shudocode Год назад
Thanks for Watching Boss
@whoeverwhoever400
@whoeverwhoever400 10 месяцев назад
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
@shudocode 10 месяцев назад
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.
@anchalninama584
@anchalninama584 Год назад
This video is very nice
@shudocode
@shudocode Год назад
Your comment is very kind. BTW thanks for Watching
@nomanamin5174
@nomanamin5174 2 года назад
very helpful, could you share the link for taking coordinates on pic
@shudocode
@shudocode 2 года назад
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
@beastgaming6192
@beastgaming6192 2 года назад
Thankyou sir😍
@shudocode
@shudocode 2 года назад
Thanks for Watching
@ajaybirare1845
@ajaybirare1845 Год назад
when we change size of img that time how to manage cordinatess
@shudocode
@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)
@vinaykattula5923
@vinaykattula5923 Месяц назад
is the coords will be same if we change width and height of img in html page
@shudocode
@shudocode Месяц назад
no for that you need to use javascript to update the Co-ordinates on SizeChange
@sivakarthik2424
@sivakarthik2424 8 месяцев назад
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
@shudocode 8 месяцев назад
for that you will have to use a JavaScript library called "maphilight"
@sivakarthik2424
@sivakarthik2424 8 месяцев назад
@@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
@shudocode 8 месяцев назад
@@sivakarthik2424 arr you using a responsive design??
@sivakarthik2424
@sivakarthik2424 8 месяцев назад
@@shudocode No , actually doing highlight a hover area with scss .
@sivakarthik2424
@sivakarthik2424 8 месяцев назад
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.
@Muan82
@Muan82 6 месяцев назад
How we can change color of area when we hover on the areas ?
@shudocode
@shudocode 6 месяцев назад
for that you need to use maphighligher here is the documentation projects.davidlynch.org/maphilight/docs/
@Muan82
@Muan82 6 месяцев назад
It doesn't work somehow, I also tried imagemapster @@shudocode
@shudocode
@shudocode 6 месяцев назад
Mail your code here: programminghead7@gmail.com and book a free googleMeet session
@shudocode
@shudocode 6 месяцев назад
please check your Email
@Muan82
@Muan82 6 месяцев назад
Thank you very much, image-mapster works fine now with your help@@shudocode
@MohamedShakir100
@MohamedShakir100 2 года назад
What if a hentagon hexagon pentagon?
@shudocode
@shudocode 2 года назад
For complicated shapes like that poly (polygon) is the best option.
@user-hb5sg1yl4z
@user-hb5sg1yl4z 10 месяцев назад
Sir can I add height and width for the image
@shudocode
@shudocode 10 месяцев назад
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.
@raffalshafiei733
@raffalshafiei733 Год назад
i want to make a quiz of clickable images like this, is this possible?
@shudocode
@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--
@user-ry4zq2ud5t
@user-ry4zq2ud5t 9 месяцев назад
yes
@shudocode
@shudocode 9 месяцев назад
Thanks for Watching
@moisesflores8426
@moisesflores8426 Год назад
the link doesn't work for me
@shudocode
@shudocode Год назад
sorry about that .. use this link please slbs.online/Projects/find-coordinates-of-image-online.php
@badarqazi9979
@badarqazi9979 Год назад
the link is not working
@shudocode
@shudocode Год назад
try this link: www.programminghead.com/Projects/find-coordinates-of-image-online.html
@badarqazi9979
@badarqazi9979 Год назад
@@shudocode Yeah its working now... thanks
@shudocode
@shudocode Год назад
@@badarqazi9979 Thank you for watching this Video. Have a Great Day
@mhi5002
@mhi5002 Год назад
How do you remove coordinates of the circle??
@shudocode
@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
@mhi5002 Год назад
​@@shudocodethank you 😁
@shudocode
@shudocode Год назад
@@mhi5002 thanks for Watching
@rinrinwinn
@rinrinwinn 4 месяца назад
this was very helpful, thank you!
@shudocode
@shudocode 4 месяца назад
happy that i could help. Thanks for Watching BTW