Hello everybody am a java script beginner.

here is a code making rollovers
////////////////////////////////////////////////

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;
}


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

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

///////
this.childImage.src = this.childImage.overImage.src;
///////

Why I can NOT use
***this.overImage.src;***
instead of using
***this.childImage.overImage.src;***

-------------------------------------------------------------

1-I do understand "if iam right, lol" that here
///currentImage.outImage = new Image();///
and here
///currentImage.overImage = new Image();///
and here
///currentImage.clickImage = new Image();///

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

but
///currentImage.parentNode.childImage = currentImage;///
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 "this.childImage.overImage.src;"

like that
///////
this.childImage.src = this.childImage.overImage.src;
///////

Why I can NOT use
***this.overImage.src;***
instead of using
***this.childImage.overImage.src;***

isnt it supposed that outimage and overimage are new objects have theri own src.???

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

If you created your own class, this refers to the instance of your class. this isn't an image, so it doesn't have the properties of the image class. You can have a property childImage in your class that is in instance of the HTMLDOM Image. this childImage has to be placed somewhere in the document with the appendChild() method.

If you are new to JavaScript I could really recommend you to use a library like MooTools or Scriptaculous. They offer great ways in creating OO code like this:

var MyClass = new Class({
 initialize: function() {
   // constructor
 },

 myMethod: function() {
  //...
 }
})

The also make sure everything wil work crossbrowser. So if you create it with Firefox you don't have to throw with things when you first try it with IE

although Scriptaculous seems to have smoother physical effects with sliding and fading, I find that Mootools has better documentation and is therefore more appropriet for beginners.

http://mootools.net/download
http://mootools.net/docs/core

also take a look at the demos and see the fun things you can accomplish with fading and sliding. very cool:

http://demos.mootools.net/


Hope you find this handy...
-mac-

-mac-
mailto:mac_doggie@hotmail.com
the Netherlands...