James92 Posted November 30, 2014 Share Posted November 30, 2014 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"]; Link to comment Share on other sites More sharing options...
Ingolme Posted November 30, 2014 Share Posted November 30, 2014 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. Link to comment Share on other sites More sharing options...
James92 Posted November 30, 2014 Author Share Posted November 30, 2014 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"]; Link to comment Share on other sites More sharing options...
Ingolme Posted November 30, 2014 Share Posted November 30, 2014 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now