Resizing images on mouse over (Javascript/MooTools)

Question

I've built a webpage that's supposed to increase the size of images onmouseover. I'm not replacing the images with bigger ones but rather "stretch" the existing ones because of system limitations.

Here's the webpage: http://www.moviez.4pu.com/IMDBQueries.aspx

You can see that the movie images get bigger when you're on them.

Problem is when I move my mouse too quick that sometimes an image gets stuck open or it causes inifinite flickering.

attached is also the code I'm using for the resize:

function resizeImage(elem,width,height){
    var myEffect = new Fx.Morph(elem, {duration: 350});
    myEffect.start({'height': height,'width': width});
}

Answer 1

First thing, set this variable outside your functions

var imagegrow

And then mouseover this

function () {
    imagegrow = setTimeout(function(){ resizeImage(elem,width,height); },1000);
}

And the mouseout this:

function () {
    clearTimeout(imagegrow);
}

Adjust the 1000 number to suit your preferred delay (it's in milliseconds). I'd write the whole code for you, but I haven't used MooTools for a while.

Comment if you have any questions

Answer 2

Faruz, Gaussie is right you need to use a timeout. However, consider using mootools' addEvent function as described in the mootools docs as well as the $$ function which will allow you to achieve something much more elegant, along the lines of:

window.addEvent('domready', function() {
  $$("tr td input").addEvent("mouseover", function() {
    //anonymous function like Gaussie's here
  });
});

Note that this isn't the exact code, it will take some modification but it is cleaner and should be more efficient then setting the onmouseover property of every image. Also, remember this goes in the head of your HTML document.