JavaScript Objects

Hello everybody am a JavaScript beginner.

here is a code making rollovers
////////////////////////////////////////////////
[I][I][COLOR=”Blue”]window.onload=rolloverInit;

function rolloverInit()
{
for(var i=0; i<document.images.length; i++)
{
if(document.images[i].parentNode.tagName==”A”)
{
setUpRollover(document.images[i]);
}
}
}

function setUpRollover(currentImage)
{
currentImage.outImage = new Image();
currentImage.outImage.src = currentImage.src;
currentImage.onmouseout = rollOut;

currentImage.overImage = new Image();
var source = currentImage.src;
var sourceText = source.toString();
if(sourceText.indexOf(“png”)>0)
{
currentImage.overImage.src =”images/”+currentImage.id+”_on.png”;
}
else
{
currentImage.overImage.src =”images/”+currentImage.id+”_on.gif”;
}

/*currentImage.overImage.src =”images/”+currentImage.id+”_on.gif”;*/
/*currentImage.overImage.src =”images/”+currentImage.id+”_on.png”;*/
currentImage.onmouseover = rollOver;

currentImage.clickImage = new Image();
if(sourceText.indexOf(“png”)>0)
{
currentImage.clickImage.src =”images/”+currentImage.id+”_click.png”;
}
else
{
currentImage.clickImage.src =”images/”+currentImage.id+”_on.gif”;
}
/*currentImage.clickImage.src = “images/”+currentImage.id+”_on.gif”;*/
/*currentImage.clickImage.src = “images/”+currentImage.id+”_on.png”;*/
currentImage.onmousedown = rollClick;

currentImage.parentNode.childImage = currentImage;
currentImage.parentNode.onblur = rollOutParent;
currentImage.parentNode.onfocus = rollOverParent;

}

function rollOut()
{
this.src = this.outImage.src;
}

function rollOver()
{
this.src = this.overImage.src;
}

function rollClick()
{
this.src = this.clickImage.src;
}

function rollOutParent()
{
this.childImage.src = this.childImage.outImage.src;
}

function rollOverParent()
{
this.childImage.src = this.childImage.overImage.src;
}[/COLOR][/I][/I]

////////////////////////////////////////////////

This code is working, but its obvious i am missing a term here related to OOP
because
I am unable to understand in this part of the code

///////
[I][I][COLOR=”Blue”]this.childImage.src = this.childImage.overImage.src;[/COLOR][/I][/I]
///////

Why I can NOT use
***[COLOR=”Blue”][I]this.overImage.src;[/I][/COLOR]***
instead of using
***[COLOR=”Blue”][I]this.childImage.overImage.src;[/I][/COLOR]***

————————————————————-

1-I do understand “if iam right, lol” that here
///[COLOR=”Blue”][I]currentImage.outImage = new Image();[/I][/COLOR]///
and here
///[I][COLOR=”Blue”]currentImage.overImage = new Image();[/COLOR][/I]///
and here
///[I][COLOR=”Blue”]currentImage.clickImage = new Image();[/COLOR][/I]///

we are creating an image object on the fly, to keep track and store the current image and new image src.

but
///[COLOR=”Blue”][I]currentImage.parentNode.childImage = currentImage;[/I][/COLOR]///
I am unable to see the point behind creating the childImage object
-is it really a brand new independent object created on teh fly liek before?
and if so
-what is is purpose here??

2-I am woundering if the src is all what i care for here, why i cant now just use the overimage and outimage instead of “[COLOR=”Blue”][I]this.childImage.overImage.src;[/I][/COLOR]“

like that
///////
[COLOR=”Blue”][I]this.childImage.src = this.childImage.overImage.src;[/I][/COLOR]
///////

Why I can NOT use
***[COLOR=”Blue”][I]this.overImage.src;[/I][/COLOR]***
instead of using
***[COLOR=”Blue”][I]this.childImage.overImage.src;[/I][/COLOR]***

isnt it supposed that outimage and overimage are new objects have their own “src”???

OH my GOD
I am totally lost

in general, in this part of code
///
[COLOR=”Blue”][I]currentImage.parentNode.childImage = currentImage;
currentImage.parentNode.onblur = rollOutParent;
currentImage.parentNode.onfocus = rollOverParent;[/I][/COLOR]
///
-I dont understand how object childImage “if its an object at all” interact with my <A> object, what and how and why childImage is able to change the <A> object childenode Image object which is represented here as currentImage???
-after this
in the functions rollOutParent() and rollOverParent()
///
[COLOR=”Blue”][I]function rollOutParent()
{
this.childImage.src = this.childImage.outImage.src;
}

function rollOverParent()
{
this.childImage.src = this.childImage.overImage.src;
}[/I][/COLOR]
///
why cant i use OverImage.src to get the src for the targeted image to display instead of using this.childImage.overImage.src.

I know my questions looks very stupid, but the thing is as i said i have a problem with one of the object oriented programming concepts.

Any body can explain me this code and the ideas here and relations between objects please, I will really appreciate it.
Thanks in advance.

Also in #JavaScript _↴