Make the appropriate changes using JavaScript to the HTML below
1. You will add event handlers to the thumbnail images and to the larger image.
2. All of your event handlers must execute only after the page has loaded.
3. You are going to add a click event handler to each of the thumbnail images. When the smaller image is clicked, you code will show the larger version of the image in the ![]()
element within the element. This same even handler will also set the text of the to the clicked thumbnail image' title attribute. Your event handler must use event delegation (I.E., the click event handler will be attached to the element and not to the individual
![]()
elements).
4. You must also add event handlers to the mouseover and mouseout events of the element. When the user moves the mouse over the larger image, then you will fade the element to about 80% opacity (its initial CSS opacity is 0% or transparent/invisible).When the user moves the mouse out of the figure, then fade the back to 0% opacity. You can set the opacity of an element in JavaScript by setting its style.opacity property.
~~~~~~~~~~~~~~HTML~~~~~~~~~~~~~~~~~~~
Chapter 9 - Share Your Travels
Share Your Travels
Battle
Computer Engineering, Engineering