New question

Question:

Date: 05-09-2019 06:11:01 (In Spanish)

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

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>";
	//}				
}
?>
Tags: CSS3 - Dreamweaver - Form - HTML5 - JQuery - PHP - Question - Responsive - Responsive Web Design - Web Votes: 0 - Answers: 4 - Views: 12 Share on: Google Facebook Twitter LinkedIn Link
 

Answers:

  • Date: 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.
      Votes: 1 - Link answer
     
  • Date: 07-09-2019 06:01:06 onclick="this.classlist.toogleClass('active')"
    .active {
    border: 3px solid seagreen;
    }
      Votes: 0 - Link answer
     
  • Date: 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
      Votes: 0 - Link answer
     
  • Date: 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
      Votes: 0 - Link answer
     
To actively participate in the community first must authenticate, enter the system.Sign In