Beginner - Programmers Heaven

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Categories

Beginner

MiciMici Posts: 1Member
Hello everybody am a java script beginner.

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

window.onload=rolloverInit;

function rolloverInit()
{
for(var i=0; i0)
{
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.

Comments

  • mac_doggiemac_doggie Posts: 488Member
    If you created your own class, [italic]this[/italic] refers to the instance of your class. [italic]this[/italic] 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:
    [code]
    var MyClass = new Class({
    initialize: function() {
    // constructor
    },

    myMethod: function() {
    //...
    }
    })
    [/code]

    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:[email protected]
    the Netherlands...
Sign In or Register to comment.