www.webdeveloper.com
Results 1 to 6 of 6

Thread: Need help with this example script

  1. #1
    Join Date
    Aug 2009
    Posts
    3

    Smile Need help with this example script

    Hi can someone help me understand how this script works. Just a simple explanation line by line would be great.

    The HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Multiple Links, Single Rollover</title>
    <script src="script05.js"
    language="javascript" type="text/javascript"> </script>
    </head>
    <body bgcolor="#EECC99">
    <img src="images/DaVinci.jpg" width="144" height="219" alt="DaVinci" align="right"
    hspace="50" />
    <img src="images/leoText.gif" width="375" height="26" alt="Leonardo's Inventions" />
    <a href="flyPage.html" class="textField" id="flyer"><img src="images/flyer.gif"
    width="293" height="165" border="0" alt="Flying Machine" vspace="10" id="flyerImg" /></
    a><br clear="right" />
    <img src="images/bg.gif" width="208" height="27" id="textField" alt="Text Field"
    align="right" vspace="20" />
    <a href="tankPage.html" class="textField" id="tank"><img src="images/tank.gif"
    width="325" height="92" border="0" alt="Tank" id="tankImg" /></a><br />
    <a href="heliPage.html" class="textField" id="helicopter"><img src="images/helicopter
    .gif" width="224" height="160" border="0" alt="Helicopter" id="helicopterImg"/></a>
    </body>
    </html>




    The Javascript:

    window.onload = rolloverInit;

    function rolloverInit() {
    for (var i=0; i<document.links.length; i++) {
    var linkObj = document.links[i];
    if (linkObj.className) {
    var imgObj = document.getElementById(linkObj.className);
    if (imgObj) {
    setupRollover(linkObj,imgObj);
    }
    }
    }
    }

    function setupRollover(thisLink,textImage) {
    thisLink.imgToChange = textImage;
    thisLink.onmouseout = rollOut;
    thisLink.onmouseover = rollOver;

    thisLink.outImage = new Image();
    thisLink.outImage.src = textImage.src;

    thisLink.overImage = new Image();
    thisLink.overImage.src = "images/" + thisLink.id + "Text.gif";
    }

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

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




    Thanks a lot for your help. This stuff is new to me.

    Best,

    J

  2. #2
    Join Date
    Oct 2003
    Location
    Andover, UK
    Posts
    945
    Don't have time for a line-by-line but here's the gist of what happens:

    1) On page load, the script rifles through the DOM and finds all links. One by one, it calls the setUpRollover() function on each.

    2) setUpRollover() takes each link it's given by the initialiser function and applies some events to it, so that the rollOver() and rollOut() functions are called on it when the mouse is rolled over on or out from it.

    3) rollOver() and rollOut() make the actual change to the visual image

  3. #3
    Join Date
    Aug 2009
    Posts
    3

    Thanks

    Thanks but how does the part where the kewword "this" is work.

    The confusing part was that only the rest I understand.

    Thanks

  4. #4
    Join Date
    Oct 2003
    Location
    Andover, UK
    Posts
    945
    this always refers to the object on which the method is being invoked, i.e. in your case, it's the element that is being rolled over/out from.

  5. #5
    Join Date
    Aug 2009
    Posts
    3

    Clarification. Thanks

    Below I have added some comments could you tell me if I am understanding it correctly?

    Also, that is 'this' really referring to?
    ********************************************************
    window.onload = rolloverInit;

    function rolloverInit() {
    for (var i=0; i<document.links.length; i++)
    {
    var linkObj = document.links[i];

    if (linkObj.id) {
    var imgObj = document.getElementById(linkObj.id + "Img");
    //here the id arrowImg is called and the image, instead of text usually, is assigned to this variable

    if (imgObj) {
    setupRollover(linkObj,imgObj);

    //essentially you are passing linkObj with the entire element and imgObj with a specific image

    }
    }
    }
    }

    function setupRollover(thisLink,thisImage) {
    //thisImage is an actual Image

    thisLink.imgToChange = thisImage;
    //imgToChange property is assigned the image (like text or string in other cases)

    thisLink.onmouseout = rollOut;
    thisLink.onmouseover = rollOver;
    //onmouseout call rollout function, onmouseover call rollover function

    thisLink.outImage = new Image();
    thisLink.outImage.src = thisImage.src;
    //preload the image stored in thisImage using src and store in Image Object

    thisLink.overImage = new Image();
    thisLink.overImage.src = "images/" + thisLink.id + "_on.gif";
    //preload image using the id of thisLink object and adding on the rest of the source file name
    }

    function rollOver() {
    this.imgToChange.src = this.overImage.src;
    //this refers to ...
    }

    function rollOut() {
    this.imgToChange.src = this.outImage.src;
    //this refers to...
    }

    Thanks for all your help.

    J

  6. #6
    Join Date
    Oct 2003
    Location
    Andover, UK
    Posts
    945
    My comments start "****".

    Code:
    window.onload = rolloverInit;
    
    function rolloverInit() {
    for (var i=0; i<document.links.length; i++)
    {
    var linkObj = document.links[i];
    
    if (linkObj.id) {
    var imgObj = document.getElementById(linkObj.id + "Img");
    //here the id arrowImg is called and the image, instead of text usually, is assigned to this variable
    // **** this goes through all links in the doc recursively. a reference to each is temporarily stored in the var imgObj (so yes, it's not text, it's a refernece to an element)
    
    if (imgObj) {
    setupRollover(linkObj,imgObj);
    
    //essentially you are passing linkObj with the entire element and imgObj with a specific image
    // **** not sure I see what you mean. Both arguments of this function pass are references to elements. Not the elements themselves, but references to them (i.e. if you run "typeof" commands on them, it will return "object")
    }
    }
    }
    }
    
    function setupRollover(thisLink,thisImage) {
    //thisImage is an actual Image
    // **** a reference to one, yes
    
    thisLink.imgToChange = thisImage;
    //imgToChange property is assigned the image (like text or string in other cases)
    
    thisLink.onmouseout = rollOut;
    thisLink.onmouseover = rollOver;
    //onmouseout call rollout function, onmouseover call rollover function
    // **** yeap
    
    thisLink.outImage = new Image();
    thisLink.outImage.src = thisImage.src;
    //preload the image stored in thisImage using src and store in Image Object
    // **** pretty much, yeah
    
    thisLink.overImage = new Image();
    thisLink.overImage.src = "images/" + thisLink.id + "_on.gif";
    //preload image using the id of thisLink object and adding on the rest of the source file name
    // **** yeap
    }
    
    function rollOver() {
    this.imgToChange.src = this.overImage.src;
    //this refers to ...
    // **** as I said in my previous reply, 'this' always refers to the object that the function was invoked on. So in this case, the element that triggered the call to rollOver()
    }
    
    function rollOut() {
    this.imgToChange.src = this.outImage.src;
    //this refers to...
    // **** see above
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles