Cycle through multiple images onmoueover using javascript

Question

I have an image, and when the div it is inside is mousedover, I want a slideshow-type thing to start, where it fades to the first image, fades to the second image, fades to the third etc... and on mouseout it fades back to the original image.

I tried using the Cycle plugin with jQuery, but the site I'm using is hosting an incompatible version of jquery, and it is unfortunately uneditable. So, I tried to make my own, but there are so many problems.

HTML:

   <div class="pro_feature" onmouseover="cyk()" onmouseout="norm()">
       <div><img id="cykimg" src="sweet2.jpg" /></div>
            <span>
               <h2>Sweet</h2>
               <p>lots of text</p>
               <a href="link.html">View Products</a>
            </span>
   </div><!-- end pro_feature -->

The JS:

function cyk(){
    setTimeout(one1(),3000);
    setTimeout(two2(),6000);
    setTimeout(three3(),9000);
    setTimeout(four4(),12000);
}

function one1(){
    $("#cykimg").attr("src","/SXW-AOC-1D.jpg");
}
function two2(){
    $("#cykimg").attr("src","/SXW-AOVB-1D.jpg");
}
function three3(){
    $("#cykimg").attr("src","/SXW-CC-1D.jpg");
}
function four4(){
    $("#cykimg").attr("src","/SXW-SCCS-1D.jpg");
}

function norm(){
    $("#cykimg").attr("src","/sweet2.jpg");
}

The Problems:

• It immediately goes to the last image, called by four4();
• It does not fade
• It does not cycle through

I've been searching for quite a long time for a solution, but I really haven't found anything that has gotten me remotely close (excluding Cycle, which I can't use). Any help or input is appreciated. I would be fine using jQuery if that is possible/easier.

Answer 1

You need to provide the function itself as a callback, and instead it is called when setting the timeout.

So instead of :

setTimeout(one1(),3000);

It should be

setTimeout(one1, 3000);

Answer 2

It looks like the functions aren't being called inside your setTimeout correctly. you can try something like:

setTimout(function () {

    one1();

},1000);

Here's a fiddle with a small example that might help: http://jsfiddle.net/JeffreyTaylor/WTUA5/2/