Преоразмеряване на картика - скрипт

[Coder]

Добър вечер, написах си следния скрипт за постепенно намаляване на картинка, но картинката не се намалява постепенно, а само изчаква необходимото време и изчезва. Знам че има скриптове в интернет, които правят същото, но аз искам да напиша този.
Ще съм благодарен, ако някой обясни защо става така.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>СНИМКА</title>
<script type="text/javascript">
function Dosmall()
{for(i=1;i<=75;i++)
{new_width=75-i;
new_height=Math.round(new_width*100/75);

setTimeout("Small(new_width, new_height);", 1000*i);}}

function Small(new_width, new_height)
{document.getElementById('picture').style.width=new_width+'px';
document.getElementById('picture').style.height=new_height+'px';}
</script>
</head>
<body>
<img src="images/newsimages/kartinka.jpg" style="border: 1px solid #39668E; width: 75px; height: 100px; vertical-align: middle;" alt="" id="picture" onclick="Dosmall();" /><br><br>
</body>
</html>

 

[I_V_O]

Значи кодът ти е абсолютно НЕлогичен и НЕрационален. Няма да го коментирам. Директно ти давам работещ пример:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> 
<title>СНИМКА</title> 
<script type="text/javascript"> 
function Dosmall(){
	var frames = 24; // брой на стъпките
	var nWidth = 75; // Начална ширина
	var nHeight = 100; // Начална дължина
	for(i=1;i<=frames;i++){
		var new_width=Math.ceil(nWidth*(i/24)); 
		var new_height=Math.ceil(nHeight*(i/24)); 

		setTimeout('Small('+new_width+', '+new_height+')', i*20);
	}
}

function Small(new_width, new_height){
	document.getElementById('picture').style.width=new_width+'px'; 
	document.getElementById('picture').style.height=new_height+'px';
}
</script> 
</head> 
<body> 
<img src="images/newsimages/kartinka.jpg" style="border: 1px solid #39668E; width: 75px; height: 100px; vertical-align: middle;" alt="" id="picture" onclick="Dosmall();" /><br><br> 
</body> 
</html>