Pause images onMouseover

JavaScript
1

Hi Guys,

Is it possible to pause images when the user mouse overs an image. For example, I need to adapt the Javascript on this site to incorporate a pause when the user hovers over the image.

Website

Is this possible?

2

Yep, it’s possible. You would need to add some code that takes care of stopping and starting up the images again. Then you would need to call on that code in functions you assign to the event handlers of the slideshow. For example, if you name the function that stops the images as “stop”, then you would set up the hover behavior like this:

document.getElementById("slideshow").onmouseover = stop;

Then you’ll want to make sure the images start up again when the user takes their cursor off:

document.getElementById("slideshow").onmouseout = play;

Make sure you don’t include parentheses at the end when specifying the functions to be executed onmouseover and onmouseout. By leaving them out, the browser treats them as references to those functions and assigns those references to the onmouseover and onmouseout properties, which is what we want.

There are better ways to do this, I believe the more proper way to add event listeners like this is to use the addEventListener function rather than just using an equals sign as I’ve done here, but I’m not sure whether it’s supported by all platforms (ahem, Internet Explorer). IE does have its own method for doing this though, I’m just not sure what it is. Anyway, the advantage of doing it using a function like addEventListener is that you can store multiple functions to all be executed when a certain event happens, rather than just one, which is what using the equals sign will do. I’m used to handling events with the jQuery library, which would do the same thing as the code I’ve written above like this:


$("#slideshow").hover(stop, play);

…but you can ignore this last example if you’re not familiar with jQuery.

Hopefully one of these methods of getting this done will work for you.

3

Hi - thanks for your reply.

I tried your last suggestion as im using jQuery in my page and I used the following code:


<script type="text/javascript">
$(function() {
  var ul = $('#mygalone ul'),
      im = $('li:first-child img', ul),
      dummy = $('<img>');
  ul.css('visibility','hidden');
  dummy.load(function(){
    ul.css('visibility','');
    $('#header2').css('background', 'none');
    });
  dummy.attr('src', im.attr('src'));
  $('#mygalone').cycle({speed:4000, slideExpr:'li img'});
  $('#mygalone').hover(stop, play);
});
</script>

However, it didn’t seem to work. Any ideas?

Thanks,

4

What did you write for code in your stop and play functions?

5

Actually, I found the site for the jQuery plug-in you’re using, and according to the documentation for how it works, all you have to do is modify your call to the cycle() function to look like this:


$('#mygalone').cycle({speed:4000, slideExpr:'li img', pause: true});

According to the documentation, setting the ‘pause’ option to true causes the slideshow to stop when the user hovers over it with the mouse. By default it’s turned off, so you just have to turn it on when you call the cycle() function like I did above.

I found the documentation here: JQuery Cycle Plugin - Option Reference

6

Hi! I just inserted the code into the site, but it doesn’t seem to be pausing when I mouseover the image - does it work for you?

I’ve only tried in Firefox so far…

Thanks.

7

Nope, it’s not working for me…their demo at the bottom of this page does work though: JQuery Cycle Plugin - Beginner Demos.

I suggest updating to the latest version of the plug-in (JQuery Cycle Plugin - Download) and maybe the latest version of jQuery, and see if it works then.