SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    573
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    changing link colour on mouse click

    Hi

    I have a frameset top, left, and main. In the left frame is the navigation made up of text links (css), what i want to happen is when a user clicks on one of those links i want it to stay a certain colour until they click on another link.

    a:active is not good enough as when you click anywhere on the page the link colour turns off.

    any ideas?

    thanks for any help

  2. #2
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <a href="blah blah blah" onClick="this.style.color='red'; return true">Text</a>

  3. #3
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    573
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the response

    what you gave me works great, but i also need the colour to change back to default when the user clicks on another link

    any ideas?

    thanks again

  4. #4
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Something like this should do the job:

    <script>
    function ChangeColour(ThisLink)
    {
    var link1 = document.getElementById("Link1");
    var link2 = document.getElementById("Link2");
    var link3 = document.getElementById("Link3");
    var link4 = document.getElementById("Link4");

    var Curlink = document.getElementById(ThisLink.id);

    link1.style.color = "Green";
    link2.style.color = "Green";
    link3.style.color = "Green";
    link4.style.color = "Green";

    Curlink.style.color = "Red";
    }
    </script>
    </head>
    <body>
    <a id="Link1" href="" onclick="ChangeColour(this); return true;">Blah</a>
    <a id="Link2" href="" onclick="ChangeColour(this); return true;">Blah</a>
    <a id="Link3" href="" onclick="ChangeColour(this); return true;">Blah</a>
    <a id="Link4" href="" onclick="ChangeColour(this); return true;">Blah</a>

  5. #5
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    573
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the response

    i tried it out but dosen;t seem to give the results i want.

    At the moment all the text links are white and when you roll over them they turn blue, when the user clicks on one of those links i want them to stay blue until the user clicks on another link where that stays blue and the other link turns back to white

    any ideas?

  6. #6
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you be a bit more specific as to what is and isn't working.

    The code I suggested wasn't tested - it was just an idea to get you started - it should do something like what you want when working properly.

  7. #7
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    573
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i added the code but when you click on say the home link all the links turn green at once and when you click on another link they still stay green

    i need them to turn back to white when another link has been clicked

  8. #8
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    True - you are supposed to change the colours I used to be the colours you want. Green and red are just examples. You need to replace that with white and blue.

  9. #9
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    573
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for all your help..one problem still when you click on another link i want the previous link that was clicked to turn back to its default of white ?!?

  10. #10
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thats what the function is trying to do, the logic is as follows:

    - Set all links backs to default colour
    - Set current link to new colour

    If that doesn't help then post the real code so I can play with it.

  11. #11
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    573
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    heres the code for the side navigation with your javascript at the top, i have not put any code into the a links

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    <html>
    <head>
    <title>Untitled</title>
    <LINK rel="stylesheet" media="screen" href="app_stylesheet.css" type="text/css">
    <script>
    function ChangeColour(ThisLink)
    {
    var link1 = document.getElementById("Link1");
    var link2 = document.getElementById("Link2");
    var link3 = document.getElementById("Link3");
    var link4 = document.getElementById("Link4");

    var Curlink = document.getElementById(ThisLink.id);

    link1.style.color = "Green";
    link2.style.color = "Green";
    link3.style.color = "Green";
    link4.style.color = "Green";

    Curlink.style.color = "red";
    }</script>
    </head>


    <body>
    <table width="213" height="367" border="0" cellspacing="0" cellpadding="10" background="images/bground.gif" style="background-repeat: no-repeat;">
    <tr>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td valign="top">
    <a href="main.htm" target="mainFrame">Home</a>
    <br><br class="smallbr">
    <a target="mainFrame">Pet Reader</a>
    <br><br class="smallbr">
    <a href=".htm" target="mainFrame">Pet Insurance</a>
    <br><br class="smallbr">
    <a href=".htm" target="mainFrame">What is Pet-ID</a>
    <br><br class="smallbr">
    <a href=".htm" target="mainFrame">Brochure</a>
    <br><br class="smallbr">
    <a href=".htm" target="mainFrame">Members Area</a>
    <br><br class="smallbr">
    <a href=".htm" target="mainFrame">Other Applications</a>
    <br><br class="smallbr">
    <a href=".htm" target="mainFrame">Distributors</a>
    </td>
    </tr>
    </table>
    <table width="165" bgcolor="#012E89" height="100%">
    <tr>
    <td>&nbsp;</td>
    </tr>
    </table>


    </body>
    </html>

  12. #12
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    573
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry forgot that the link classes are from white to blue in my external stylesheet

    thanks again for all your help

  13. #13
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well when I made enabled the code (You didn't seem to be using it) it worked perfectly. The current link is red and all the others are white.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    <html>
    <head>
    <title>Untitled</title>
    <LINK rel="stylesheet" media="screen" href="app_stylesheet.css" type="text/css">
    <style>
    a {background: Black; color:white}
    </style>
    <script>
    function ChangeColour(ThisLink)
    {
    var link1 = document.getElementById("Link1");
    var link2 = document.getElementById("Link2");
    var link3 = document.getElementById("Link3");
    var link4 = document.getElementById("Link4");
    var link5 = document.getElementById("Link5");
    var link6 = document.getElementById("Link6");
    var link7 = document.getElementById("Link7");
    var link8 = document.getElementById("Link8");

    var Curlink = document.getElementById(ThisLink.id);

    link1.style.color = "white";
    link2.style.color = "white";
    link3.style.color = "white";
    link4.style.color = "white";
    link5.style.color = "white";
    link6.style.color = "white";
    link7.style.color = "white";
    link8.style.color = "white";

    Curlink.style.color = "red";
    }</script>
    </head>


    <body>
    <table width="213" height="367" border="0" cellspacing="0" cellpadding="10" background="images/bground.gif" style="background-repeat: no-repeat;">
    <tr>
    <td> </td>
    </tr>
    <tr>
    <td valign="top">
    <a id="Link1" href="main.htm" target="mainFrame" onClick="ChangeColour(this); return true">Home</a>
    <br><br class="smallbr">
    <a id="Link2" href=".html" target="mainFrame" onClick="ChangeColour(this); return true">Pet Reader</a>
    <br><br class="smallbr">
    <a id="Link3" href=".htm" target="mainFrame" onClick="ChangeColour(this); return true">Pet Insurance</a>
    <br><br class="smallbr">
    <a id="Link4" href=".htm" target="mainFrame" onClick="ChangeColour(this); return true">What is Pet-ID</a>
    <br><br class="smallbr">
    <a id="Link5" href=".htm" target="mainFrame" onClick="ChangeColour(this); return true">Brochure</a>
    <br><br class="smallbr">
    <a id="Link6" href=".htm" target="mainFrame" onClick="ChangeColour(this); return true">Members Area</a>
    <br><br class="smallbr">
    <a id="Link7" href=".htm" target="mainFrame" onClick="ChangeColour(this); return true">Other Applications</a>
    <br><br class="smallbr">
    <a id="Link8" href=".htm" target="mainFrame" onClick="ChangeColour(this); return true">Distributors</a>
    </td>
    </tr>
    </table>
    <table width="165" bgcolor="#012E89" height="100%">
    <tr>
    <td> </td>
    </tr>
    </table>


    </body>
    </html>

  14. #14
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    573
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    great worked a treat!

    thanks again


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
  •