Código de JQuery - Seleccionar varias imágenes al pasar el ratón por encima

Imágen de perfil

Seleccionar varias imágenes al pasar el ratón por encimagráfica de visualizaciones


JQuery

Publicado el 23 de Junio del 2014 por Xavi
1.894 visualizaciones desde el 23 de Junio del 2014. Una media de 21 por semana
Simple código que muestra como resaltar varias imágenes al pasar el ratón por encima de una de ellas.

Versión 1

Publicado el 23 de Junio del 2014gráfica de visualizaciones de la versión: Versión 1
1.896 visualizaciones desde el 23 de Junio del 2014. Una media de 21 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Puedes ver un ejemplo aquí
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
 
    <script>
		$(document).ready(function(){
			var id=0;
			$("img").hover(function(){
				id=$(this).attr("id");
				$("."+id).addClass("selected");
				informacion(id);
			},function(){
				$("."+id).removeClass("selected");
				$("#informacion").html("");
			});
 
			function informacion(id)
			{
				var imagenes="";
				$("."+id).each(function() {
					imagenes+="<br>"+$(this).attr("id");
				});
				$("#informacion").html("Las imagenes que se marcan son:"+imagenes);
			}
		});
    </script>
 
    <style>
    img {
		border:2px solid #ccc;
		padding:1px;
    }
    .selected {
		border:2px solid red;
    }
    </style>
</head>
 
<body>
 
<p>Definimos cada una de las imagenes con las clases que queremos que se remarque.
<br>Cada clase, equivale a un id de imagen.</p>
 
<p>Por ejemplo, si la primera imagen tiene el id=c1, y queremos que al pasar por
encima se remarque la imagen 1, 3 y 5, hay que poner c1 en la clase css de las
imágenes 1, 3 y 5.</p>
 
<div>
	<img class="c1 c2 c5"		id="c1" src="img_1.jpg">
	<img class="c1 c2"			id="c2" src="img_2.jpg">
	<img class="c1 c3 c4"		id="c3" src="img_3.jpg">
	<img class="c2 c3 c4 c5"	id="c4" src="img_4.jpg">
	<img class="c2 c4 c5"		id="c5" src="img_5.jpg">
	<img class="c3 c4 c6"		id="c6" src="img_6.jpg">
</div>
 
<div id="informacion"></div>
 
</body>
</html>



Comentarios sobre la versión: Versión 1 (0)


No hay comentarios
 

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s2701