SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: mouseover text?

  1. #1
    SitePoint Wizard edshuck's Avatar
    Join Date
    Jul 2000
    Posts
    1,200
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi

    i want to put some mouseovers in my page but do not want to use graphics (*.gif or *.jpg). all i want to do is move from something like SitePoint.com to SitePoint.com any ideas? I seem to recall this.

    thanks edshuck

  2. #2
    SitePoint Addict
    Join Date
    Aug 2000
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Only works for IE with this:

    <style>
    a:hover{font-style:italic;
    }
    </style>

    You can achieve other effects on links with CSS.

    <style><a:hover{color:red; font-weight:bold; font-style:italic; text-transform:uppercase; font-size:105%; background-color:yellow;
    }
    </style>

    Good Luck and remember... IE only!

  3. #3
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ed, what you are needing is CSS or Stylesheets (as the kids are calling it<grin>).

    To do what you are looking for is very easy.

    <!-- declare the style tag and hide it from older browsers -->
    <style type="text/css">
    <!--

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

    <!-- extra bonus round -->
    a.header:link { font-weight: bold; color: 000066 ; text-decoration: none; }

    -->
    </style>

    What that will give you is bold, blue (I think it's blue) links. When you roll over them you will get Bold, Italic, brown links.

    The extra bonus part is that if you use that same method for a.header etc..., you can get classes of link colors for use on different colored backgrounds. for the first type, you don't have to do anything special, but for the second (a.header) you have to call it in your HREF tag like so <A HREF="link.html" class="header">LINK</A>

    The visited, visited hover and active parts should be self-explanatory. Hope that helped. I'm just glad I could finally give some back to the community.

    peace out
    andy



  4. #4
    Serial Publisher silver trophy aspen's Avatar
    Join Date
    Aug 1999
    Location
    East Lansing, MI USA
    Posts
    12,939
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the hover pseudo class does not work in NS 4.x, it is supported in ie 4+ and in ns 6

  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)
    Theoretically if you were really desperate to use mouseover text in Netscape then you can do it using their <layer> and <ilayer> tags, but they're gonna be redundant soon anyway. If anyone wants the explanation/how-to (it originally came from Brainjar before Mike took it down) then I'd be glad to post it.
    My 2 Cents (or is that 2.2 Cents including GST?)

  6. #6
    SitePoint Wizard edshuck's Avatar
    Join Date
    Jul 2000
    Posts
    1,200
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi

    i just installed the code from creole and it works great in my ie5.5

    BC, can you please repost the information mentioned. thanks

    thanks everyone. sorry about the delay in getting back.

    [Edited by edshuck on 10-26-2000 at 11:30 PM]

  7. #7
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Glad that it worked Ed...I love stylesheets and I hope someday, before I die, that all browsers will support them...

    <grin>


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
  •