If we say that the position of an image is ‘relative’, upon setting left value for that image it calculates the left value by considering the given value as relative from the current left.
Say, If current Left of the image is at X, then by saying now Image.LEFT=Z then it calculates an exact Left as X+Z as we said the position of the image is relative.
Where as if we say position as ‘absolute’, the given value Z for left will be the same value when image is placed in browser at same Z point.
I would to share my Html page in which I am reading images available in the current browser or document , there after setting there position as ‘relative’ and then moving those images in rectangular using timer.
Html page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
</head>
<body>
<center>
<table>
<tr><td>
<img src="Images/2.gif" /></td></tr>
<tr><td><img src="Images/3.gif" /></td></tr>
<tr><td><img src="Images/4.gif" /></td></tr>
<tr><td><img src="Images/5.gif" /></td></tr>
<tr><td><img src="Images/6.gif" /></td></tr>
<tr><td><img src="Images/contract.gif"/>
</td></tr></table>
</center>
<script type="text/javascript" language="javascript">
var a=document.images;
function strt()
{
for(i=0; i<a.length; i++)
{
a[i].style.position='relative';
}
disp();
}
var indxShft=50;var fct=50;var dir=1;
var tmr;
function disp()
{
for(i=0; i<a.length; i++)
{
if(dir%2==0)
a[i].style.top=indxShft;
else
a[i].style.left=indxShft;
}
dir++;
if(dir>4)
dir=1;
if(dir<=2)
indxShft=fct;
else
indxShft=(-1 * fct);
tmr= setTimeout('disp();',100);
}
strt();
</script>
</body>
</html>
Or
You can just copy the below and paste in your address bar
javascript:a=document.images; for(i=0; i<a.length; i++){a[i].style.position='relative'}; indxShft=50;fct=50;dir=1; setInterval('for(i=0; i<a.length; i++){if(dir%2==0) a[i].style.top=indxShft;else a[i].style.left=indxShft};dir++;if(dir>4) dir=1;if(dir<=2)indxShft=fct;else indxShft=(-1 * fct); void(0)',100); void(0)
I have pasted the above in my address bar while opening google.
Output:-
 |
 |
No comments:
Post a Comment