evento onclick en una imagen

stinson · #1 (**permalink**) 18/12/2012, 09:00

tengo 3 imágenes las cuales si haces click cambian y se vuelven de color, pero solo permiten hacer click, una vez se lo haces continúan de color... como podría hacer para que estén siempre sin colores y depende la que pulse se coloree y la otra se vuelva a su estado inicial?

emprear · #2 (**permalink**) 18/12/2012, 11:12

Podés hacer algo así

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>reemplazar imagen</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
#Uno,#Dos,#Tres{
border: none;
cursor: pointer;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
function reemplazar(cual){
var capas = new Array("Uno", "Dos", "Tres");
var i;
    for(i in capas){
        var e = document.getElementById(capas[i]);
        capas[i] == cual?e.style.border='solid 2px red':e.style.border='none';
    }
}
//]]>
</script>
</head>
<body>
<p>
<img src="a.jpg" alt="" width="100" height="100" id="Uno" onclick="reemplazar('Uno')" />
<img src="a.jpg" alt="" width="100" height="100" id="Dos" onclick="reemplazar('Dos')" />
<img src="a.jpg" alt="" width="100" height="100" id="Tres" onclick="reemplazar('Tres')" />
</p>
</body>
</html>

en mi ejemplo quito y o elimino el borde de la imagen clickeada, solo te faltaría aplicar el efecto no al borde sino a la sustitución de la imagen o aplicar un filtro que haga escala de grises

Saludos

stinson · #3 (**permalink**) 18/12/2012, 12:26

Cita:

Iniciado por emprear

Podés hacer algo así

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>reemplazar imagen</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
#Uno,#Dos,#Tres{
border: none;
cursor: pointer;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
function reemplazar(cual){
var capas = new Array("Uno", "Dos", "Tres");
var i;
    for(i in capas){
        var e = document.getElementById(capas[i]);
        capas[i] == cual?e.style.border='solid 2px red':e.style.border='none';
    }
}
//]]>
</script>
</head>
<body>
<p>
<img src="a.jpg" alt="" width="100" height="100" id="Uno" onclick="reemplazar('Uno')" />
<img src="a.jpg" alt="" width="100" height="100" id="Dos" onclick="reemplazar('Dos')" />
<img src="a.jpg" alt="" width="100" height="100" id="Tres" onclick="reemplazar('Tres')" />
</p>
</body>
</html>

en mi ejemplo quito y o elimino el borde de la imagen clickeada, solo te faltaría aplicar el efecto no al borde sino a la sustitución de la imagen o aplicar un filtro que haga escala de grises

Saludos

nada, me aplica el borde pero no encuentro como hacer lo del cambio de imagen con javascript

emprear · #4 (**permalink**) 18/12/2012, 12:46

Cita:

Iniciado por stinson

nada, me aplica el borde pero no encuentro como hacer lo del cambio de imagen con javascript

Asi

stinson · #5 (**permalink**) 18/12/2012, 12:51

Cita:

Iniciado por emprear

Asi

logicamente había buscado en google como hacerlo jaja