Double image swap

Discussion in 'Javascript' started by Asbalom, Jan 8, 2008.

  1. Asbalom

    Asbalom Guest

    Hello,

    The script below was taken from "Javascript & Ajax" by Negrino (pp.
    83-84). It was given with just one link. My question is how can I make
    it work with more than one link.


    // ------------- SCRIPT -------------

    window.onload = rolloverInit;

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

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

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

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

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

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


    <!-- ------------- HTML -----------------

    <h1><a href="next.html" id="arrow">Next page</a></h1>
    <img src="images/arrow_off.gif" width="147" height="82" id="arrowImg"
    alt="arrow" />



    I appreciate any help. Thanks,
    Asbalom
     
    Asbalom, Jan 8, 2008
    #1
    1. Advertising

  2. Asbalom

    David Mark Guest

    On Jan 7, 7:04 pm, Asbalom <> wrote:
    > Hello,
    >
    > The script below was taken from "Javascript & Ajax" by Negrino (pp.


    What a stupidly appropriate title for what is obviously another bad
    book on browser scripting.

    > 83-84). It was given with just one link. My question is how can I make
    > it work with more than one link.


    It looks like it "works" for more than one link, provided they have
    ID's and you follow the tangled naming conventions.

    >
    > // ------------- SCRIPT -------------
    >
    > window.onload = rolloverInit;


    Proprietary and error-prone approach. I'm kidding of course. This is
    the only competent line in the script.

    [snip awful rollover example]

    Apparently nobody ever taught this "Negrino" mutt how to roll over.

    >
    > <h1><a href="next.html" id="arrow">Next page</a></h1>
    > <img src="images/arrow_off.gif" width="147" height="82" id="arrowImg"
    > alt="arrow" />


    Lousy markup too. A top-level headline with a "next page" link and an
    orphaned XHTML image. In a text browser (or with images off), it will
    appear something like this:

    NEXT PAGE
    arrow

    Using script, image elements, Image constructors, etc. for these sorts
    of decorative effects is silly. The markup should look like this:

    <a class="nextpage" href="next.html">Next Page</a>

    Put something this in a style block or linked style sheet.

    a.nextpage {
    padding-right:147px;
    background-image:url(images/arrow_off.gif);
    background-repeat:no-repeat;
    background-position:right;
    white-space:nowrap
    }

    a.nextpage:hover, a.nextpage:active, a.nextpage:focus {
    background-image:url(images/arrow_on.gif);
    }

    Repeat for other link classes.
     
    David Mark, Jan 8, 2008
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Swap double problem

    , Mar 7, 2005, in forum: Java
    Replies:
    3
    Views:
    2,221
    Jacob
    Mar 8, 2005
  2. Phillip Roncoroni
    Replies:
    6
    Views:
    6,237
  3. Sydex
    Replies:
    12
    Views:
    6,646
    Victor Bazarov
    Feb 17, 2005
  4. Niels Dekker (no reply address)

    What swap is called when using std::swap?

    Niels Dekker (no reply address), Jul 19, 2006, in forum: C++
    Replies:
    4
    Views:
    1,009
    Niels Dekker (no reply address)
    Jul 20, 2006
  5. Clay
    Replies:
    1
    Views:
    163
    Elegie
    Sep 28, 2006
Loading...

Share This Page