SitePoint Sponsor

User Tag List

Results 1 to 24 of 24
  1. #1
    SitePoint Zealot
    Join Date
    Apr 2001
    Location
    Northern California
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What's the easiest way to make text change color on a mouseover? Is there some code I can use? I'm using FP.

    thanks

  2. #2
    midnight coder
    Join Date
    Dec 2000
    Location
    The flat edge of the world
    Posts
    838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ooo...FP...

    Easiest is to use CSS.

    Code:
    <head>
    <style type="text/css">
    a:link {  color: #990000; text-decoration: none}
    a:hover {  color: #FF0000; text-decoration: none}
    </style>
    </head>
    
    <body>
    <a href="page.php">Link</a>
    </body>

  3. #3
    Irritability Defined
    Join Date
    Jul 2000
    Location
    80,000 feet below the surface
    Posts
    1,442
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ... Of course, bear in mind that text rollovers work correctly in IE... Netscape doesn't render it at all (unless you use Netscape 6)
    My 2 Cents (or is that 2.2 Cents including GST?)

  4. #4
    Gong!
    Join Date
    May 2000
    Location
    Helsinki, Finland
    Posts
    229
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by BC
    ... Of course, bear in mind that text rollovers work correctly in IE... Netscape doesn't render it at all (unless you use Netscape 6)
    Fortunately you didn't say only, because rollovers do work on Opera and other Gecko-based browsers (such as Netscape 6, Mozilla, K-Meleon ...).
    HighCheats - game cheats, codes, tips and tricks for PC and various console platforms

  5. #5
    Irritability Defined
    Join Date
    Jul 2000
    Location
    80,000 feet below the surface
    Posts
    1,442
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by hmahonen
    <font face="verdana, arial, helvetica" size="2" class="mfont">Fortunately you didn't say only, because rollovers do work on Opera and other Gecko-based browsers (such as Netscape 6, Mozilla, K-Meleon ...).</font>
    That is indeed correct
    My 2 Cents (or is that 2.2 Cents including GST?)

  6. #6
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    robo...

    thanks for posting that code there, but if you are going to give someone code for text rollovers, make sure that you give them the COMPLETE code including visited and visited hover. That way, they won't come back and say that it didn't work. That has happened before because the person asking for the code had of course already clicked on the link.

    Here is the complete code:

    <style type="text/css">
    <!--

    a:link { font-weight: bold; color: 000066 ; text-decoration: none; }
    a:hover { font-weight: bold; color: 993300; text-decoration: none; }
    a:visited { font-weight: bold; color: 000066; text-decoration: none; }
    a:visited:hover { font-weight: bold; color: 993300; text-decoration: none; }
    a:active { font-weight: bold; color: 993300; text-decoration: none; }

    -->
    </style>

    ps...I wasn't trying to be rude so please don't take it that way. I was just adding to your post.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  7. #7
    SitePoint Zealot
    Join Date
    Apr 2001
    Location
    Northern California
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I appreciate the help. Thanks to everyone!

    Dino

  8. #8
    Anyone seen my cypher? OneChance's Avatar
    Join Date
    Apr 2001
    Location
    Seattle
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by creole
    a:visited:hover { font-weight: bold; color: 993300; text-decoration: none; }
    I've never heard of visited:hover. What does it do? I tried to use it (I have IE 5.5) and it has no effect. Oh, BTW, don't forget your pound sign in the color.

  9. #9
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oops...thanks for pointing out the missing # sign.

    Visited:hover does just what it says. I found that extra bit at Webmonkey I think.

    It really does make a difference, of course it is still IE 5+ specific.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  10. #10
    Anyone seen my cypher? OneChance's Avatar
    Join Date
    Apr 2001
    Location
    Seattle
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, I see. My problem was that I had a:hover coming after a:visited:hover. But if your unvisited link hover isn't any different than your visited link hover, then you might as well just specify a:hover and put it after a:visited. There some info about it here.

  11. #11
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,810
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Excellent link Onechance - gets a spot on my new improved linkpage!!

    H
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS

  12. #12
    PHP Developer W1LL's Avatar
    Join Date
    Apr 2001
    Location
    Leicester, UK
    Posts
    459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, BTW, don't forget your pound sign in the color.
    I am from England, and there is actually no pound sign used in the script. The pound sign is . Just correcting you, no offence meant.

    - Will

  13. #13
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by W1LL


    I am from England, and there is actually no pound sign used in the script. The pound sign is . Just correcting you, no offence meant.

    - Will
    Good point W1LL

    However, he actually meant the # symbol. In the USA, we call that symbol the "pound" sign. Don't ask me why, that's just what we call it.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  14. #14
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,810
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I think # is hash in the uk?
    Not wanting to open the legalisation debate

    H
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS

  15. #15
    SitePoint Zealot Lor's Avatar
    Join Date
    Mar 2001
    Location
    cambridge, MA
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah - I'm still getting used to being on the phone and told to press the pound button. I ended up having to ask a friend what the "pound button" was when I first came here.

  16. #16
    Irritability Defined
    Join Date
    Jul 2000
    Location
    80,000 feet below the surface
    Posts
    1,442
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    # is called the 'hash' button in Australia....
    My 2 Cents (or is that 2.2 Cents including GST?)

  17. #17
    midnight coder
    Join Date
    Dec 2000
    Location
    The flat edge of the world
    Posts
    838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Same here, the # is call hash...

    So what do US people call this: ?

  18. #18
    The Hiding One lynlimz's Avatar
    Join Date
    Jul 2000
    Location
    Singapore
    Posts
    2,103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Vital!
    It is a must that the a:hover comes after all others. eg.

    a:link {}
    a:visited {}
    a:active {}
    a:hover {}

    or the hover effect might not work. as in...whe you apply a backgorund color to the style.
    "Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world."
    -- Albert Einstein

  19. #19
    Anyone seen my cypher? OneChance's Avatar
    Join Date
    Apr 2001
    Location
    Seattle
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The "#" is also known as the octothorp. Also, from The Free On-line Dictionary of Computing:
    The pronunciation of '#' as 'pound' is common in the US but a bad idea; {Commonwealth Hackish} has its own, rather more opposite use of "pound sign" (confusingly, on British keyboards the pound graphic happens to replace '#'; thus Britishers sometimes call '#' on a US-ASCII keyboard "pound", compounding the American error). The US usage derives from an old-fashioned commercial practice of using a '#' suffix to tag pound weights on bills of lading. The character is usually pronounced 'hash' outside the US.
    I don't know if this is 100% true, but it's interesting I guess.

  20. #20
    SitePoint Addict
    Join Date
    Apr 2001
    Location
    Nottingham, England.
    Posts
    209
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    FP is...?

    Anyway I'm all for CSS but I came across a fading script recently which will cause the link to fade from one colour to another onmouseover.

    I don't have NS on my PC so does anyone know if it works on NS? I should think so since it's a javascript...
    Absence of evidence is not evidence of absence.

  21. #21
    midnight coder
    Join Date
    Dec 2000
    Location
    The flat edge of the world
    Posts
    838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by paroxysm
    I don't have NS on my PC so does anyone know if it works on NS? I should think so since it's a javascript...
    It does not work on NS4, but does work on NS6 and most other browsers.

    And it's not JavaScript, it's CSS, which is different.

  22. #22
    Anyone seen my cypher? OneChance's Avatar
    Join Date
    Apr 2001
    Location
    Seattle
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by paroxysm
    FP is...?
    FrontPage.

  23. #23
    Technically, a bit dim macdan's Avatar
    Join Date
    Feb 2001
    Location
    London
    Posts
    344
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey there

    on the subject of rollover colours and CSS how do I set up multiple rollover colour rules - ones which I can refer to as a class? My reason being that a site I'm doing has several different page background colours

    Thanks for your help
    gorillaweb is a small London based digital design agency.

  24. #24
    Technically, a bit dim macdan's Avatar
    Join Date
    Feb 2001
    Location
    London
    Posts
    344
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    doh! I'm dim, that's easy.

    a:link {color: red;
    text-decoration: none;}

    a.alternative:link {color: blue;
    text-decoration: none;}

    call from <a href="page.htm" class="alternative">
    gorillaweb is a small London based digital design agency.


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
  •