Imagen como boton de Opcion

Parliament · #1 (**permalink**) 09/09/2011, 12:49

Hola:

Como puedo hacer para usar una imagen en vez de un boton de opción??, o mejor dicho una imagen en vez de un radio button.

Gracias

grescafe · #2 (**permalink**) 09/09/2011, 13:18

Hola:

Buscando en la web he encontrado esto (no pongo la referencia porque no sea confundido con SPAM, aunque quiero dejar claro que NO es mi codigo y que está sacado de otra web.

El ejemplo que te pongo es con un checkbox, pero no creo que haya problemas para pasarlo a lo que tu deseas con unos ligeros cambios

Se usa jquery para ello (por lo menos es lo que yo uso)

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd"
    >
<html lang="en">
<head>
    <title>Checkbox personalizado</title>
	<script src="../jquery-1.4.2.min.js"></script>
<script languague="javascript">

jQuery.fn.checkboxPersonalizado = function(opciones) {
	//opciones de configuración por defecto
	var conf = {
		activo: true,
		colorTextos: {
			activo: "#00f",
			pasivo: "#669"
		},
		textos: {
			activo: "",
			pasivo: ""
		},
		imagen: {
			activo: 'images/thumb_up.png',
			pasivo: 'images/thumb_down.png'
		},
		cssElemento: {
			padding: "2px 2px 2px 24px",
			display: "block",
			margin: "2px",
			border: "1px solid #eee",
			cursor: "pointer"
		},
		cssAdicional: {
			
		},
		nameCheck: ""
	};
	//Las extiendo con las opciones recibidas al invocar el plugin
	jQuery.extend(conf, opciones);
	
	this.each(function(){
		var miCheck = $(this);
		var activo = conf.activo
		var elementoCheck = $('<input type="checkbox" style="display: none;" />');
		if(conf.nameCheck==""){
			elementoCheck.attr("name", miCheck.text());
		}else{
			elementoCheck.attr("name", conf.nameCheck);
		}
		miCheck.before(elementoCheck);
		miCheck.css(conf.cssElemento);
		miCheck.css(conf.cssAdicional);
		
		if (activo){
			activar();
		}else{	
			desactivar();
		}
		miCheck.click(function(e){
			if(activo){
				desactivar();
			}else{	
				activar();
			}
			activo = !activo;
		});
		
		function desactivar(){
			miCheck.css({
				background: "transparent url(" + conf.imagen.pasivo + ") no-repeat 3px",
				color: conf.colorTextos.pasivo
			});
			if (conf.textos.pasivo!=""){
				miCheck.text(conf.textos.pasivo)
			}
			elementoCheck.removeAttr("checked");
		};									
		
		function activar(){
			miCheck.css({
				background: "transparent url(" + conf.imagen.activo + ") no-repeat 3px",
				color: conf.colorTextos.activo
			});
			if (conf.textos.activo!=""){
				miCheck.text(conf.textos.activo)
			}
			elementoCheck.attr("checked","1");
		};	
	});
	return this;
};	

$(document).ready(function(){
	$(".ch").checkboxPersonalizado();
	$("#otro").checkboxPersonalizado({
		activo: false,
		colorTextos: {
			activo: "#f80",
			pasivo: "#98a"
		},
		imagen: {
			activo: 'images/weather_cloudy.png',
			pasivo: 'images/weather_rain.png'
		},
		textos: {
			activo: 'Buen tiempo :)',
			pasivo: 'Buena cara ;)'
		},
		cssAdicional: {
			border: "1px solid #dd5",
			width: "100px"
		},
		nameCheck: "buen_tiempo"
	});
})
</script>
<style type="text/css">
body{
	font-family: tahoma, verdana, arial;
	font-size: 10pt;
}

</style>
</head>
<body>
    <span class="ch">Seleccionar</span>

	<span class="ch">Me interesa</span>
	<span class="ch">Oooo</span>
	<br>
	<br>
	<span id="otro">otro suelto</span>
</body>
</html>

Espero que te sirva. Ya nos lo indicas

Un saludo

abimaelrc · #3 (**permalink**) 09/09/2011, 13:22

Con usar <button><img src="http://www.forosdelweb.com/f18/imagen-como-boton-opcion-942302/..." /></button> Puedes colocar lo que quieras, solo es cuestión de modiifcar <button> con css para quitar border y algunos efectos que por defecto trae. Para los radio necesitarias ocultar el botón de radio y usar el concepto de <button>.... para hacerlo.

Parliament · #4 (**permalink**) 09/09/2011, 15:08

No amigos, no me funciona ninguna de las ayudas que me dieron, de cualquier manera muchas gracias, si ahy alguna opinion mas, estoy a sus disposicion

emprear · #5 (**permalink**) 09/09/2011, 16:12

Hay unas cuantas, y todas funcionan, te dejo 2
http://theodin.co.uk/blog/design/fan...ns-jquery.html
http://webdesign.maratz.com/lab/fanc...tons/demo.html

Saludos