dcsimg
www.webdeveloper.com
Results 1 to 11 of 11

Thread: Span rollover color change

Hybrid View

  1. #1
    Join Date
    Oct 2005
    Posts
    232

    Span rollover color change

    Hi, I am wondering how to change the text color of something within a span? The current code is:

    <span style="color:Goldenrod">Text</span>

    I was wondering how I might be about to make it change to #fcc742 or some other color like that. I tried googling it but couldn't find anything. Help is greatly appreciated. Thanks.

  2. #2
    I'm not sure how, but I'm pretty sure you can do javascript onmouseover and onmouseout.

  3. #3
    Join Date
    Oct 2005
    Posts
    232
    I know you can do it with a picture like so:
    <span onmouseover="document.pic1.src='picture2.gif'" onmouseout="document.pic1.src='picture1.gif'"><img src="picture1.gif" name="pic1"></span>

    I have no idea how this could be changed for color though.

  4. #4
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,279
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="Content-Script-Type" content="text/javascript">
    <meta name="Content-Style-Type" content="rext/css">
    <title>Example</title>
    
    <style type="text/css">
    #foo {color:#a00}
    #foo.hover {color:#f00}
    </style>
    
    </head>
    <body>
    <div>
    <span id="foo" onmouseover="this.className = 'hover'" onmouseout="this.className = ''">Text</span>
    </div>
    </body>
    </html>
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  5. #5
    Join Date
    Oct 2005
    Posts
    232
    I unfortuneatly cannot do it that way. I need to use only a single line of code and thus cannot use or import any styles.

  6. #6

    resolved

    I remember seeing something like this somewhere. I tried it and it works, so enjoy!
    HTML Code:
    <span style="background:#DAA520;" onmouseover="this.style.background='#FCC742'" onmouseout="this.style.background='#DAA520'">Text2</span>
    Edit:
    This is how you can do Charles's way usign only one line of code. The <style> tag doesn't have to be in the <head> of the document.
    HTML Code:
    <style>#foo{background-color:#DAA520;} #foo.on{background-color:#FCC742;}</style><span id="foo" onmouseover="this.className='on'" onmouseout="this.className=''">Text</span>
    Oh yeah. The #DAA520 is the color code for goldenrod, just to let you know.
    Last edited by Wiz Creations; 07-29-2006 at 12:25 PM. Reason: added another solution

  7. #7
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,279
    Quote Originally Posted by Wiz Creations
    The <style> tag doesn't have to be in the <head> of the document.
    Quite the contrary, it can go no other place.

    Given your restrictions use:
    HTML Code:
    <span id="foo" onmouseover="this.style.backgroundColor = '#f00'" onmouseout="this.style.backgroundColor = '#a00'">Text</span>
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  8. #8

    Wink

    Quote Originally Posted by Charles
    Quite the contrary, it can go no other place.
    I have proof that it works. Go to www.wizcreations.com . You'll see that both of my previously posted solutions work.

    Edit:
    I removed that from my website for reasons posted below.
    Last edited by Wiz Creations; 07-29-2006 at 03:08 PM.

  9. #9
    Oh I know what you're saying: It's not allowed there... got it. But it does work.

    Okay then... bmass doesn't have to use the second one I posted, but he/she can still use
    HTML Code:
    <span style="background:#DAA520;" onmouseover="this.style.background='#FCC742'" onmouseout="this.style.background='#DAA520'">Text</span>

  10. #10
    Join Date
    Oct 2005
    Posts
    232
    Thank you very much. That worked.

  11. #11
    Join Date
    Jun 2006
    Posts
    4
    take a look here its dowing what you need ....

    http://www.mypccenter.com/privacy/

    after the scan the left buttons change the color from black to red inside a span in one line, very simple code...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles