[Javascript] How can I change this using CSS

[rdong at advance.net (Roland Dong)]

Mike, Thanks for showing me the trick! I think the code still has a problem.

 

First of all, upon opening the page, the background color is visible. How do
set the default background to "cat"? I switched "cat" and "on" and get wired
result. Please see the see the source here
<http://www.wiu.edu/users/murbhd/menuTest.html> . I took the code from
javascript into html just to make it easy to test.

 

I think using function could be complicated here. Since each cell also
contains image and links and they all trigger mouse over/out events.
Already tried and gave up.

 

Thanks you very much

 

 

> -----Original Message-----

> From: javascript-bounces@xxxxxxxxxx [mailto:javascript-bounces@xxxxxxxxxx]

> On Behalf Of Mike Dougherty

> Sent: Wednesday, July 20, 2005 4:28 PM

> To: [JavaScript List]

> Subject: Re: [Javascript] How can I change this using CSS

> 

> document.write('<div

> onmouseOver=\'this.className=this.className.replace("on", "cat");\'

> onmouseout=\'this.className=this.className.replace("cat", "on");\'

> class="cat on">');

> 

> note:  you must escape the single quote to delimit the onmouseover/out

> attributes

> it takes some concentration to maintain all the nested string delimiters

> 

> On Wed, 20 Jul 2005 15:53:28 -0400

>   "Roland Dong" <rdong@xxxxxxxxxxx> wrote:

> > Thanks Mike and Ian for your help.

> >

> > As a matter of fact, the html is javascript generated so I have to write

> > something like:

> >

> > document.write('<div

> onmouseOver=this.className=this.className.replace("on",

> > "cat"); onmouseout=this.className.replace("cat", "on"); class="cat

> on">');

> >

> > Can you tell me what is wrong with the above code, I tried single quote,

> > double quote and no quote on cat and on... but I keep getting errors.

> What

> > is the right syntax for the above code?

> >

> >> -----Original Message-----

> >> From: javascript-bounces@xxxxxxxxxx [mailto:javascript-

> bounces@xxxxxxxxxx]

> >> On Behalf Of Ian Skinner

> >> Sent: Wednesday, July 20, 2005 2:55 PM

> >> To: [JavaScript List]

> >> Subject: RE: [Javascript] How can I change this using CSS

> >>

> >> Something like this maybe?  May require some tinkering depending on the

> >> effect you are actually going for.

> >>

> >> This uses the CSS specification that the class can be a space

> delimitated

> >> list of two or more classes to apply to the given element.

> >>

> >>

> >> div onmouseover: this.className=this.className.replace(" on", " over");

> >> onmouseout: this.className=this.className.replace(" over", " on");

> >> class="cat on">

> >> --------------

> >> Ian Skinner

> >> Web Programmer

> >> BloodSource

> >> www.BloodSource.org

> >> Sacramento, CA

> >>

> >> "C code. C code run. Run code run. Please!"

> >> - Cynthia Dunning

> >>

> >> ...-----Original Message-----

> >> ...From: Roland Dong [mailto:rdong@xxxxxxxxxxx]

> >> ...Sent: Wednesday, July 20, 2005 11:42 AM

> >> ...To: '[JavaScript List]'

> >> ...Subject: [Javascript] How can I change this using CSS

> >> ...

> >> ...

> >> ...Hello:

> >> ...

> >> ...I have the following working code:

> >> ...<div onmouseOver="style.backgroundColor='#FF00FF'; " onmouseOut=

> >> ..."style.backgroundColor='#FFFFFF'" class="cat">

> >> ...

> >> ...

> >> ...I want to move background color changing code to CSS. I tried

> something

> >> ...like

> >> ...this:

> >> ...

> >> ...<div onmouseover: this.className="on"

> onmouseout:this.className="off"

> >> ...class="cat">

> >> ...

> >> ...in style sheet add:

> >> ...

> >> ...................

> >> ....off{ background: #D2D2EC; }

> >> ....on { background: #FFFFFF; }

> >> ....................

> >> ...

> >> ...However, since there is already a "cat" class, it would override the

> >> ..."cat"

> >> ...class.

> >> ...

> >> ...Any suggestion?

> >> ...

> >> ...Thanks

> >> ...

> >> ...

> >> ...

> >> ...Here is part of the style:

> >> ...<style >

> >> ...table.menu       {position:absolute; visibility:hidden; background-

> >> color:

> >> ...#FFF}

> >> ...    .off{ background: #D2D2EC; }

> >> ...    .on { background: #FFFFFF; }

> >> ...

> >> ...    /* submenu formatting classes */

> >> ...    td .col                {border: 1px solid #00186B}

> >> ...    .cat, .itm       {border-bottom: 1px solid #ADADAD; padding:

> 2px

> >> ...3px; background-color: #FFF}

> >> ...    .cat             {font-weight: bold}

> >> ...    .cat img         {margin-right: 5px}

> >> ...    .cat .new        {color: #FF0000}

> >> ...    .itm a, .cat a    {text-decoration: none}

> >> ...    .itm a, .itm a:hover, .itm a:visited, .itm a:active

> >> ...                     {color: #42425D}

> >> ...    .cat a, .cat a:hover, .cat a:visited, .cat a:active

> >> ...                     {color: #383843}

> >> ...    .csel            {background-color: #D3D4ED}

> >> ...

> >> ...

> >> ...<style >

> >> ...

> >> ..._______________________________________________

> >> ...Javascript mailing list

> >> ...Javascript@xxxxxxxxxx

> >> ...https://lists.LaTech.edu/mailman/listinfo/javascript

> >>

> >> Confidentiality Notice:  This message including any

> >> attachments is for the sole use of the intended

> >> recipient(s) and may contain confidential and privileged

> >> information. Any unauthorized review, use, disclosure or

> >> distribution is prohibited. If you are not the

> >> intended recipient, please contact the sender and

> >> delete any copies of this message.

> >>

> >>

> >> _______________________________________________

> >> Javascript mailing list

> >> Javascript@xxxxxxxxxx

> >> https://lists.LaTech.edu/mailman/listinfo/javascript

> >

> > _______________________________________________

> > Javascript mailing list

> > Javascript@xxxxxxxxxx

> > https://lists.LaTech.edu/mailman/listinfo/javascript

> >

> >

> > __________________________________________________________

> > This message was scanned by ATX

> > 3:53:58 PM ET - 7/20/2005

> 

> _______________________________________________

> Javascript mailing list

> Javascript@xxxxxxxxxx

> https://lists.LaTech.edu/mailman/listinfo/javascript

-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.LaTech.edu/pipermail/javascript/attachments/20050720/6aa942d3/attachment-0001.html