Question

this script is doing a “roll over” on images
on each mouse event e.g. mousover out and click

img src is changed,
the problem is i was trying to delay
the execution of the function
executed by onClick event .

i tried to change function to settimeout but with no success

setTimeOut('functionName(param1, param2)', 5000);

nither calling a function that encapsulate the set time out

what am i doing wrong ?

       <a href="yourpage.htm">
    <img src="images/Button2_Normal.PNG" width="150" id="img2" 
onmouseover="mOver(this, image2)" onmouseout="mOut(this, image2)" onclick="mActive(this, image2)" />
                    </a> 

                    <a href="yourpage.htm">
          <img src="images/Button1_Normal.PNG"  width="150" id="img1" 
       onmouseover="mOver(this, image1)" onmouseout="mOut(this, image1)" onclick="mActive(this, image1)">
</a>

• javascript

  var image1 = new Array("images/Button1_Normal.PNG", "images/Button1_MouseClick.PNG", "images/Button1_MouseOver.PNG");
  var image2 = new Array("images/Button2_Normal.PNG", "images/Button2_MouseClick.PNG", "images/Button2_MouseOver.PNG");
  
  var preloadImages = new Array();  // preloads images
  function Loadimages(images) {
  
      for (i = 0; i < images.length; i++) {
          preloadImages[i] = new Image()
          preloadImages[i].src = images[i]
      }
  }
  Loadimages(image1);
  
  
  lastN = ""
  
  function mOver(obj, images) {
      if (lastN != obj.id) {
          document.images[obj.id].src = (images.length == 3 ? images[2] : images[1])
      }
  }
  
  function mOut(obj, images) {
      if (lastN != obj.id) {
          document.images[obj.id].src = images[0]
      }
  }
  
  function mActive(obj, images) {
      var ts1 = document.getElementById('img1');
      if (typeof obj != "string") { obj = obj.id }
  
      document.images[obj].src = images[1]
      if (lastN != "" && lastN != obj) {
          document.images[lastN].src = images[0]
      }
      lastN = obj
  }
  function timeout_init(obj,images) {
      setTimeout('mActive(obj, images)', 5500);
  }
  

Answer 1

Closure should work:

function timeout_init(obj,images) {
  setTimeout(function() {
    mActive(obj, images);
  }, 5500);
}

It’s another reason to avoid eval-like functionality. With your current implementation JavaScript engine will take “'mActive(obj, images)'” string and try to eval()uate it in global context. By that time the original obj and images variables are long lost.

With closure your anonymous function will still have access to timeout_init() argument, despite that function finished. But variables survived as they were referenced by inner function.