Foros del Web - Ver Mensaje Individual

emprear · #2 (**permalink**) 11/12/2011, 15:00

@besotico, vas a tener problemas con esa estructura, suponiendo que los usuarios destilden el checkbox.

Para hacer o no el cambio, primero deberías comprobar el estado del checkbox.

Usa esto

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>chk img</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
 
 function testchk(){
var valor = document.getElementById('chk_id').checked; 
alert(valor);
}
function check(checkboxid,imag,defecto) {  
var valor = document.getElementById(checkboxid).checked;
 
if (valor == false){
document.getElementById(checkboxid).checked = true;  
document.getElementById(imag).src = imag + ".jpg";  
}else{
document.getElementById(checkboxid).checked = false;  
document.getElementById(imag).src = defecto;   
}
 
}  
//]]>
</script>
</head>
<body>
<img src="uno.jpg" onclick="check('chk_id',this.id,'uno.jpg');" width="50" height="50" id="lupa" alt="" name="lupa" />
<form action="#">
<p>
<input type="checkbox" id="chk_id" value="si" />
</p>
</form>
<p>
<br />
 <a href="#" onclick="testchk();">Verificar</a> 
</p>
</body>
</html>

Algunos detalles, para cargar la imagen cuando esta activo uso el id=lupa, ya que mi imagen se llama lupa.jpg.
paso tres parámetros a la función, el primero es el checkbox que debe afectar, el segundo, el id de la imagen para reemplazar por id + .jpg y el tercero para restablecer a la imagen por defecto cuando desmarcan, para verificar te deje un link y otra función testchk();
Cuando hagas las pruebas no uses el checkbox, usá siempre la imagen, y una vez verificado, simplemente oculta el checkbox con style="display: none;"
eso sí, tendría que hacer tus imágenes bien descriptivas

Saludos

Saludos