[Javascript] How can I change this using CSS

[Mike Dougherty]

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 at advance.net> 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 at LaTech.edu [mailto:javascript-bounces at LaTech.edu]
>> 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 at advance.net]
>> ...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 at LaTech.edu
>> ...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 at LaTech.edu
>> https://lists.LaTech.edu/mailman/listinfo/javascript
> 
> _______________________________________________
> Javascript mailing list
> Javascript at LaTech.edu
> https://lists.LaTech.edu/mailman/listinfo/javascript
> 
> 
> __________________________________________________________
> This message was scanned by ATX
> 3:53:58 PM ET - 7/20/2005