Hello, in this JavaScript video, I am going to show you the image map. So I've already got the code to the code is a bit tedious. Bowman explain every single bit of the code. So first of all, let's ignore the JavaScript for now. We've got image is no matter what sort of imagenet we've got at this or size, that's fine, simple stuff. You've you, you've seen him before.
The only difference is what this little activities which says use map this is the same use a map in our element that is creativity is right here. Don't name a planet map, and you assign it by doing hash and then planet map here. This essentially allows us to create virtual shapes around our map that aren't visually displayed, but can represent objects on the map. So we've got the three shapes here, the first shape is and the coordinates are 00. Then at two cross on 126 down. So it's essentially this area here the sun essentially.
And you specify the sort of shape that it is. So in this case, it is just more rectangular, slightly curved there. For our case, we don't need that much precision where this will make a difference, we put the coordinate to change. So you will have to change the coordinates, I'll recommend an extra test, trying to make it dynamic using a function. So this is more of a percentage instead of just pure coordinates, old tag, nothing new there. Now we're just using some events on mass over and on nice out.
And that will trigger this function. If you know you hover over the sun, it will send the key words to the function which is console, log it out, and if you take your knife out of the sun, once it's been in the sun, then it was printed out and then tonight, I have the same principle for the rest of them. So we've got mercury We got Venus as well. So let's just, you know, test it, see what we get. Okay, so no console log in at the moment hover of the sun. And we print some How about the black partner friend hover over Venus, we have Venus, met Curie, sun.
And that's it. That's all the image mapping allows you to essentially map virtual shapes around your image. So they can be sort of, you can trigger events on either having to create several different images and almost create a uniform collage. Okay, the only difference between these two and the first one is the shape this is circular In stead. So that is really the only difference. So you set coordinates, and then you set the radius.
And apart from that, that's it. They're the same. If you have any questions, as usual, feel free to shoot me a message and I look forward to seeing you in the next Video