SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member kate S =D's Avatar
    Join Date
    Jun 2001
    Location
    UK
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Java Script Question

    Hi,

    If you can spare sometime, would you please go to http://www.eternalsenshi.com/week2/

    Look at the very bottom of the page, right under the two characters, you'll see 5 small faded squares. If you hover on one of the squares, the colour is changed to bright gold, and at the same time, you'll see a description for the destination of the link. e.g. Hover on the first square, it says << ------ Network Sites

    Does anyone know how to achieve this? I looked at her codes, but I couldn't figure it out very clearly..

    <script language="JavaScript">
    <!-- Hide from old browsers
    // Copyright 1999 Doug Popeney
    // Created by Doug Popeney (easyjava@easyjavascipt.com)
    // JavaScript Made Easy!! - http://www.easyjavascript.com

    if (navigator.appVersion.indexOf("2.") != -1){
    check = false;
    }
    if ((navigator.appVersion.indexOf("3.") != -1) && (navigator.appName.indexOf("Explorer") != -1)){
    check = false;
    }
    else {
    check = true;
    }

    image1= new Image();
    image1.src = "sites1.jpg";
    image1on = new Image();
    image1on.src = "sites2.jpg";
    image1alt = new Image();
    image1alt.src = "altimg.gif";
    image1alton = new Image();
    image1alton.src = "sites3.gif";

    image2= new Image();
    image2.src = "bday1.jpg";
    image2on = new Image();
    image2on.src = "bday2.jpg";
    image2alt = new Image();
    image2alt.src = "altimg.gif";
    image2alton = new Image();
    image2alton.src = "bday3.gif";


    image3= new Image();
    image3.src = "blog1.jpg";
    image3on = new Image();
    image3on.src = "blog2.jpg";
    image3alt = new Image();
    image3alt.src = "altimg.gif";
    image3alton = new Image();
    image3alton.src = "blog3.gif";


    image4= new Image();
    image4.src = "special1.jpg";
    image4on = new Image();
    image4on.src = "special2.jpg";
    image4alt = new Image();
    image4alt.src = "altimg.gif";
    image4alton = new Image();
    image4alton.src = "special3.gif";


    image5= new Image();
    image5.src = "site1.jpg";
    image5on = new Image();
    image5on.src = "site2.jpg";
    image5alt = new Image();
    image5alt.src = "altimg.gif";
    image5alton = new Image();
    image5alton.src = "site3.gif";


    image6= new Image();
    image6.src = "book1.gif";
    image6on = new Image();
    image6on.src = "book2.gif";
    image6alt = new Image();
    image6alt.src = "altimg.gif";
    image6alton = new Image();
    image6alton.src = "book3.gif";

    function imageon(name) {
    document[name].src = eval(name + "on.src");
    document["altimg"].src = eval(name + "alton.src");
    }
    function imageoff(name) {
    document[name].src = eval(name + ".src");
    document["altimg"].src = eval(name + "alt.src");
    }
    NN3 = true;

    function on(name) {
    if (check == true){
    imageon(name);}
    }
    function off(name) {
    if (check == true){
    imageoff(name);}
    }
    // -->
    </script>

    ~~~~~~~~~~~~~~~~~~

    Could any pros point out the right direction for me?

    TIA!

  2. #2
    Former Staff Member silver trophy Adam P.'s Avatar
    Join Date
    Apr 2001
    Location
    San Francisco
    Posts
    3,288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I'm not at all a JavaScript pro, but what that site does might be explained here:

    http://hotwired.lycos.com/webmonkey/...user_interface

    Hope this helps somewhat, if at all.
    SPF Mentor/Advisor 2001-2003
    SPF Designer of the Year 2002
    SPF Graphic Designer of the Year 2003
    AdamPolselli.com

  3. #3
    pg for mild peril cow's Avatar
    Join Date
    Mar 2000
    Location
    nevada, usa
    Posts
    636
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    all this site is doing is a basic javascript rollover. when you move your mouse over one of the boxes, the description line appears right under the boxes. this is done with the javascript that is on the page (function imageon and imageoff).

    if you keep you mouse on that box, the description that pops up can be changed with the alt tag (inside the <a href>).

    to change the description at the bottom of your browser window, just include this code inside your <a href>:

    Code:
    onMouseOver="window.status='Change This Text'; return true" onMouseOut="window.status='Done'; return true"
    "There's no justice like angry mob justice!" --Seymour Skinner


Bookmarks

Posting Permissions

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