[Javascript] How can I change this using CSS
Roland Dong
rdong at advance.net
Wed Jul 20 17:11:19 CDT 2005
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 at LaTech.edu [mailto:javascript-bounces at LaTech.edu]
> 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 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
>
> _______________________________________________
> Javascript mailing list
> Javascript at LaTech.edu
> https://lists.LaTech.edu/mailman/listinfo/javascript
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.evolt.org/pipermail/javascript/attachments/20050720/6aa942d3/attachment.htm>
More information about the Javascript
mailing list