Choose 2 images to build a Rollover effect on the image tag that has id="img1" NEED HELP

[James92]

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"];

[Ingolme]

Have you defined the addEvent() and changeBatman() functions?

 

You seem to be using both Javascript and jQuery. Just choose one of them. If you're using jQuery, be sure you've included the jQuery library into your page.

[James92]

How would I define my addEvent() and changeBatman() functions? and I changed around my code a bit. I got the jQuery library in my page jquery-1.11.1.min.js file is attached.

 

 

Source Code

 

<img id="img1" src="batman.jpg">

 

JS Code

 

 

addEvent(g.batman, "mouseover", changeBatman); addEvent(g.batman, "mouseout", changeBatman); $("#img1").mouseover(rollover);$("#img1").mouseout(rollover); function rollover(){ if (img1.src.slice(img1.src.lastIndexOf("/")+1) == g.batmanImages[0]){ img1.src = g.batmanImages[1]; } else { img1.src = g.batmanImages[0]; } }var g = {} g.batmanImages = ["batman.jpg", "batman2.jpg"];

[Ingolme]

Where did you get the idea to use addEvent() in the first place? Wherever you got it, they would have taught you how to create it.

 

Another problem is that in your rollover function you're not setting the variable img1. You need a line var img1 = something in order to declare the variable.

 

This looks like homework, check through your notes or other class resources to see how the changeBatman() function should be made.