Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > templating button actions using js

Reply
Thread Tools

templating button actions using js

 
 
aaron
Guest
Posts: n/a
 
      03-26-2011
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
 
Reply With Quote
 
 
 
 
Jukka K. Korpela
Guest
Posts: n/a
 
      03-26-2011
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[i].type == "submit") {
input[i].onmouseover = function () {this.style.background = "blue"};
input[i].onmouseout = function () {this.style.background = "#f19"}; }}

--
Yucca, http://www.cs.tut.fi/~jkorpela/

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Help making button do two actions: send data and open new page jrlbandl HTML 0 07-28-2009 05:27 PM
Define actions (button) in XML?! snuffie_456@yahoo.com XML 1 11-16-2005 09:05 PM
Define actions (button) in XML?! snuffie_456@yahoo.com XML 0 11-16-2005 08:15 PM
Help Please with Button Actions - JavaScript TrvlOrm Javascript 5 05-06-2004 10:48 PM
------- HELP!!! MULTIPLE ACTIONS IN ONE FORM AND ONE SUBMIT BUTTON!!! Ice HTML 4 11-02-2003 10:13 AM



Advertisments