Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    bax
    bax is offline
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    how to create multiple corresponding text rollovers

    i am creating a header for a webpage. the header has two text menus (no images). the first menu (menu A) is like this:

    link 1a / link 2a / link 3a

    the second menu (menu B) is like this:

    link 1b
    link 2b
    link 3b

    i would like to use javascript/css to do the following:

    when you rollover link 1a, three things happen: link 1a changes color, link 1b changes color, and and link 1b adds a line of text (so it reads: link 1b : text 1b)

    i would also like- and this is where i am having trouble- for the following to happen: when you rollover link 1b, link 1b changes color and adds the additional text, as well as link 1a changes color.

    it doesn't seem so bad when i write it out here, but i can't figure out how to do it. any help is appreciated.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Code:
    <html>
    <head>
    <style type="text/css">
    a { text-decoration: none;
        color: blue;
    }
    </style>
    <script type="text/javascript">
    function mover(which)
    {
        document.getElementById("linkA"+which).style.color="red";
        document.getElementById("linkB"+which).style.color="red";
        document.getElementById("text"+which).style.visibility="visible";
    }
    function mout(which)
    {
        document.getElementById("linkA"+which).style.color="blue";
        document.getElementById("linkB"+which).style.color="blue";
        document.getElementById("text"+which).style.visibility="hidden";
    }
    </script>
    </head>
    <body>
    <a id="linkA1" href="#" onmouseover="mover(1)" onmouseout="mout(1)">ONE A</a>
    &nbsp;&nbsp:&nbsp;&nbsp;
    <a id="linkA2" href="#" onmouseover="mover(2)" onmouseout="mout(2)">TWO A</a>
    &nbsp;&nbsp:&nbsp;&nbsp;
    <a id="linkA3" href="#" onmouseover="mover(3)" onmouseout="mout(3)">THREE A</a>
    <br/><br/>
    <a id="linkB1" href="#" onmouseover="mover(1)" onmouseout="mout(1)">ONE B</a>
    <span id="text1" style="visibility: hidden;">Text One</span>
    <br/>
    <a id="linkB2" href="#" onmouseover="mover(2)" onmouseout="mout(2)">ONE B</a>
    <span id="text2" style="visibility: hidden;">Second message</span>
    <br/>
    <a id="linkB3" href="#" onmouseover="mover(3)" onmouseout="mout(3)">ONE B</a>
    <span id="text3" style="visibility: hidden;">Three's a crowd</span>
    <br/>
    </body>
    </html>
    Other ways possible. This one is simple.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    bax (12-08-2009)

  • #3
    bax
    bax is offline
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    works perfectly
    gracias

  • #4
    bax
    bax is offline
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    question: how could i use the same functionality, but different text styles? for example, in this case to make ONE A and ONE B red, and to make TWO a and TWO B purple?

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    You mean like this???
    Code:
    function mover(which)
    {
        document.getElementById("linkA"+which).style.color= which == 1 ? "red" : "green";
        document.getElementById("linkB"+which).style.color= which == 1 ? "red" : "green";
        document.getElementById("text"+which).style.visibility="visible";
    }
    If not that, explain more what you mean.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    bax (12-23-2009)

  • #6
    bax
    bax is offline
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    yes, that is what i meant. simple and works. thanks again

  • #7
    bax
    bax is offline
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    ok, sorry to beat this into the ground, but how then could i add one more color... in other words, to make link1a/1b red, 2a/2b purple, and 3a/3b green?

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Not sure what you mean.

    This?
    Code:
    <html>
    <head>
    <style type="text/css">
    a { text-decoration: none;
        color: blue;
    }
    </style>
    <script type="text/javascript">
    var choices = [ "blue", "red", "purple", "green" ];
    
    function mover(which)
    {
        document.getElementById("linkA"+which).style.color= 
            document.getElementById("linkB"+which).style.color= choices[which];
        document.getElementById("text"+which).style.visibility="visible";
    }
    function mout(which)
    {
        document.getElementById("linkA"+which).style.color="blue";
        document.getElementById("linkB"+which).style.color="blue";
        document.getElementById("text"+which).style.visibility="hidden";
    }
    </script>
    </head>
    <body>
    <a id="linkA1" href="#" onmouseover="mover(1)" onmouseout="mout(1)">ONE A</a>
    &nbsp;&nbsp:&nbsp;&nbsp;
    <a id="linkA2" href="#" onmouseover="mover(2)" onmouseout="mout(2)">TWO A</a>
    &nbsp;&nbsp:&nbsp;&nbsp;
    <a id="linkA3" href="#" onmouseover="mover(3)" onmouseout="mout(3)">THREE A</a>
    <br/><br/>
    <a id="linkB1" href="#" onmouseover="mover(1)" onmouseout="mout(1)">ONE B</a>
    <span id="text1" style="visibility: hidden;">Text One</span>
    <br/>
    <a id="linkB2" href="#" onmouseover="mover(2)" onmouseout="mout(2)">TWO B</a>
    <span id="text2" style="visibility: hidden;">Second message</span>
    <br/>
    <a id="linkB3" href="#" onmouseover="mover(3)" onmouseout="mout(3)">THREE B</a>
    <span id="text3" style="visibility: hidden;">Three's a crowd</span>
    <br/>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Ahh...that is a1/b1 red, a2/b2 purple, a3/b3 green.

    You should be able to rearrange it to what you need, no?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Tags for this Thread

    Posting Permissions

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