Changing color to a button with the mouse over

Changing color to a button with the mouse over

am 28.11.2007 18:36:21 von Paul

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

Paul

Re: Changing color to a button with the mouse over

am 28.11.2007 21:09:41 von Brynn

On Nov 28, 11:36 am, "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
>
> Paul

Here is a nice lesson with CSS, Javascript, and Html. Just copy
everything below into a file and play.










onMouseOver="this.className='theStyle2';"
OnMouseOut="this.className='theStyle1';">


Re: Changing color to a button with the mouse over

am 28.11.2007 21:23:58 von a.nony.mous

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.
>
>
>
>
>
>
>
> > 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

Re: Changing color to a button with the mouse over

am 28.11.2007 22:21:45 von lws4art

Brynn wrote:
> On Nov 28, 11:36 am, "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
>>
>> Paul
>
> Here is a nice lesson with CSS, Javascript, and Html. Just copy
> everything below into a file and play.

This is not a particularly good example in many ways. Firstly it
requires JavaScript. This done be done is CSS for modern browsers and a
Bit of special MS JScript in MS's special HTC file for IE's lack of CSS
support.

>
>
>
>
>
>

theStyle1 & theStyle2 are bad names for Classes

>
>
>
>
> > onMouseOver="this.className='theStyle2';"
> OnMouseOut="this.className='theStyle1';">
>
>
>

Also this would not address keyboard only interaction. Here is how you
could do it with CSS and add support. Now MSIE7 does support :hover
pseudo class on non-links but not :focus so you still need the HTC hack

"http://www.w3.org/TR/html4/strict.dtd">




Better











And you need the HTC file "IEFixes.htc". I've modified it a bit over the
years:


// For MSIE use JScript to attach JS functions to compensate
// for missing pseudo-class support
// from Vladdy http://www.vladdy.net/Demos/IEPseudoClassesFix.html
// updated for html4.01 jnl 3/06
// added focus|blur jnl 5/07










--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Re: Changing color to a button with the mouse over

am 28.11.2007 23:45:07 von lws4art

Jonathan N. Little wrote:

> This is not a particularly good example in many ways. Firstly it
> requires JavaScript. This done be done is CSS for modern browsers and a
> Bit of special MS JScript in MS's special HTC file for IE's lack of CSS
> support.

And now the English translation:

This is not a particularly good example in many ways. Firstly, it
requires JavaScript. This can done will CSS for modern browsers, and
with a bit of special MS JScript in MS's special HTC file to compensate
for IE's lack of CSS support.


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Re: Changing color to a button with the mouse over

am 29.11.2007 01:37:08 von Bone Ur

Well bust mah britches and call me cheeky, on Wed, 28 Nov 2007 22:45:07 GMT
Jonathan N. Little scribed:

> Jonathan N. Little wrote:
>
>> This is not a particularly good example in many ways. Firstly it
>> requires JavaScript. This done be done is CSS for modern browsers and a
>> Bit of special MS JScript in MS's special HTC file for IE's lack of CSS
>> support.
>
> And now the English translation:
>
> This is not a particularly good example in many ways. Firstly, it
> requires JavaScript. This can done will CSS for modern browsers, and
> with a bit of special MS JScript in MS's special HTC file to compensate
> for IE's lack of CSS support.

A marvelous improvement...

