why is this happening to all images?

Hi all

i have a website im currently working on ( www dot alfalimos dot com )
on the left we have 4 images that when you have the mouse over we wanted a bigger picture, we have this working using this code:

<style type="text/css">
<!--
.enlarge{width:auto;height:auto;}
-->
</style>
<script type="text/JavaScript">
<!--

//set ALL images for the rollover effect
window.onload=function(){
var imgArr = document.getElementsByTagName('img');
for(var i=0;i<imgArr.length;i++){
imgArr.onmouseover = function(){this.className='enlarge';}
imgArr.onmouseout = function(){this.className='';}
}
}
//-->
</script>

Though this is causing all images on that page to go large, how do we stop it from doing it to all and just the 4 we intended it to work on.

thanks in advance
whocky

 

Try adding a parent element to your imgArr:

var imgArr = document.getElementsById('photos').document.getElementsByTagName('img');