SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict eJM's Avatar
    Join Date
    Feb 2004
    Location
    teh Ether
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can I use in-line CSS to code a roll-over?

    I would like to do a simple roll-over link on an old forum that allows the use of HTML. I can't edit the CSS document or the page source, but I can use HTML in a post. Is there a way to do a simple roll-over with in-line CSS and HTML code? It would swap a word for a small graphic and link to another site (such as the sentence "Only YOU can prevent forest fires." where the YOU becomes a pointing finger when you hover over it and links to a Forest Service site).

    The standard for the page is underlined blue links, but I know that can be changed with a text-decoration style change. I just can't figure out how to make the link a roll-over. Thanks for any help.

    Grump

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    No? not really, but try this

    <a href="##" onmouseover="this.style.color='#66ccff';" onmouseout="this.style.color='#ff0000';"
    style=" text-decoration: none; font-weight: bold; font-size: 5.9em ;color:#ff0000;">12345</a>

  3. #3
    SitePoint Addict eJM's Avatar
    Join Date
    Feb 2004
    Location
    teh Ether
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, all4nerds, that does work. Is there a way to replace the onmouseover text color to an image?

    Grump

  4. #4
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    try this

    <a href="##" onmouseover="this.style.backgroundImage='url(y.jpg)'" onmouseout="this.style.backgroundImage='url(x.jpg)'"
    style=" text-decoration: none; font-weight: bold; font-size: 5.9em ;color:#ff0000;background:url(x.jpg)">12345</a>


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
  •