Re: onMouseOver

Steve,

I must start by saying I have NEVER done what you are asking, so what I am
going to suggest might not work, but may at least nudge you in the right
direction...

I notice in your code that you have a background setting that is changed by
the onMouseOver event handler. It would seem to me that if you were to
define two different styles in your style sheet, say for example:

<.style type="text/css">
<.!--
   .MouseOverOn {background-color:#90A8C0; height=20; font-size:11pt;
border:#D1DBE4 1px solid;}
   .MouseOverOff {background-color:#D1DBE4; height=20; font-size:11pt;
border:#90A8C0 1px solid;}
// -->
<./style>

...and then in the actual HTML for the mouseover have it switch the
classname for the area in question from one style to the other, perhaps
like:

<.input type="submit" value="Purdue" style="MouseOverOff"
onClick="parent.display.location='http://www.purdue.edu'; return true;"
onMouseOver="style='MouseOverOn'" onMouseOut="style='MouseOverOff'">

Again, I must admit I have NEVER tried this, and JavaScript is really not my
forte, so I have no idea if this is actually feasable, but it would seem
that if you can lock into the control of the actual style, you should be
able to switch it via JavaScript.

You may be able to find some additional information to assist you on your
quest at fellow HWG listmember Peter-Paul Koch's website at
http://www.xs4all.nl/~ppk/js/ -- it's a veritable cornucopia of
JavaScript/DHTML tricks and tips that has helped me on many occasions to
figure out a simple process for a function or feature that to me seemed
incomprehensibly complex.

Good luck!
Kehvan

PS: For those that aren't sure, the "." after the "<" in the code samples
above are placed as a courtesy to prevent HTML-based email readers from
trying to render the code snipets as actual code, but rather display it as
text. The "." should not be used in "live" code.

----- Original Message -----
From: "Boy Stephanus Gunawan" <gunawabs(at)purdue.edu>
To: <hwg-style(at)hwg.org>
Sent: Friday, June 01, 2001 13:56
Subject: onMouseOver


> Hello,
> I'm a newbie in the style sheet field and need some help(s) if possible.
>
> I want to create a button-like link with Submit, but I also want to make
> it has onMouseOver and onMouseOut events.
> The Button has border and I would like the button to switch colors
> between the background and border in onMouseOver event.
> I know how to change background in onMouseOver, but I don't know how to
> change the border. I'm not even sure how to have 2 or more styles with
> onEvent. Do I use comma (,) to separate the style? Or do I use
> semi-colon? Or something else?
>
> My code is something like this:
>
> <input type="submit" value="Purdue"
> STYLE="background-color:#D1DBE4;height=20;font-size:11pt;border:#90A8C0
> 1px solid;" onClick="parent.display.location='http://www.purdue.edu';
> return true;" onmouseover="style.background='#90A8C0',
> style.border='#D1DBE4'" onMouseOut="style.background='#D1DBE4',
> style.border='#90A8C0'">
>
> I would appreciate if somebody can help me or give me at least some hint
> here.
> Thank you for your time and help in advance.
>
> Sincere,
> Steve
>
>

HWG hwg-style mailing list archives, maintained by Webmasters @ IWA