Cons Of Mouseover For Webpages

So I am currently creating a 'button' with multiple images within it like a slideshow and whenever I MouseOver it, the image changes to another image. However whenever the slidesh

Solution 1:

Since you are using jQuery you can utilize the hover() function.

http://api.jquery.com/hover

$("#image1").hover(function () {
    $(this).attr("src", "images/board_01_over.jpg");
},

function () {
    $(this).attr("src", "images/board_01_01.jpg");
});

For you slider it's easier to make a little object out of it so it's easier to control.

varSlideshow = {
    interval:null,

    start: function () {
        ...
        initialize
        ...
        // catch the interval ID so you can stop it later onthis.interval = window.setInterval(this.next, 3000);
    },

    next: function () {
        /*
         * You cannot refer to the keyword this in this function
         * since it gets executed outside the object's context.
         */
        ...
        your logic
        ...
    },

    stop: function () {
        window.clearInterval(this.interval);
    }
};

Now you can easily call

Slideshow.start();
Slideshow.stop();

from anywhere to start and stop your slider.