Changing color to a button with the mouse over

Discussion in 'HTML' started by Paul, Nov 28, 2007.

  1. Paul

    Paul Guest

    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
    Paul, Nov 28, 2007
    #1
    1. Advertising

  2. Paul

    Brynn Guest

    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.


    <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;}
    .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';">


    </body></html>
    Brynn, Nov 28, 2007
    #2
    1. Advertising

  3. 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
    Beauregard T. Shagnasty, Nov 28, 2007
    #3
  4. 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.

    >
    >
    > <html><body>
    >
    >
    > <!--
    > The CSS
    > We will make 2 different "classes" ... one with the first style ..
    > then one with the mouse over style.
    > -->


    theStyle1 & theStyle2 are bad names for Classes

    > <style type="text/css">
    > .theStyle1, .theStyle2 {font: bold 10pt verdana; padding: 4px;}

    ^^^ ^^^^^^^^
    Points are for printing not display and Verdana is M$ only and you did
    not specify a generic family so for non-M$ systems a *serifed* fallback.
    If you want a shortcut, then only specify a generic font family.

    > .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';">
    >
    >
    > </body></html>


    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

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="content-language" content="en-us">
    <title>Better</title>

    <style type="text/css">
    ..trickedOut { font: bold 100% sans-serif; padding: .25em; color: #000;
    background-color: #E3EEE2; }
    ..trickedOut:hover,
    ..trickedOut:focus {color: #fff; background-color: #0E4E07; }

    /* MSIE6 hack via 'MS behavior' and HTC file attached to element*/
    ..trickedOut { behavior: url(IEFixes.htc) }
    /* MSIE special classes .hover & .focus for pseudo classes */
    ..trickedOut.hover,
    ..trickedOut.focus { color: #fff; background-color: #0E4E07; }

    </style>

    </head>
    <body>

    <input type="button" class="trickedOut" value="Test Button">

    </body>
    </html>

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

    <public:component>
    // 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
    <public:attach event="onmouseover" onevent="DoHover()">
    <public:attach event="onmouseout" onevent="RestoreHover()">
    <public:attach event="onmousedown" onevent="DoActive()">
    <public:attach event="onmouseup" onevent="RestoreActive()">
    <public:attach event="onfocus" onevent="DoFocus()">
    <public:attach event="onblur" onevent="RestoreFocus()">
    <script type="text/jscript">
    function DoHover(){
    element.className += ' hover';
    }
    function DoActive(){
    element.className += ' active';
    }
    function DoFocus(){
    element.className += ' focus';
    }
    function RestoreHover(){
    element.className = element.className.replace(/\shover\b/,'');
    }
    function RestoreActive(){
    element.className = element.className.replace(/\sactive\b/,'');
    }
    function RestoreFocus(){
    element.className = element.className.replace(/\sfocus\b/,'');
    }
    </script>
    </public:component>


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Nov 28, 2007
    #4
  5. 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
    Jonathan N. Little, Nov 28, 2007
    #5
  6. Paul

    Bone Ur Guest

    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.
    Bone Ur, Nov 29, 2007
    #6
  7. 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
    Blinky the Shark, Nov 29, 2007
    #7
  8. 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
    Jonathan N. Little, Nov 29, 2007
    #8
  9. Paul

    Brynn Guest

    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.

    >
    > > <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.
    Brynn, Nov 29, 2007
    #9
  10. Paul

    Brynn Guest

    theStyle1 and theStyle2 were just quickie throws at names that would
    obviously not be used ... lol ... please. You guys crack me up.
    Brynn, Nov 29, 2007
    #10
  11. Paul

    Brynn Guest

    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.

    >
    > > > <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>
    Brynn, Nov 29, 2007
    #11
  12. 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
    Blinky the Shark, Nov 29, 2007
    #12
  13. Paul

    Brynn Guest

    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.



    <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">
    /* Inspired CSS */
    .Blinky, .Jonathan {font: bold 10pt verdana; padding: 4px;}
    .Blinky {background-color: #E3EEE2; color: black;}
    .Jonathan {background-color: #0E4E07; color: white;}
    </style>

    <script language="javascript">
    function changeButton(theChange) {
    if (theChange == 0) {
    document.getElementById('brynnButton').className='Blinky';
    }
    else {
    document.getElementById('brynnButton').className='Jonathan';
    }
    }
    </script>

    <!-- Now the button -->
    <input type="text" value="A field to tab from.">
    <input id="brynnButton" type="button" class="Blinky" value="Test
    Button"
    onMouseOver="changeButton(1);" onFocus="changeButton(1);"
    OnMouseOut="changeButton(0);" onBlur="changeButton(0);">

    </body></html>
    Brynn, Nov 29, 2007
    #13
  14. 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.
    >
    >
    >
    > <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">
    > /* Inspired CSS */
    > .Blinky, .Jonathan {font: bold 10pt verdana; padding: 4px;}

    ^^^ ^^^^^^^^
    > .Blinky {background-color: #E3EEE2; color: black;}
    > .Jonathan {background-color: #0E4E07; color: white;}
    > </style>
    >
    > <script language="javascript">
    > function changeButton(theChange) {
    > if (theChange == 0) {
    > document.getElementById('brynnButton').className='Blinky';
    > }
    > else {
    > document.getElementById('brynnButton').className='Jonathan';
    > }
    > }
    > </script>
    >
    > <!-- Now the button -->
    > <input type="text" value="A field to tab from.">
    > <input id="brynnButton" type="button" class="Blinky" value="Test
    > Button"
    > onMouseOver="changeButton(1);" onFocus="changeButton(1);"

    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    > OnMouseOut="changeButton(0);" onBlur="changeButton(0);">

    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    >
    > </body></html>


    Way to miss my points entirely!

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Nov 29, 2007
    #14
  15. Paul

    Paul Guest

    "Brynn" <> ha scritto nel messaggio
    news:...
    > 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
    Paul, Dec 2, 2007
    #15
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Claus Atzenbeck
    Replies:
    1
    Views:
    1,081
    Claus Atzenbeck
    Nov 26, 2004
  2. David Dorward

    Re: change color on mouse-over

    David Dorward, Sep 7, 2003, in forum: HTML
    Replies:
    1
    Views:
    4,659
  3. William Starr Moake

    Re: change color on mouse-over

    William Starr Moake, Sep 7, 2003, in forum: HTML
    Replies:
    0
    Views:
    433
    William Starr Moake
    Sep 7, 2003
  4. Garg
    Replies:
    1
    Views:
    223
    marss
    Mar 19, 2007
  5. Kamaljeet Saini
    Replies:
    0
    Views:
    406
    Kamaljeet Saini
    Feb 13, 2009
Loading...

Share This Page