Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In the last movie, we were able to center these images inside the overlay but there is no way of getting rid of them. If I try in to click on any of these, nothing happens. So I need to check for an event when I click on these images that gets rid of the overlay and the image and shows the background. So let me go ahead and do that. I'm going to come of here and into my code. And right here I'm going to addEventListener to the largeImage. So, largeImage and addEventListener. I want to listen for a click here and once the click happens, execute a function and that function is going to do some stuff. I also need to make sure that I pass it false so that it bubbles properly. And in here I need to check that this is going to happen only when the overlay exists.
If the overlay exist what I want to do is remove the overlay. To remove the overlay, you have to use the removeChild function. You have to remember that removeChild doesn't work on the node itself. It works on the parent of the node you want to remove. So you have to say something like, my overlay.parent node. And then remove child. And then remove my overlay. So let me go ahead and save this, and refresh the page. Now, click on one of these. And then, if I click on this image again, it'll get rid of it. Important thing to remember that remove child always works on the parent of the node you want to remove.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 105121 Viewers
56 Video lessons · 116895 Viewers
71 Video lessons · 86111 Viewers
131 Video lessons · 41178 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.