#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2001
    Posts
    8
    Rep Power
    0

    CSS within JavaScript


    Hello

    Trying to get CSS A:Hover to work within some JavaScript either coded inline or using a Class.

    I have a Class defined which works fine on other parts of the page but no matter what I try I can't get anything to work in this script.

    Thanks for any help. Script follows...

    <table border="1" cellpadding="0" align="right" width="170">
    <tr>
    <td valign="top">

    <!-- START OF SCRIPT -->
    <!-- For more scripts visit http://www.netpedia.com -->

    <SCRIPT LANGUAGE="JavaScript">
    <!-- HIDE FROM OLD BROWSERS
    // This script is Copyright 1997 JavaScript World
    // http://chelsea.ios.com/~benny3/javascript/
    // feel free to edit/use this script so long as you
    // keep this copyright in the script

    var today = new Date ()
    var hrs = today.getHours();
    document.writeln("<CENTER>");

    document.writeln("<FONT COLOR=#009933 face='arial, helvetica, sans-serif'><b>Good");
    if (hrs < 5)
    document.write (" Morning!</b></FONT></th></td></tr><tr><td align='center' valign='bottom' height='80' background='images/cloth.jpg' ><a href='pages/to_let.html'><span style='color:#999999; text-decoration: underline; color:#999999'>Space to let</span></a><br></td></tr><tr><td align='center' valign='bottom' height='80' background='images/cloth.jpg'><a href='pages/to_let.html'><span style='color:#999999; text-decoration: underline; color:#999999'>Space to let</span></a><br></td></tr><tr><td align='center' valign='bottom' height='80' background='images/cloth.jpg'><a href='pages/to_let.html'><span style='color:#999999; text-decoration: underline; color:#999999'>Space to let</span></a><br></td></tr><tr><td align='center' valign='bottom' height='80' background='images/cloth.jpg'><a href='pages/to_let.html'><span style='color:#999999; text-decoration: underline; color:#999999'>Space to let</span></a><br></td></tr><tr><td align='center' valign='bottom' height='80' background='images/cloth.jpg'><a href='pages/to_let.html'><span style='color:#999999; text-decoration: underline; color:#999999'>Space to let</span></a><br></td></tr><tr><td align='center' valign='bottom' height='80' background='images/cloth.jpg'><a href='pages/to_let.html'><span style='color:#999999; text-decoration: underline; color:#999999'>Space to let</span></a><br><br");
    else if (hrs < 12)
    document.write ("Morning!</b></FONT></th></td></tr><tr><td align='center' valign='bottom' height='80' background='images/cloth.jpg'><a href='pages/to_let.html'><span style='color:#999999; text-decoration: underline; color:#999999'>Space to let</span></a><br><br<br</td></tr><tr><td align='center' valign='bottom' height='80' background='images/cloth.jpg'><a href='pages/to_let.html'><span style='color:#999999; text-decoration: underline; color:#999999'>Space to let</span></a><br><br</td></tr><tr><td align='center' valign='bottom' height='80' background='images/cloth.jpg'><a href='pages/to_let.html'><span style='color:#999999; text-decoration: underline; color:#999999'>Space to let</span></a><br><br</td></tr><tr><td align='center' valign='bottom' height='80' background='images/cloth.jpg'><a href='pages/to_let.html'><span style='color:#999999; text-decoration: underline; color:#999999'>Space to let</span></a><br><br</td></tr><tr><td align='center' valign='bottom' height='80' background='images/cloth.jpg'><a href='pages/to_let.html'><span style='color:#999999; text-decoration: underline; color:#999999'>Space to let</span></a><br><br</td></tr><tr><td align='center' valign='bottom' height='80' background='images/cloth.jpg'><a href='pages/to_let.html'><span style='color:#999999; text-decoration: underline; color:#999999'>Space to let</span></a><br><br");
    else if (hrs <= 16)
    document.write ("Afternoon!</b> <FONT COLOR=red></FONT></th></td></tr><tr><td align='center' valign='bottom' height='80' background='images/cloth.jpg'><a href='pages/to_let.html'><span style='color:#999999; text-decoration: underline; color:#999999'>Space to let</span></a><br><br</td></tr><tr><td align='center' valign='bottom' height='80' background='images/cloth.jpg'><a href='pages/to_let.html'><span style='color:#999999; text-decoration: underline; color:#999999'>Space to let</span></a><br><br</td></tr><tr><td align='center' valign='bottom' height='80' background='images/cloth.jpg'><a href='pages/to_let.html'><span style='color:#999999; text-decoration: underline; color:#999999'>Space to let</span></a><br><br</td></tr><tr><td align='center' valign='bottom' height='80' background='images/cloth.jpg'><a href='pages/to_let.html'><span style='color:#999999; text-decoration: underline; color:#999999'>Space to let</span></a><br><br</td></tr><tr><td align='center' valign='bottom' height='80' background='images/cloth.jpg'><a href='pages/to_let.html'><span style='color:#999999; text-decoration: underline; color:#999999'>Space to let</span></a><br><br</td></tr><tr><td align='center' valign='bottom' height='80' background='images/cloth.jpg'><a href='pages/to_let.html'><span style='color:#999999; text-decoration: underline; color:#999999'>Space to let</span></a><br><br");
    else
    document.write (" Evening!</b><FONT COLOR=#red></th></td></tr><tr><td align='center' valign='bottom' height='80'background='images/cloth.jpg'><a href='pages/to_let.html'><span style='color:#999999; text-decoration: underline; color:#999999'>Space to let</span></a><br><br</td></tr><tr><td align='center' valign='bottom' height='80' background='images/cloth.jpg'><a href='pages/to_let.html'><span style='color:#999999; text-decoration: underline; color:#999999'>Space to let</span></a><br><br</td></tr><tr><td align='center' valign='bottom' height='80' background='images/cloth.jpg'><a href='pages/to_let.html'><span style='color:#999999; text-decoration: underline; color:#999999'>Space to let</span></a><br><br</td></tr><tr><td align='center' valign='bottom' height='80' background='images/cloth.jpg'><a href='pages/to_let.html'><span style='color:#999999; text-decoration: underline; color:#999999'>Space to let</span></a><br><br</td></tr><tr><td align='center' valign='bottom' height='80' background='images/cloth.jpg'><a href='pages/to_let.html'><span style='color:#999999; text-decoration: underline; color:#999999'>Space to let</span></a><br></td></tr><tr><td align='center' valign='bottom' height='80' background='images/cloth.jpg'><a href='pages/to_let.html'><span style='color:#999999; text-decoration: underline; color:#999999'>Space to let</span></a><br>");
    if (hrs < 5) document.write("<FONT COLOR=#red></FONT>");
    if (hrs > 5) document.write("<FONT COLOR=#red></FONT>");
    document.writeln("</FONT>");
    document.writeln("<FONT COLOR=red>");
    document.writeln("</FONT>");
    document.writeln("</CENTER>");
    // STOP HIDE -->

    </SCRIPT>

    <!-- END OF SCRIPT -->
    </td></tr></table>
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Nov 2001
    Posts
    765
    Rep Power
    13
    With this assigned inline - twice:

    <span style='color:#999999; text-decoration: underline; color:#999999'>

    ...don't wait around for CSS declared in a style sheet somewhere to do anything; inline CSS/HTML formatting pretty much carries the day. There is a weighting scheme deciding who wins out. Put the default rules in the style sheet as well.

    http://www.hwg.org/resources/faqs/cssFAQ.html#cascade

    A few HTML errors in there...
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2001
    Posts
    8
    Rep Power
    0
    Well I just can't get the Hover to work inline within just this one area. There is no problem anywhere else on the page with it.

    I sure would like to see a pure inline Hover code. As if there were no style sheets involved at all. Just the inline code only. But I can't find it anywhere.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Nov 2001
    Posts
    765
    Rep Power
    13
    'Hover' is a class - or, more accurately, a pseudo-class. You don't declare classes inline, you assign them. They're declared elsewhere.

    You can always use CSS & scripting (mouseover/mouseout) to simulate a hover, or combine it with other CSS. See this:

    http://www.w3schools.com/css/css_pseudo_classes.asp
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2001
    Posts
    8
    Rep Power
    0
    Thanks!

IMN logo majestic logo threadwatch logo seochat tools logo