It doesn't look like there is any easy way to make the background image of a website an image, people online seem to be suggesting solutions involving JavaScript: stackoverflow.com/questions/34644103/image-map-a-background-image stackoverflow.com/questions/7844399/responsive-image-map github.com/davidjbradshaw/image-map-resizer And yes, you can make the link go anywhere you like. :-) BTW cool channel!
You're welcome! :-) In terms of "linking to an image" if you provide a path/URL to an image in the "href" attribute then you will get a link to an image. But that would load the image almost as if a website was being loaded, except only the image will be displayed. If you want to alter the content of the existing page to display an image, you would want to use JavaScript to do that.
You're welcome! :-) To the best of my knowledge, you would need to use JavaScript to do that, and the solution would look something like the answer to the question here: stackoverflow.com/questions/49807088/javascript-get-x-y-coordinates-of-click-in-image.
You’re welcome Yoomin! :-) I don’t have a video covering that topic but you should be able to add a mouse hover effect/event using JavaScript, maybe this link will help: nestcode.co/en/blog/create-an-interactive-image-map-and-highlight-on-areas-when-mouseover
You're welcome! :-) And with JavaScript, yes, this would be possible. We could setup a function to assign a value, and then set that function up to run when the image is clicked. I don't have a tutorial on this yet, but searching for "image click javascript event" might give you some tutorials perhaps.
Atom: en.wikipedia.org/wiki/Atom_(text_editor). It's no longer updated, and I switched to Visual Studio Code. But it was a good lightweight editor. :-)
I don't have a video on that topic yet Rohit. :-( You might be able to find something helpful online, for example: stackoverflow.com/questions/13321067/dynamically-resizing-image-maps-and-images.
What if we have a webpage where the size of a picture is dynamic (in the sense that it depends on the size of the wrapper/container div)? How to make a more dynamic map where size of window/image will not affect clickable areas?
Great question Fasih! 😀 We actually can't "natively" make an image map responsive. We would need to use something like JavaScript to dynamically alter the image map. There are things like jQuery plugins that will do this for us automatically though. This article discusses these points more: www.madcapsoftware.com/blog/how-to-implement-responsive-image-maps-in-your-html5-outputs/.
Great question! 🙂 You can use a tool like this to help you get the x and y values: www.image-map.net/. There are many tools like this, for example: www.image-maps.com/. You could also use something like photoshop, when you go over the image with your cursor it should show the x and y values somewhere.
![HTML Image Mapping / Image Maps [ Coordinates, Area ]](http://i.ytimg.com/vi/tf_M43oazGo/mqdefault.jpg)
I can't put into words how much I appreciate this, I can't believe it worked. Thank you so much!
You're very welcome, I'm so glad to hear that it helped you out! :-)
Can you do this to the background image instead of the image? And can you gave it link to another page in the website instead of a link?
It doesn't look like there is any easy way to make the background image of a website an image, people online seem to be suggesting solutions involving JavaScript:
stackoverflow.com/questions/34644103/image-map-a-background-image
stackoverflow.com/questions/7844399/responsive-image-map
github.com/davidjbradshaw/image-map-resizer
And yes, you can make the link go anywhere you like. :-) BTW cool channel!
@@PortfolioCourses Thank you!!!
You’re welcome! :-)
Thank you for sharing this video. I was wondering if it's possible to create an image map on a video?
Great tutorial Mister. It's straightforward and it is not confusing.
Thank you for the kind feedback, I'm glad you enjoyed it! 😀
It's great tutorial ! How can I share the image with other people?
How do image map perform when resizing the page or to different devices? Is it fixed or can it be dynamic?
Did you find a solution for this? I'm thinking about using the coordinates within the image itself.
Thank you for this! How would I set it up, to where my image links to another image and pulls up that image, rather than link to a website?
You're welcome! :-) In terms of "linking to an image" if you provide a path/URL to an image in the "href" attribute then you will get a link to an image. But that would load the image almost as if a website was being loaded, except only the image will be displayed. If you want to alter the content of the existing page to display an image, you would want to use JavaScript to do that.
Very simple and straightforward, Thank you for this very useful information
You're welcome! :-D
Thanks for the video.
What if I want to know where the user is clicking at an image?
How can I get the X and Y of an click at an image?
You're welcome! :-) To the best of my knowledge, you would need to use JavaScript to do that, and the solution would look something like the answer to the question here: stackoverflow.com/questions/49807088/javascript-get-x-y-coordinates-of-click-in-image.
Hi, thank you for the tutorial! Would there any way that I can put mouse hover event on each area?
You’re welcome Yoomin! :-) I don’t have a video covering that topic but you should be able to add a mouse hover effect/event using JavaScript, maybe this link will help: nestcode.co/en/blog/create-an-interactive-image-map-and-highlight-on-areas-when-mouseover
Great video. Thanks!
Thank you for the tutorial. I wanted to ask if i can assign a value when you click an image. Is it possible?
You're welcome! :-) And with JavaScript, yes, this would be possible. We could setup a function to assign a value, and then set that function up to run when the image is clicked. I don't have a tutorial on this yet, but searching for "image click javascript event" might give you some tutorials perhaps.
@@PortfolioCourses thank you so much for your response. I will look into it.
@@smurfy123888 You're welcome! 🙂
How do you map a picture that has a thousands of points?
what is the code editor being used here ?
Atom: en.wikipedia.org/wiki/Atom_(text_editor). It's no longer updated, and I switched to Visual Studio Code. But it was a good lightweight editor. :-)
Now I can do my project
God sent you to us! Thank you very much for this tutorial. It helps me a lot.
You've very welcome, I'm so glad to hear the tutorial was helpful for you! :-)
Wow👏👏👏 lesson well explained 🎉
I’m glad you enjoyed it! :-)
sir, what if my image was too big so I tired to use width and height but I think it affects the coords
Hmm, can you re-size it?
@@PortfolioCourses is there a way to resize it?
Programs like Paint and PhotoShop can do that, or even online programs like this one: imageresizer.com/
Awesome! It's exactly what I am looking for.
Excellent, I’m really glad to hear this was helpful! :-)
Very concise. Thank you.
You're welcome Arnold! 😀
well and superb explanation sir😇😇
I'm very glad to hear you enjoyed the explanation! :-)
You are a king thank you so much
You're very welcome Sagi! :-)
What about responsive image sir
Hmm, maybe one day I can make a video on responsive image maps! :-)
HOw to apply dynamic image mapping
I don't have a video on that topic yet Rohit. :-( You might be able to find something helpful online, for example: stackoverflow.com/questions/13321067/dynamically-resizing-image-maps-and-images.
Thanks a lot sir this was helpful 🙏
You're welcome! 🙂
What if we have a webpage where the size of a picture is dynamic (in the sense that it depends on the size of the wrapper/container div)?
How to make a more dynamic map where size of window/image will not affect clickable areas?
Great question Fasih! 😀 We actually can't "natively" make an image map responsive. We would need to use something like JavaScript to dynamically alter the image map. There are things like jQuery plugins that will do this for us automatically though. This article discusses these points more: www.madcapsoftware.com/blog/how-to-implement-responsive-image-maps-in-your-html5-outputs/.
@@PortfolioCourses I see thanks.
You’re welcome! :-)
My problem is i dont undestand the x and y how u will know where is x or y
Great question! 🙂 You can use a tool like this to help you get the x and y values: www.image-map.net/. There are many tools like this, for example: www.image-maps.com/. You could also use something like photoshop, when you go over the image with your cursor it should show the x and y values somewhere.
Are you familiar with graphs? I believe the x and y coordinates use the x/y axes principles.
Use paint. Down the bottom are the Coords
thank you ...
You’re welcome Dave! :-)
wow
I hope you liked it George! 🙂
God bless you
Aww thank you for the kindness! :-)