Click here to Skip to main content
Click here to Skip to main content
Go to top

Inputer Replacer

, 1 Nov 2005
Rate this:
Please Sign up or sign in to vote.
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:

<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:

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:

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)

Share

About the Author

Anthony Main
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 PinmemberMarkus197421-Nov-07 2:23 

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

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

| Advertise | Privacy | Mobile
Web02 | 2.8.140916.1 | Last Updated 1 Nov 2005
Article Copyright 2005 by Anthony Main
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid