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

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

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. Davíð Þórisson

    ASP -> ASP.Net, using hyperlink actions

    Davíð Þórisson, Oct 5, 2004, in forum: ASP .Net
    Replies:
    5
    Views:
    808
    =?Utf-8?B?UGF0cmljay5PLklnZQ==?=
    Oct 6, 2004
  2. Sebastian Millies

    [Struts] Composite actions using include?

    Sebastian Millies, Jun 29, 2004, in forum: Java
    Replies:
    0
    Views:
    469
    Sebastian Millies
    Jun 29, 2004
  3. Ice
    Replies:
    4
    Views:
    6,481
    David Dorward
    Nov 2, 2003
  4. Replies:
    0
    Views:
    408
  5. Replies:
    1
    Views:
    582
    Jason Karns
    Nov 16, 2005
  6. jrlbandl
    Replies:
    0
    Views:
    656
    jrlbandl
    Jul 28, 2009
  7. Hiten
    Replies:
    1
    Views:
    964
    Vidar Petursson
    May 26, 2004
  8. TrvlOrm
    Replies:
    5
    Views:
    195
    TrvlOrm
    May 6, 2004
Loading...