[Javascript] How can I change this using CSS

[Ian Skinner]

This is getting pretty complicated for inline calls; can't you do something like to use functions here?  You are really getting into nested quotes and equal signs and just seems to be getting ugly. 

The only possible fix I can see is that the event handlers need quotes.  If I was hand typing the html I would write something like this, if I was for some reason not using a function.

<div onmouseover="this.className=this.className.replace('on','cat');" ...>

Notice the quotes surrounding the value of the onmouseover property.  How you get that into a doc.write property is beyond me.  Unless you can concatenate it together in a variable and then pass that variable to the document.write:  document.write(divString);

--------------
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 12:53 PM
...To: '[JavaScript List]'
...Subject: RE: [Javascript] How can I change this using CSS
...
...
...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