Beginner - Programmers Heaven

Howdy, Stranger!

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

Categories

Welcome to the new platform of Programmer's Heaven! We apologize for the inconvenience caused, if you visited us from a broken link of the previous version. The main reason to move to a new platform is to provide more effective and collaborative experience to you all. Please feel free to experience the new platform and use its exciting features. Contact us for any issue that you need to get clarified. We are more than happy to help you.

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.