tnd1000 Posted May 14, 2012 Share Posted May 14, 2012 (edited) Hey there. I've been reading up on this in the various tutorials, but I don't really know if I'm going about it the right way, so I guess I'm going to be asking yet another question... I made some playback buttons for my site's slideshow (which Don E. was kind enough to make, seen here: http://w3schools.inv...=0), and I would like to add a hover effect to them. I have another set of button-images to be used for the hover effect, so that the buttons would go from red (normal) to green (moused-over). The jQuery "mouseenter" function seems like it would do what I'm looking for, I just don't really know how to deal with images. This is the section of javascript that operates the buttons: function slide(){imgSlide.src = images[pic].src;if(pic < 1) // images.length - 1 can be used here{pic++;}else{pic = 0 }timer = setTimeout(slide, 5000);} function prev(){if(timer)stopSlide(); if(pic == 0){ pic = 1; imgSlide.src = images[pic].src;}else{pic--;imgSlide.src = images[pic].src;}} function next(){if(timer)stopSlide(); if(pic == 1){ pic = 0;imgSlide.src = images[pic].src;}else{pic++;imgSlide.src = images[pic].src;} } function stopSlide(){clearTimeout(timer);} The buttons themselves in the <body> tag (I shortened the URLs so that my site's name wouldn't show): <a href="JavaScript:stopSlide()" title="Stop"><img src="stop.png"></a> <a href="JavaScript:prev()" title="Previous"><img src="back.png"></a> <a href="JavaScript:slide()" title="Start"><img src="play.png"></a> <a href="JavaScript:next()" title="Next"><img src="next.png"></a> If anyone could point me in the right direction of how to do this, I'd really appreciate it. Edited May 15, 2012 by tnd1000 Link to comment Share on other sites More sharing options...
dsonesuk Posted May 15, 2012 Share Posted May 15, 2012 And the reason you want to use javascript, instead of normal practical option of CSS is...... http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_hover_nav Give the anchor elements, display: block; define the height, width required, and use image as background as in above link. Link to comment Share on other sites More sharing options...
tnd1000 Posted May 15, 2012 Author Share Posted May 15, 2012 (edited) I'm sorry, I obviously misunderstood the matter of the image sprites, as I did read that tutorial. I thought that since I was using JavaScript to operate the buttons, that jQuery would be the best way to go (I didn't want to inadvertently use a bad coding practice or something...). Honestly, I'm thankful that it wasn't. Thank you for your time, and for setting the record straight. Edited May 15, 2012 by tnd1000 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