Click here to Skip to main content
15,861,168 members
Articles / Programming Languages / Javascript

Inputer Replacer

Rate me:
Please Sign up or sign in to vote.
4.00/5 (7 votes)
1 Nov 2005CPOL2 min read 41.9K   435   11   6
Javascript implementation to make standard form radios or checkboxes visually attractive by exchanging with images.

Introduction

The age old problem of styling HTML inputs has plagued developers for years, as the current CSS rules (<2.0) provide limited scope for styling. This method offers a solution to this problem by replacing all page inputs (of type radio or checkbox) with appropriate image representations.

Background

The original code was written by BrainError. All credits are to him for his methodology. I have simply extended the functionality of his code by adding support for radio buttons and disabled inputs. Please visit his site for the original implementation.

Using the code

The code is completely self contained. You simply need to add the JS file to any of your pages where you want the replacement to occur and it will do the biz for you. Simply add the following to the HEAD section of your HTML pages or copy and paste all the code into your JS source:

HTML
<script language="JavaScript" src="wdx_inputreplacer.js">
</script>

Open the JS file and update the following lines with appropriate locations to your images for replacement:

JavaScript
var imgCheckboxFalse = 'images/checkbox_unchecked.gif';
var imgCheckboxTrue = 'images/checkbox_checked.gif';
var imgCheckboxFalseDisabled = 
              'images/checkbox_unchecked_disabled.gif';
var imgCheckboxTrueDisabled = 
               'images/checkbox_checked_disabled.gif';
var imgRadioFalse = 'images/radio_unchecked.gif';
var imgRadioTrue = 'images/radio_checked.gif';
var imgRadioFalseDisabled = 
               'images/radio_unchecked_disabled.gif';
var imgRadioTrueDisabled = 
               'images/radio_checked_disabled.gif';

You could remove the line:

JavaScript
window.onload = init;

from the bottom of the JS source file and call the init() function from your page's BODY or manually if you like.

The code is highly cross-browser compatible as the method is very basic. It will also continue to provide the functionality (without the visual improvements) if JavaScript is disabled.

Notes before use

All inputs must be given unique IDs (which is fine if you are a .NETter) otherwise the script will not be able to identify which input has been checked/unchecked.

Future changes

The current implementation is not accessible as the images swapped in do not strictly exist in the DOM therefore cannot be tabbed to. If I find the need I will update this article with a method to do so. However, it would require pre-adding the visual images into the page source and therefore would not be as "plug and play" as this version, however it may provide a method for the replacement of specific inputs rather than all.

References

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Web Developer
United Kingdom United Kingdom
Anthony Main started developing and designing web sites as far back as 1996 using traditional HTML. His skills have now grown and he is a professional .net developer, with skills in c#, vb.net, css, xhtml.

Running his own company Web DynamiX (in his spare time) he develops web solutions for small to medium size businesses and provides hosting and consultancy solutions.

His main occupation is of web developer where is works for Branded 3/a> developing .Net projects for medium to enterprise businesses.

You can read his personal blog at:
http://blog.anthonymain.com.

Comments and Discussions

 
Questionsame question Pin
Markus197421-Nov-07 2:23
Markus197421-Nov-07 2:23 
QuestiononClick actions Pin
Markus197421-Oct-07 5:05
Markus197421-Oct-07 5:05 
GeneralLabel Support Pin
BWD14-Nov-05 19:34
BWD14-Nov-05 19:34 
In looking into it further, I discovered my previous post was not compatible with IE. I was able to make it work with both IE and NS though. Too many changes to put here though. Here's the resulting javascript file:

http://www.keyboardface.com/downloads/chk/wdx_inputreplacer.js




Tom
GeneralRe: Label Support Pin
Anthony Main14-Nov-05 22:50
Anthony Main14-Nov-05 22:50 
GeneralLabel support Pin
BWD14-Nov-05 12:16
BWD14-Nov-05 12:16 
QuestionGreat, nothing more Pin
Daniel Santillanes8-Nov-05 7:34
professionalDaniel Santillanes8-Nov-05 7:34 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.