JavaScript - can any one say me what is the mistake in this

Asked By Mano on 30-Jan-11 01:48 AM
 hi to all this is a image rollover for buttons like when you move your mouse over the button it will change the button image to another here i do as much as i know and don't how to do further  

can anyone say whether it is correct or wrong here is java script code as follows
<script>
var images;
function dopreload()
{
images = new
Array('image/pic borwn/antiguabrown.png','image/pic borwn/antiguabrown.png','image/pic borwn/Antiguablu.png','image/pic borwn/antiguabrown.png');
preload(images);
}
function preload(img)
{
for(var i =0; i < img.length; i++)
 {
  var im = new Images();
  im.src = img[i]; 
  }
 }

function over(a)
{ 
document.images[a].src=images[a+2];
 }
function out(a)
{ 
document.images[a].src=images[a];
 }
 </script>

here is corresponding html code as follows

<html>
<td> <img src="image/pic borwn/antiguabrown.png" onMouseOver="over(0)" onMouseOut="out(0)" width="145" height="80"></td> </html>

anil soni replied to Mano on 30-Jan-11 02:13 AM
See the below code.
<html>
<head>
<title>Image Rollover</title>
<script language="javascript">
//images is an array of images path.
var images = new Array('image/pic borwn/antiguabrown.png',
                  'image/pic borwn/Antiguablu.png');

//senderImage is reference to the image Element over the event is raised
//and imgIndex is the index of images array defined above.
function setImage(senderImg,imgIndex)
{ 
   senderImg.src=images[imgIndex];
}
</script>
</head>
<body>
    <img src="image/pic borwn/antiguabrown.png" id="img1"
    onMouseOver="setImage(this,1)" onMouseOut="setImage(this,0)" 
    width="145" height="80" />
</body>
</html>
Mano replied to anil soni on 30-Jan-11 03:50 AM
how it could come in case of  adding more than one rollover image your example is only to add one rollover image
something like this how it shows rollover images on many pictures(EX button1, button2,button3) using for loop

preload(images);
}
function preload(img)
{
for(var i =0; i < img.length; i++)
 {
  var im = new Images();
  im.src = img[i]; 
  }
 }
 
do you know how to do

anil soni replied to Mano on 30-Jan-11 04:32 AM
For that case i have made some changes now the images will change (in cyclic order from 1st index to last index of images array) after every 1000 ms interval (see window.setTimeout) only till the user will have mouse over the image and on mouse out the image will be restored to the 0th index.

<html>
<head>
<title>Image Rollover</title>
<script language="javascript">
//images is an array of images path.
var images = new Array('image/pic borwn/antiguabrown.png', 
              'image/pic borwn/Antiguablu.png',
            'image/pic borwn/antiguabrown.png',
            'image/pic borwn/Antiguablu.png');
var imgIndex = 1;
var tmrId=null;
function showNextImage(senderImg)
{
  if(tmrId==null)
  {  
    senderImg.src=images[imgIndex];
    imgIndex++;
    if(imgIndex==images.length) imgIndex = 1;
    window.setTimeout("showNextImage()",1000);
  }
}

function resetImage(senderImg)
{
  senderImg.src = images[0];
  if(tmrId)  window.clearTimerout(tmrId);
  tmrId= null;
}
</script>
</head>
<body>
  <img src="image/pic borwn/antiguabrown.png" id="img1"
  onMouseOver="setImage(this,1)" onMouseOut="setImage(this,0)" 
  width="145" height="80" />
</body>
</html>