Home/ Questions/Q 8633459
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T09:29:43+00:00

<HTML><head> <Script language=JavaScript> <!– function changePos() { width = document.body.clientWidth; //the width of the

  • 0
<HTML><head>
<Script language="JavaScript">
<!--
function changePos() 
{
 width = document.body.clientWidth;   //the width of the current document
 height = document.body.clientHeight; //the height of the current document
 Hoffset = img.offsetHeight;
 Woffset = img.offsetWidth;
 img.style.left = xPos;  
 img.style.top = yPos;  

 if (yon) 
 {
  yPos = yPos + 5;
 } 
 else 
 { 
  yPos = yPos - 5;
 }
if(yPos < -Hoffset) 
 {
  yon = 1; yPos = -Hoffset;
 }
 if(yPos >= height) 
 {
  yon = 0; yPos = height;
 }
}
//-->
</Script>
</head>
<body>
<IMG id="img" style="POSITION: absolute" src="Images\Colored.jpg">
<SCRIPT language=JavaScript>
<!-- 
 var height = 0;
 var Hoffset = 0;
 var Woffset = 0;
 var yon = 0;  //false
 var xPos = 20;
 var yPos = document.body.clientHeight;
 var Timer1 = setInterval('changePos()',30);
//-->
</Script>
</BODY>
</HTML>

So my question is , how do I add a new image to this animation , and make it in a way that i alternates with the old one (Example : the image I have is colored , and I want to add a black&white image to it , so they alternate together !!!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    to start off very simply, you could simply create an array of images:

    var images = new Array( "image1.jpg",
        "image2.jpg",
        "image3.jpg");

    Then you declare an img element in your html like :

    <img id="img1" src="image3.jpg" />

    And then just add this to your function:

    document.getElementById("img1").src = images[0] // or whatever image number you want.

    Have a look here:

    http://www.daniweb.com/web-development/javascript-dhtml-ajax/threads/131227/changing-images-in-html

    • 0