How to change onmouseover event to onclick instead in javascript?

Question

I am using this plugin in wordpress

http://www.iwebix.de/front-slider-wordpress-plugin-demo/

As you can see in the demo above, the left and right arrow buttons are the controls for scrolling the thumbnails and the event is onmouseover and onmouseout.

I don't know how to change this to onclick instead so that the thumbnails will scroll left and right only when the buttons are clicked.

Any help or ideas on how to do this?

Thanks!

Here is the script.

http://www.iwebix.de/wp-content/plugins/front-slider/scripts/slider.js

Answer 1

I haven't got time to look at it in detail (or test it), but at first glance you should be able to change the onmouseover & onmouseout events to onmousedown and onmouseup events and it looks like it'll all still work. In other words change this (lines 28-30):

u.onmouseover=new Function('SLIDE.scroll.init("'+this.thumbs+'",-1,'+this.scrollSpeed+')');
u.onmouseout=r.onmouseout=new Function('SLIDE.scroll.cl("'+this.thumbs+'")');
r.onmouseover=new Function('SLIDE.scroll.init("'+this.thumbs+'",1,'+this.scrollSpeed+')');

to this:

u.onmousedown=new Function('SLIDE.scroll.init("'+this.thumbs+'",-1,'+this.scrollSpeed+')');
u.onmouseup=r.onmouseup=new Function('SLIDE.scroll.cl("'+this.thumbs+'")');
r.onmousedown=new Function('SLIDE.scroll.init("'+this.thumbs+'",1,'+this.scrollSpeed+')');

Hopefully that helps. Sorry in advance if it doesn't...

Answer 2

A little hacky, but the absolutely easiest way to do this is to just bind the onmouseover event handler directly to onclick and the clear onmouseover so that the handler is only fired by the onclick. Like this:

var divLeftArrow = document.getElementById("arrowleft");
divLeftArrow.onclick = divLeftArrow.onmouseover;
divLeftArrow.onmouseover = undefined;