Question

This piece of code pulls off all the images from your web page and rotates them in a circle. Really makes any page go naked (without its images). The best place to test is a website with many images. (Google Images for an example).simply place these code the url of any websites for e.g say goggle,remember u need to manually type “javascript:”

 javascript:R=0;  
  x1=.1; y1=.05;
  x2=.25; y2=.24;
 x3=1.6; y3=.24;
  x4=300; y4=200;
 x5=300; y5=200;
 DI=document.getElementsByTagName("img");
 DIL=DI.length; 
 function A(){for(i=0; i-DIL; i++)//is equal to for(i=0; i < DIL; i++)
 { 
 DIS=DI[ i ].style;
 DIS.position='absolute';
 DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+"px"; 
 DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+"px"}

R++

}
 setInterval('A()',5); void(0);//u can also use undefined here or u can pass these code to void(all code goes here);
//but u should not pass return false as it is used within a function to exit and return specified value

when undefined is returned browser reads that and dont nevigate away from the
current page.if not placed it redirects to next blank page.so its compulsory.also u can pass expression to void(exp here),it will be evaluated no problem but main thing to take in mind is that it always returns undefined which is necessary for browser also remember javascript: is a uri scheme similar to http: so u know when knew address to placed to url browser nevigates to that page even if it dont exist.In javascript: scheme ,browser executes the javascript code and writes that to new page .the void operator at the end of the uri returns undefined like void (exp)/void exp returns undefined which gets executed and prevents browser from taking default action

If you look carefully in the above code, its rotating the HTML “img” tag. Just replace it with “a” or “p” and watch some links or text rotate instead of images.But can anyone explain what is actually happening in the code?Also what does “javascript:” keyword actually do?

in the href attribut for hypertext document it uses http scheme .other time we can use javascript: scheme

Answer 1

There are two parts you need to pay attention to:

setInterval('A()', 5);

This executes the A function every 5 milliseconds.

function A(){
    for(i=0; i-DIL; i++) { 
        DIS = DI[i].style;
        DIS.position = 'absolute';
        DIS.left = (Math.sin(R*x1+i*x2+x3)*x4+x5)+"px"; 
        DIS.top = (Math.cos(R*y1+i*y2+y3)*y4+y5)+"px";
    }
    R++;
}

This function cycles through every element found, sets its position to absolute (not necessary to do this over and over), and then adjusts its left and top values, thus redrawing it in the viewport every 5 milliseconds in a new location.

If your confusion is regarding the math of locating the next location at which each element will be positioned, there’s an entirely different site for those questions.