SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: Change colour

  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2003
    Location
    UK
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Change colour

    Hi,

    I have the following code:

    Code:
    td onMouseOver ="this.style.backgroundColor='#EAE3DC';" onMouseOut ="this.style.backgroundColor='#F6F2EE';"
    But I want this colour to change depending on what page they are on.

    Is there a way to do this automatically (JavaScript?) or do i have to code the colour on each page.

    I hope this makes sense!

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    If your table cell only contains a link (like the sidebar at http://msdn.microsoft.com/), you can do something like this instead:

    CSS:
    Code:
    td a {
      background-color: #f6f2ee;
      display: block;
    }
    td a:hover {
      background-color: #eae3dc;
    }
    HTML:
    HTML Code:
    <td><a href="/" title="Home">Home</a></td>

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2003
    Location
    UK
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is exactly what I want.....but I want the colour for each page to be different.

    I dont want to have to code the hex code for each page, because there are quite a few.

    Do you know if there is a way to specify a list of colours and then generate the css from that list, being different for each page?

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Something like this super ugly example maybe?
    Code:
    td.about a {
      background-color: red;
      display: block;
    }
    td.about a:hover {
      background-color: lime;
    }
    td.contact a {
      background-color: black;
      display: block;
    }
    td.contact a:hover {
      background-color: yellow;
    }
    HTML:
    HTML Code:
    <td class="about"><a href="/">Home</a></td>
    
    <td class="contact"><a href="/">Home again</a></td>
    You just have to define different CSS classes with your respective colors and specify the class used in your HTML page. If you wanted it randomized or something similar though, I recommend using server-side code to do that.


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
  •