SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2001
    Location
    Grosse Pointe Farms, MI
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question mouseover and onclick effects for input (submit) buttons, can I do it?

    Using CSS I can define say

    <style>
    A
    { COLOR:red;
    TEXT-DECORATION:none }
    A:hover
    { COLOR:lime;
    TEXT-DECORATION:underline }
    A:clicked
    { COLOR:yellow;
    TEXT-DECORATION:underline }
    </style>

    ok, so that was a long example, but you get my point...

    Is there any way I can do something like that for input submit buttons?

    Thanks,
    Ryan

  2. #2
    SitePoint Columnist Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,066
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should be able to do it using a bit of javascript. Try playing with this:
    Code:
    <input type="button" 
       onMouseOver="this.style.backgroundColor='red'" 
       onMouseOut="this.style.backgroundColor=''"
       onClick="this.style.backgroundColor='yellow'"
    value="Click Me!" />
    Last edited by Skunk; May 15, 2002 at 12:16.

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2001
    Location
    Grosse Pointe Farms, MI
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well, I want to try and avoid Javascript with this...

    I know I can and I know how, I just find it annoying that I can't (read 'I don't think I can') do it using just CSS....

    Thanks,
    Ryan
    Michigan looks like your left hand . . . half way between your wrist and the base of your thumb is where I live.

  4. #4
    SitePoint Columnist Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,066
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It sounds like you need support for the CSS pseudo selectors "hover" with input elements. Mozilla provides this but unfortunately IE6 does not (I didn't test Opera). The followign code provides a button which will change colour when you mouseover it in Mozilla:
    Code:
    <html>
    <head>
    <style type="text/css">
    
    input:hover {
      background-color: red;
    }
    
    </style>
    </head>
    
    <body>
    
    <input type="button" value="hover over me">
    
    </body>
    </html>

  5. #5
    What? Maelstrom's Avatar
    Join Date
    Oct 2001
    Location
    Whistler BC originally from Guelph Ontario
    Posts
    2,175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would have to say use javascript. Javascript has far better support for this right now than does css. I know you didn't want to use but...
    Maelstrom Personal - Apparition Visions
    Development - PhP || Mysql || Zend || Devshed
    Unix - FreeBSD || FreeBsdForums || Man Pages
    They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.

  6. #6
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Personally, I'd use CSS, and let the browsers catch up on it, especially since it's really a small part of the design.

    BTW, currently Opera's support for CSS on form elements seems quite poor actually, so I wouldn't try making backgrounds and hovers work in it, ATM. Code to the standard and Opera (and other browsers) will eventually catch up. :-)

    ~~Ian


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •