templating button actions using js

Discussion in 'Javascript' started by aaron, Mar 26, 2011.

  1. aaron

    aaron Guest

    Hi there,

    I'm currently using javascript to format buttons as follows.

    <input type="submit" value="Submit" title="" onmouseover="this.style.background='blue'" onmouseout="this.style.background='#FF1199'">

    What I would like to know is is there a way that I can have a templated button? This would mean that the if I change the formatting so that the onmouseover colour is 'red' instead in one place it would affect all buttons?

    Cheers,
    A
     
    aaron, Mar 26, 2011
    #1
    1. Advertising

  2. aaron wrote:

    > I'm currently using javascript to format buttons as follows.
    >
    > <input type="submit" value="Submit" title=""
    > onmouseover="this.style.background='blue'"
    > onmouseout="this.style.background='#FF1199'">
    >
    > What I would like to know is is there a way that I can have a
    > templated button? This would mean that the if I change the formatting
    > so that the onmouseover colour is 'red' instead in one place it would
    > affect all buttons?


    You can do that without using Javascript at all, using just the CSS rules

    input[type="submit"] { background: #f19; }
    input[type="submit"]:hover { background: blue; }

    This fails on some old versions of IE, but on the other hand, on supporting
    browsers, it works even when Javascript is disabled. Note: It also fails on
    modern versions of IE in "Quirks Mode", so if your page currently works in
    "Quirks Mode", this might not be a feasible way. The simplest way to avoid
    "Quirks Mode" is to have
    <!DOCTYPE html>
    as the first line of the HTML document.

    If you want (or need) to do this in Javascript, you can use e.g. the
    following (executed after the document is loaded, so e.g. put it in your
    onload event handler or place the script element at the very end of the
    document body):

    var input = document.getElementsByTagName("input");
    for(var i = 0; i < input.length; i++) {
    if(input.type == "submit") {
    input.onmouseover = function () {this.style.background = "blue"};
    input.onmouseout = function () {this.style.background = "#f19"}; }}

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Mar 26, 2011
    #2
    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. Ice
    Replies:
    4
    Views:
    6,265
    David Dorward
    Nov 2, 2003
  2. Replies:
    0
    Views:
    332
  3. Replies:
    1
    Views:
    486
    Jason Karns
    Nov 16, 2005
  4. jrlbandl
    Replies:
    0
    Views:
    506
    jrlbandl
    Jul 28, 2009
  5. TrvlOrm
    Replies:
    5
    Views:
    118
    TrvlOrm
    May 6, 2004
Loading...

Share This Page