imageTick for jQuery
It's Sunday afternoon and it is probably the hottest day Ottawa has been hit with so far. So I went out to The Bay, bought an air conditioner, sat on my computer and hacked away. I decided to make a small jQuery plugin that provides an unobtrusive approach to using images as checkboxes and radio buttons. I had seen a few out there that just take care of the checkboxes and that don't work at all with labels. I figured that I can whip something up that might help a lot of people out. The script figures out whether it's a checkbox or a radio button - you just have to provide some styling info.
If the user has Javascript turned off a 100 gig virus will be uploaded to their network, their cars gas tank will fill up with salt and the sky will fall on them... Ok not really, it will just show the regular inputs.
Usage
The chunk of javascript below goes in the head of your document.
<script type="text/javascript" src="js/imagetick.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input[name='favlang']").imageTick({ // the selector can be a class as well, target your radios or checkboxes
tick_image_path: "images/radio.gif", // the image you want to use as a selected state of the radio/checkbox
no_tick_image_path: "images/no_radio.gif", // image you want to use as a non selected state
image_tick_class: "radios" // the class you want to apply to all images that are dynamically created
});
});
</script>
HTML
Here's some HTML that goes with the example
<h4>Pick a language</h4>
<ul>
<li>
<input type="radio" value="php" id="php" name="favlang" />
<label for="php">PHP</label>
</li>
<li>
<input type="radio" id="javascript" value="javascript" name="favlang" checked="checked" />
<label for="javascript">Javascript</label>
</li>
<li>
<input type="radio" id="html" value="html" name="favlang" />
<label for="html">HTML</label>
</li>
<li>
<input type="radio" id="sql" value="sql" name="favlang" />
<label for="sql">SQL</label>
</li>
<li>
<input type="radio" id="japanese" value="japanese" name="favlang" />
<label for="japanese">Japanese</label>
</li>
</ul>
3 Sexy Responses to imageTick for jQuery
had this to say...
Hey man, nice blog! Did something like this way back in the old days (apr. 2007) while i was devving for jQuery. Never been released though; check it out and improve if you wish, just keep me posted.
http://dev.jquery.com/~gilles/cssHover/
had this to say...
@Gilles: That’s some good stuff man! I might take it and build on it sometime in the future. I will keep you posted if I do.
Feel free to put in your 2 cents. I need cash.
Code must be put in between <code> </code> tags or there will be no soup for you.
had this to say...
Dude, that is tight! I may have to use this … or make something a little similar