OK, so I am pretty new to jQuery. There are 4 default images on a page. Upon user entry, one of these 4 images should appear highlighted(new image overlays a grayish background) and every 2 seconds a new image is highlighted. The auto highlights should cease if a user hovers their mouse over any of the 4 images. Seems like I could either be on the right track or I could have wasted an hour writing this code. Anyone got any ideas on why this auto rotate feature is not working? :)
$(document).ready(doTimer(){
var c=0;
var t;
var timer_is_on=1; // 0=off 1=on
if($(".defaultThumb").mouseenter()){
stopCount();
}
else if($(".defaultThumb").mouseleave()){
doTimer();
}
function timedCount(){
if(c==4){
c=0;
}
if(!timer_is_on){
return;
}
if(c==0){
document.getElementById("accountsID").className += "currentHighlight";
document.getElementById("fameID").className = "activeThumb";
document.getElementById("shoppingID").className = "activeThumb";
document.getElementById("mgmtID").className = "activeThumb";
}
else if(c==1){
document.getElementById("accountsID").className = "activeThumb";
document.getElementById("fameID").className += "currentHighlight";
document.getElementById("shoppingID").className = "activeThumb";
document.getElementById("mgmtID").className = "activeThumb";
}
else if(c==2){
document.getElementById("accountsID").className = "activeThumb";
document.getElementById("fameID").className = "activeThumb";
document.getElementById("shoppingID").className += "currentHighlight";
document.getElementById("mgmtID").className = "activeThumb";
}
else if(c==3){
document.getElementById("accountsID").className = "activeThumb";
document.getElementById("fameID").className = "activeThumb";
document.getElementById("shoppingID").className = "activeThumb";
document.getElementById("mgmtID").className += "currentHighlight";
}
c=c+1;
t=setTimeout("timedCount()",2000);
}
function doTimer()
{
if (!timer_is_on)
{
timer_is_on=1;
}
timedCount();
}
function stopCount()
{
clearTimeout(t);
timer_is_on=0;
}