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. :-)
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.
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.
