En bolivia, el periodo de gobierno de Evo Morales lo consideras como:

1.10.07

HTML - RadioButtons Personalizado

Aqui les dejo algo que se me ocurrio ya que a mi no me gustan los radioButtons que vienen por defecto en los exploradores tanto el Firefox o el IE.

Aqui esta la imagen del resultado final claro asi me quedo a mi pero cada quien como le guste, no pude subir el script al blog para que funcione aki mismo lo hare mas adelante cuando tenga mas tiempo.
Bueno muchos diran que porque hacerlo en HTML y Javascript si con hacerlo todo con Javascript puede funcionar, pues lo malo es q no todos los navegadores soportan las mismas funciones o eventos de los objectos html, ademas de que en mi maquina es mas libiano asi ya que con solo JS se me hace mas lenta.

Codigo HTML
<input id="chk_radiobutton" name="radiobutton" value="1" type="hidden">

<img id="chk_default" src="images/radio_on.png" alt="" title=""
onclick="checked_radiobutton(this,1);"
style="cursor: pointer;" align="absmiddle" /> Opcion 1

<img id="chk_dos" src="images/radio_off.png" alt="" title=""
onclick="checked_radiobutton(this,2);"
style="cursor: pointer;" align="absmiddle" /> Opcion 2

<script type="text/javascript">
var chk_old = document.getElementById("chk_default");
var img_on = "images/radio_on.png";
var img_off= "images/radio_off.png";

function checked_radiobutton( chk, value )
{
if( chk_old!=chk )
{
if( chk_old==null)
{
chk_old = document.getElementById("chk_default");
}
chk_old.src = img_off;
document.getElementById("chk_radiobutton").value = value;
chk.src = img_on;
chk_old = chk;
}
}
</script>

Bueno talvez mas adelante publique una versión todo en JavaScript pero por ahora asi no mas, espero les sirva, y no esta demas opiniones, asi todos crecemos en conocimiento.

1 comentario:

danielita_o dijo...

Me parece muy Util esta sugerencia por que realmente los radiobuttons que tenemos en los exploradores son siempre igual de feos...asi podemos personalizar los nuestros y darle un toque personal
Saludos Grego y gracias:D!