Choose 2 images to build a Rollover effect on the image tag that has id="img1". Using JavaScript complete the following tasks;a. select one of the two images to load automatically when the web page loads by modifying the HTML and placing a filename in the empty src property of the img tag with id="img1"b. setup an event that will call a function when the user places the mouse over the imagec. setup an event that will call the same function as in step b above (I.E. both events will call the same function) when the mouse moves off of the imaged. the function called in steps b and c above should handle changing the image displayed in img tag with id="img1" when the mouse is placed over it to the second image you chose, and then changing it back to the original image when the mouse moves off itHere's my code it's not working I dunno why?Source Code<img id="img1" src="batman.jpg">JS CodeaddEvent(g.batman, "mouseover", changeBatman);addEvent(g.batman, "mouseout", changeBatman);$("#img1").mouseenter(rollover).mouseleave(rollove r);function rollover() {var img1=thisif ($(img1).attr("src") == g.batmanImages[0]) {img1.src = g.batmanImages[1];} else {img1.src = g.batmanImages[0];}}var g = {}g.batmanImages = ["batman.jpg", "batman2.jpg"];