|
|
Posted by Brynn on 11/29/07 08:12
On Nov 29, 1:54 am, Brynn <brynncurry....@gmail.com> wrote:
> On Nov 28, 2:23 pm, "Beauregard T. Shagnasty"
>
>
>
> <a.nony.m...@example.invalid> wrote:
> > Brynn wrote:
> > > "Paul" wrote:
> > >> May I obtain the above effect using Frontpage or writing codes in
> > >> html?
>
> > >> Have you some code or some link for me to test? Thanks
>
> > > Here is a nice lesson with CSS, Javascript, and Html. Just copy
> > > everything below into a file and play.
>
> > > <html><body>
>
> > > <!--
> > > The CSS
> > > We will make 2 different "classes" ... one with the first style ..
> > > then one with the mouse over style.
> > > -->
> > > <style type="text/css">
> > > .theStyle1, .theStyle2 {font: bold 10pt verdana; padding: 4px;}
>
> > Please don't recommend using points (points are for printing), nor
> > Verdana. See this:http://k75s.home.att.net/fontsize.html
>
> > > .theStyle1 {background-color: #E3EEE2; color: black;}
> > > .theStyle2 {background-color: #0E4E07; color: white;}
> > > </style>
>
> > > <!-- Now the button -->
> > > <input type="button" class="theStyle1" value="Test Button"
> > > onMouseOver="this.className='theStyle2';"
> > > OnMouseOut="this.className='theStyle1';">
>
> > Why mess with that when you can do it with CSS. Here's a sample of
> > buttons I wrote years ago.http://k75s.home.att.net/hover3d.html
>
> > --
> > -bts
> > -Motorcycles defy gravity; cars just suck
>
> What are you testing your code in there bud ... your buttons only work
> in IE6 if you mouse over the text ... they work in firefox ok though.
> In IE6 if you highlight the button part without the text, your buttons
> do nothing.
P.S. My Javascript buttons work fine throughout ... and last I checked
javascript is still used quite a bit in the web world. Also ... I am a
huge fan of CSS, don't get me wrong ... you guys would love my ASP/CSS
script I use for image preloading from an asp array. I like having
definate control of my design including pt control of my text.
Also, let me know when you fix your buttons to work in IE so the color
actually changes when i mouse over the button please!!!
P.P.S. I fixed the little keyboard problem for you ... now if you tab
to the button ... it will also change color ... same with tabbing off
of it.
<!--
The CSS
We will make 2 different "classes" ... one with the first style ..
then one with the mouse over style.
-->
<style type="text/css">
.theStyle1, .theStyle2 {font: bold 11pt verdana; padding:
4px;}
.theStyle1 {background-color: #E3EEE2; color: black;}
.theStyle2 {background-color: #0E4E07; color: white;}
</style>
<!-- Now the button -->
<input type="text" value="A field to tab from.">
<input type="button" class="theStyle1" value="Test Button"
onMouseOver="this.className='theStyle2';"
OnMouseOut="this.className='theStyle1';"
onFocus="this.className='theStyle2';"
onBlur="this.className='theStyle1';"
>
</body></html>
[Back to original message]
|