(Well, at least there's a difference.)

--
Bone Ur
Cavemen have formidable pheromones.

Re: Changing color to a button with the mouse over

am 29.11.2007 01:45:50 von Blinky the Shark

Jonathan N. Little wrote:
> Jonathan N. Little wrote:
>
>> This is not a particularly good example in many ways. Firstly it
>> requires JavaScript. This done be done is CSS for modern browsers and a
>> Bit of special MS JScript in MS's special HTC file for IE's lack of CSS
>> support.
>
> And now the English translation:
>
> This is not a particularly good example in many ways. Firstly, it
> requires JavaScript. This can done will CSS for modern browsers, and
> with a bit of special MS JScript in MS's special HTC file to compensate
> for IE's lack of CSS support.

I think line two's still in need of a little love. :)

--
Blinky
Killing all posts from Google Groups
The Usenet Improvement Project - http://improve-usenet.org

Re: Changing color to a button with the mouse over

am 29.11.2007 02:46:37 von lws4art

Blinky the Shark wrote:
> Jonathan N. Little wrote:


>> This can done will CSS for modern browsers, and
ARGH! *with*
>
> I think line two's still in need of a little love. :)
>

I think I'll crawl back under my rock now...

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Re: Changing color to a button with the mouse over

am 29.11.2007 08:54:13 von Brynn

On Nov 28, 2:23 pm, "Beauregard T. Shagnasty"
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.
>
> >
>
> >
> >
>
> >
> > > > 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.

Re: Changing color to a button with the mouse over

am 29.11.2007 08:56:13 von Brynn

theStyle1 and theStyle2 were just quickie throws at names that would
obviously not be used ... lol ... please. You guys crack me up.

Re: Changing color to a button with the mouse over

am 29.11.2007 09:12:19 von Brynn

On Nov 29, 1:54 am, Brynn wrote:
> On Nov 28, 2:23 pm, "Beauregard T. Shagnasty"
>
>
>
> 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.
>
> > >
>
> > >
> > >
>
> > >
> > > > > > 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.






onMouseOver="this.className='theStyle2';"
OnMouseOut="this.className='theStyle1';"
onFocus="this.className='theStyle2';"
onBlur="this.className='theStyle1';"
>


Re: Changing color to a button with the mouse over

am 29.11.2007 09:17:17 von Blinky the Shark

Jonathan N. Little wrote:
> Blinky the Shark wrote:
>> Jonathan N. Little wrote:
>
>
>>> This can done will CSS for modern browsers, and
> ARGH! *with*
>>
>> I think line two's still in need of a little love. :)
>>
>
> I think I'll crawl back under my rock now...

Don't give up the ship!

--
Blinky
Killing all posts from Google Groups
The Usenet Improvement Project - http://improve-usenet.org

Re: Changing color to a button with the mouse over

am 29.11.2007 09:26:24 von Brynn

On Nov 28, 11:36 am, "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
>
> Paul

My last post ... because this post about a button was so important to
Jonathan and Blinky ... I streamlined my button code and changed my
CSS class names for them. Like I said, maybe some day their button
code will work in IE6 ... until then, I would suggest using my
code ... it is less code to mess with for one ... and easier to breeze
through and get back to your business.












onMouseOver="changeButton(1);" onFocus="changeButton(1);"
OnMouseOut="changeButton(0);" onBlur="changeButton(0);">

Re: Changing color to a button with the mouse over

am 29.11.2007 16:40:05 von lws4art

Brynn wrote:
> On Nov 28, 11:36 am, "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
>>
>> Paul
>
> My last post ... because this post about a button was so important to
> Jonathan and Blinky ... I streamlined my button code and changed my
> CSS class names for them. Like I said, maybe some day their button
> code will work in IE6 ... until then, I would suggest using my
> code ... it is less code to mess with for one ... and easier to breeze
> through and get back to your business.
>
>
>
>
>
>
>
>
>
>
>
>
> > onMouseOver="changeButton(1);" onFocus="changeButton(1);"
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
> OnMouseOut="changeButton(0);" onBlur="changeButton(0);">
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
>
>

Way to miss my points entirely!

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Re: Changing color to a button with the mouse over

am 02.12.2007 23:37:29 von Paul

"Brynn" ha scritto nel messaggio
news:3bc093ee-ae51-4e4e-bf15-38fcddb1e207@d21g2000prf.google groups.com...
> On Nov 28, 11:36 am, "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
>> Paul
>
> My last post ...

Thank you very much, Brynn.
I have tried you code and it works fine.
But...I have some problem on making modifications on the area of buttons.
This is a sample I have made using your code:
http://www.tortebomboniere.com/ng-button.html
As you see, I have three buttons and I intend putting them together many
others into the home page of my web site when I will know how to modify them
:-)).
OK about dimensions, colors etc of texts inside the buttons, but:
- Is it possible to decide the width of the buttons? Now it depends on the
length of the text - short text, narrow button - long text, large button
- How can I write two or more rows of text inside a button? It is important
because in some case I must write a long text in a normal width button.....

P.S. Have I written correctly your code for each button, or is it possible
"shrinking" it?
Thank you for your help and your time,
Paul