Nueva pregunta

Pregunta:

 
  0  
 
 
Mario Chávez Karma: 1 México
 
 Fecha: 05-09-2019 06:11:01 (En Español)

¿Cómo hacer el efecto de selección a una imagen al darle click?[No resuelta]

Necesito ayuda, estoy mostrando las imágenes que he cargado en un formulario y quiero escoger una de ellas, pero quiero ponerle un efecto que resalte la imagen al darle click para que el usario sepa la que selecciono, alguna idea de como le puedo hacer? de antemano muchas gracias

while($test = mysql_fetch_array($result))
{				
	//foreach($imagenes as  $imagen){
	echo "<div class='todas'>";
	$id = $test['id_ruta'];
	echo "<label>";
	echo "<img onClick='actualiza(this.title)' title='".$test['id_ruta']."'  class='profile-user-img img-responsive'  src='".$test['ruta_plantilla']."'/>";
	echo "<center>".$test['id_ruta'];
	echo "</center>";
	echo "</label>";
	echo "</div>";
	//}				
}
?>
Etiquetas: CSS3 - Dreamweaver - Formulario - HTML5 - JQuery - PHP - Pregunta - Responsive - Responsive Web Design - Web Votos: 0 - Respuestas: 4 - Vistas: 12 Compartir en: Google Facebook Twitter LinkedIn Link
 

Respuestas:

  •  
      1  
     
     
    Victor Ayala Karma: 63 México
     
    Fecha: 05-09-2019 15:02:00 Hay muchas opciones de efecto, pero todas deben estar asociadas al evento que selecciona: "al hacer clic".

    Intenta agregando en tus estilos una clase de la siguiente forma:

    ...

.resaltar:active { color: green; }

...


    en donde .resaltar es la clase agregada y :active una pseudoclase que indica que hacer cuando sucede el evento 'al hacer clic'.

    Agrega la clase resaltar a la definición de clases de la imagen:

    ... class='profile-user-img img-responsive resaltar' ...


    También puedes rotar, cambiar tamaño, transparencia, etc...

    Saludos.       Votos: 1 - Link respuesta
     
  •  
      0  
     
     
    Edwin Marroquin Karma: 731 Colombia
     
    Fecha: 07-09-2019 06:01:06 onclick="this.classlist.toogleClass('active')"
    .active {
    border: 3px solid seagreen;
    }       Votos: 0 - Link respuesta
     
  •  
      0  
     
     
    Juan Quinto Karma: 2761 Perú
     
    Fecha: 16-09-2019 10:11:55 haz lo siguiente , primero

    al img que tiene el el metodo actualiza tiene que recibir 2 paramentros , expongo el codigo

    actualiza(this,this.title)


    ahora tu funcion actualiza , quedaria asi

    
function actualiza(obj,titulo){

     $(obj).closest("label").css('background-color','#f00');

}


    saludos       Votos: 0 - Link respuesta
     
  •  
      0  
     
     
    Edwin Marroquin Karma: 731 Colombia
     
    Fecha: 19-09-2019 04:18:08 Pero generaria estilos en linea
    Lo que genera una mala practica
    Y a la hora de realizar el mantenimiento se vuelve mas tedioso que solo ir cambiar una clase en el css       Votos: 0 - Link respuesta
     
Para participar activamente de la comunidad primero debes autenticarte, ingresa al sistema.Iniciar Sesión
 
frjcbbae garagebible.com