CSS - resaltar varias imagenes al pasar por encima de una

resaltar varias imagenes al pasar por encima de una

Publicado por ini (11 intervenciones) el 20/06/2014 15:51:15

Holas a tod@s,

tengo una tabla con 20 imágenes, cuando pasas el mouse por encima de ellas sale información de cada una en un popup. hasta aquí todo bien ...

Alguna de las imágenes están relacionadas y quiero que con la misma acción (hover) se resalten todas las imágenes relacionadas ..

No se si me explico bien,un ejemplo;
- que cuando pases el ratón por encima de una foto otras 6 fotos cambien el color del borde o algo parecido para que se vea que están relacionadas.

Muchas gracias y ojala puedan ayudarme.

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 2

Val: 624

resaltar varias imagenes al pasar por encima de una

Publicado por xve (490 intervenciones) el 20/06/2014 17:26:42

Hola Ini, eso se puede hacer de manera sencilla, pero tendrán que tener todas ellas algo en común para saber que imágenes seleccionar...

Por ejemplo si hay 20 imágenes, y hay 5 relacionadas de un grupo, y otra 5 son de otro grupo, tendrás que tener algún estilo, o algo para poder diferenciarlas... Dependiendo de como lo hagas, se hará de una manera u otra... nos puedes comentar como lo haces o tienes pensado hacerlo?

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

resaltar varias imagenes al pasar por encima de una

Publicado por ini (11 intervenciones) el 20/06/2014 18:40:00

Gracias por contestar xve,

En realidad no se como hacerlo.

Es una especie de árbol genealógico o mejor dicho pirámide con fotos de personas que están relacionadas y algunas coinciden mas de una vez.

Yo habia pensado añadir un ID único a cada foto y luego aplicar alguna clase o script para hacer lo que quiero.

Por ejemplo;

foto1 relacionar con 2, 4, 8, 9, 10, 12, 16, 17, 20
foto2 relacionar 1, 4, 5, 9
foto3 relacionar con 1,2,3,4,5,6,7,8

y así sucesivamente con todas las fotos, lo que quiero es q cuando se pase con el raton por encima de foto 1 las relacionadas con ella hagan algun efecto para que se note su relacion.

cada foto esta enlazada y utilizo una clase en el enlace para sacar informacion expecifica en un popup
-----------------------------------------------------------------------------------------------------------------
ejemplo style-desktop.css:
-----------------------------------------------------------------------------------------------------------------

/*THUMBNAIL HOVERPOPUPS */

.thumbpiramide{

position: relative;

z-index: 0;

.thumbpiramide:hover{

background-color: transparent;

z-index: 50;

.thumbpiramide span{ /*CSS for enlarged image*/

position: absolute;

background-color: #006e8b;

padding: 5px;

left: -1000px;

border: 1px dashed #006e8b;

visibility: hidden;

color: white;

text-decoration: none;

.thumbpiramide span img{ /*CSS for enlarged image*/

border-width: 0;

padding: 2px;

.thumbpiramide:hover span{ /*CSS for enlarged image on hover*/

visibility: visible;

/*top: 0;

left: 0; position where enlarged image should offset horizontally */

left: 50%;

	margin: -10px 0 0 -45px;

	position: fixed;

	top: 60%;

width:180px;

    height:auto;

/*if same attribute for all 4 states, then declare here in

a.thumbnail2*/

a.thumbpiramide img:link {

	border: 2px solid #006e8b;

	background: transparent;

a.thumbpiramide img:visited {

	border: 2px solid #006e8b;

	background : transparent;

a.thumbpiramide img:hover {

	border: 2px solid #f00;

	background : transparent;

a.thumbpiramide img:active {

	border: 2px solid #006e8b;

	background : transparent;

a.thumbpiramide img {

	border: 2px solid #006e8b;

/*end of hover popup links*/

Ahora me falta relacionar cada foto con sus respectivas.

gracias de antemano.

Valora esta respuesta

Comentar

Pos: 2

Val: 624

resaltar varias imagenes al pasar por encima de una

Publicado por xve (490 intervenciones) el 21/06/2014 11:33:34

Hola Ini, la manera que comentas, es una buena opción, pero tendrás que utilizar algo de javascript para saber que imágenes hay que activar y cuales, no... Aqui te muestro un ejemplo que he realizado con jquery muy sencillo...

<!DOCTYPE html>

<html lang="es">

<head>

    <meta charset="utf-8">

    <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>

    <script>

		$(document).ready(function(){

			var id=0;

			$("img").hover(function(){

				id=$(this).attr("id");

				$("."+id).addClass("selected");

			},function(){

				$("."+id).removeClass("selected");

});

});

    </script>

    <style>

    img {

		border:1px solid #ccc;

		padding:1px;

    .selected {

		border:1px solid red;

    </style>

</head>

<body>

<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">

</body>

</html>

Coméntanos si te sirve, ok?

Valora esta respuesta

Comentar

resaltar varias imagenes al pasar por encima de una

Publicado por ini (11 intervenciones) el 21/06/2014 12:26:18

Muchas gracias
Por lo q veo se pueden aplicar varias clases a un objeto, en este caso imagen.
Me encanta aprender!!

Esta noche o mañana pruebo el script y comento.

Gracias!!

Valora esta respuesta

Comentar

resaltar varias imagenes al pasar por encima de una

Publicado por ini (11 intervenciones) el 21/06/2014 15:02:22

PERFECTO!!!!!!!!!!!!!
Es justo lo que quería!!!!!!

MUCHAS GRACIASSSSSS!!!!!!!!!!!

Valora esta respuesta

Comentar

resaltar varias imagenes al pasar por encima de una

Publicado por ini (11 intervenciones) el 22/06/2014 17:04:19

Hola xve,

He cantado victoria antes de tiempo .....

Tu código completo funciona a la perfección pero cuando lo he intentado trasladar a mi web no me funciona.

Te comento;

las imágenes están dentro de una tabla y enlazadas y se les aplica la clase "thumbpiramide" que he puesto arriba ...

He hecho mil pruebas añadiendo tu código en mi web pero no hace el efecto ...

No encuentro donde puede estar el problema .... ...

Imagenes dentro de tabla:

<td><a class="thumbpiramide" href="web1.html"><img class="c1 c2 c5"		id="c1" src="images/img1.jpg" alt=""/><span><img src="images/img1.jpg" alt=""/><br>texto<br>texto texto texto texto texto texto</span></a></td>

<td><a class="thumbpiramide" href="web2.html"><img class="c1 c2"	    id="c2" src="images/img1.jpg" alt=""/><span><img src="images/img2.jpg" alt=""/><br>texto<br>texto texto texto texto texto texto</span></a></td>

<td><a class="thumbpiramide" href="web3.html"><img class="c1 c3 c4"		id="c3" src="images/img1.jpg" alt=""/><span><img src="images/img3.jpg" alt=""/><br>texto<br>texto texto texto texto texto texto</span></a></td>

<td><a class="thumbpiramide" href="web4.html"><img class="c2 c3 c4 c5"	id="c4" src="images/img1.jpg" alt=""/><span><img src="images/img4.jpg" alt=""/><br>texto<br>texto texto texto texto texto texto</span></a></td>

<td><a class="thumbpiramide" href="web5.html"><img class="c2 c4 c5"		id="c5" src="images/img1.jpg" alt=""/><span><img src="images/img5.jpg" alt=""/><br>texto<br>texto texto texto texto texto texto</span></a></td>

<td><a class="thumbpiramide" href="web6.html"><img class="c3 c4 c6"		id="c6" src="images/img6.jpg" alt=""/><span><img src="images/img6.jpg" alt=""/><br>texto<br>texto texto texto texto texto texto</span></a></td>

esto con la clase "thumbpiramide" hace el popup cuando pasas por encima pero no funcioana las fotos relacionadas.

al principio pensaba que era por version de jquery, en la web utilizo jquery.min.js, pero he probado tu codigo con jquery.min.js y funciona bien.

no se, he probado muchas cosas y no encuentro la forma de integrarlo ....

en el script:

<script>

		$(document).ready(function(){

			var id=0;

			$("img").hover(function(){

				id=$(this).attr("id");

				$("."+id).addClass("selected");

			},function(){

				$("."+id).removeClass("selected");

});

});

    </script>

he probado ha cambiar esta linea:

$("img").hover(function(){

cambiando "img" por

a.thumbpiramide img

y otras pruebas .....

se te ocurre algo?

Muchas gracias.

Valora esta respuesta

Comentar

Pos: 2

Val: 624

resaltar varias imagenes al pasar por encima de una

Publicado por xve (490 intervenciones) el 22/06/2014 21:07:51

Hola, tal y como lo tienes esta bien... debería de funcionar-te...

Has definido la clase selected, verdad?

Que es lo que te hace?

Valora esta respuesta

Comentar

resaltar varias imagenes al pasar por encima de una

Publicado por ini (11 intervenciones) el 22/06/2014 22:17:14

Es curioso porque he hecho mas pruebas, por ejemplo he añadido las misma fotos encima de la tabla, y en ese caso, solo en esas imágenes funciona;

<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">

y luego seguido la tabla;

<table><td><tbody>

<tr>lass="thumbpiramide" href="web1.html"><img class="c1 c2 c5"		id="c1" src="images/img1.jpg" alt=""/><span><img src="images/img1.jpg" alt=""/><br>texto<br>texto texto texto texto texto texto</span></a></td>

<td><a class="thumbpiramide" href="web2.html"><img class="c1 c2"	    id="c2" src="images/img1.jpg" alt=""/><span><img src="images/img2.jpg" alt=""/><br>texto<br>texto texto texto texto texto texto</span></a></td>

<td><a class="thumbpiramide" href="web3.html"><img class="c1 c3 c4"		id="c3" src="images/img1.jpg" alt=""/><span><img src="images/img3.jpg" alt=""/><br>texto<br>texto texto texto texto texto texto</span></a></td>

<td><a class="thumbpiramide" href="web4.html"><img class="c2 c3 c4 c5"	id="c4" src="images/img1.jpg" alt=""/><span><img src="images/img4.jpg" alt=""/><br>texto<br>texto texto texto texto texto texto</span></a></td>

<td><a class="thumbpiramide" href="web5.html"><img class="c2 c4 c5"		id="c5" src="images/img1.jpg" alt=""/><span><img src="images/img5.jpg" alt=""/><br>texto<br>texto texto texto texto texto texto</span></a></td>

<td><a class="thumbpiramide" href="web6.html"><img class="c3 c4 c6"		id="c6" src="images/img6.jpg" alt=""/><span><img src="images/img6.jpg" alt=""/><br>texto<br>texto texto texto texto texto texto</span></a></td></tr>

</tbody>

</table>

y en las primeras imagenes funciona incluso cuando pasas sobre las imagenes de la tabla, pero en la tabla no se resaltan las imagenes relacionadas ...

creo que es algo de la clase "thumbpiramide" q interfiere, pero no se .....

definir la clase se hace con el script, no?

<script>

		$(document).ready(function(){

			var id=0;

			$("img").hover(function(){

				id=$(this).attr("id");

				$("."+id).addClass("selected");

			},function(){

				$("."+id).removeClass("selected");

});

});

    </script>

mas el style:

<style>

    img {

		border:1px solid #ccc;

		padding:1px;

    .selected {

		border:1px solid red;

    </style>

en el caso del style he probado ha cambiar

img {

		border:1px solid #ccc;

		padding:1px;

o incluso quitarlo porque esta definido en la clase "thumbpiramide"
creo por por ahi esta el fallo .....

gracias por tu interés

sigo probando a ver si doy con la solución.

Valora esta respuesta

Comentar

Pos: 2

Val: 624

resaltar varias imagenes al pasar por encima de una

Publicado por xve (490 intervenciones) el 23/06/2014 11:12:01

Hola Ini, lo tienes correcto, y que este dentro de una tabla o no, no tendría nada que ver...

Lo que si que puede ser un problema, es la clase a la que haces mención (thumbpiramide) si la quitas funciona?

Valora esta respuesta

Comentar

resaltar varias imagenes al pasar por encima de una

Publicado por ini (11 intervenciones) el 23/06/2014 13:48:36

hola xve,

si quito la funcion thumbpiramide tampoco me funciona ...
sigo buscando donde puede estar el fallo.

si quieres mira el ejemplo (la url solo funcionara hoy {un rato} por que la web todavía no esta abierta)

http://goo.gl/QKSwGe

gracias

Valora esta respuesta

Comentar

resaltar varias imagenes al pasar por encima de una

Publicado por ini (11 intervenciones) el 23/06/2014 14:25:55

utiliza tu nombre de usuario de aquí y password LWP

Valora esta respuesta

Comentar

Pos: 2

Val: 624

resaltar varias imagenes al pasar por encima de una

Publicado por xve (490 intervenciones) el 23/06/2014 16:03:12

Me ha costado encontrarlo... pero al final como siempre ha sido un pequeño fallo...

1.- esto es erroneo

<script src="jquery.min.js"></script>

Tiene que ser:

<script src="jquery.min.js" type="text/javascript"></script>

2.- Ahora ya puedes cambiar:

$a.thumbpiramide ("img").hover(function(){

por

$("img").hover(function(){

Coméntanos, ok?

Valora esta respuesta

Comentar

resaltar varias imagenes al pasar por encima de una

Publicado por ini (11 intervenciones) el 23/06/2014 18:31:59

es muy curioso pero tampoco funciona, por lógica deveria de funcionar ...

he hecho otra pagina solo con la piramide y ademas he añadido las imagenes fuera de la tabla y puedes ver el efecto.

en la piramide no funciona pero fuera si .... muy curioso,

http://goo.gl/eUmJQc

sigo dandole vueltas a donde estoy fallando porque quiero el efecto en las imagenes de la piramide.
y gracias de nuevo

Valora esta respuesta

Comentar

Pos: 2

Val: 624

resaltar varias imagenes al pasar por encima de una

Publicado por xve (490 intervenciones) el 24/06/2014 20:43:34

Hola Ini, en la pirámide, te faltan las clases de css, únicamente tienes puesto el id...

Valora esta respuesta

Comentar

resaltar varias imagenes al pasar por encima de una

Publicado por ini (11 intervenciones) el 25/06/2014 11:54:04

Hola xve,
no te molestaría sin antes hacer pruebas ..... ya había probado a poner las clases de css en la pirámide pero no me funciono.

es muy curioso ..............

Tres pruebas:

1) solo Pirámide con clases y script (no funciona), esta es la que quiero que funcione.
http://goo.gl/ldnjhw

2) Pirámide mas las mismas imágenes abajo en fila, solo funcionan las imágenes de abajo pero en la pirámide NO (curioso). todas las imágenes con la clase css.
http://goo.gl/8p5CDo

3) y por ultimo, Pirámide sin la clase css (solo id) y las mismas imágenes abajo con el mismo id y la clase css, solo funcionan en las imágenes de abajo y no funciona en la pirámide, lógico porque la pirámide no tiene la clase css.
http://goo.gl/CqlO5q

Muy curioso el asunto porque tu código debería de funcionar perfectamente en la pirámide ...

cabe destacar que estas pruebas las estoy haciendo fuera de la web original para descartar que otros scripts o clases interfiriesen ya que también lo he probado y no funcionaba.

Muchas gracias xve por tu interés, imagino que estarás alucinando porque una cosa que debería ser sencilla no funciona .... yo también.

Valora esta respuesta

Comentar

Pos: 2

Val: 624

resaltar varias imagenes al pasar por encima de una

Publicado por xve (490 intervenciones) el 25/06/2014 19:30:35

Hola Ini, he revisado el que tiene el código completo, y eliminando la clase thumbpiramide funciona!!!

No se exactamente que hace esa clase, pero si la quitas, ahora veras que te funciona, aunque te dobla las imágenes¿? no se porque razón hay dos imágenes...

Bueno, el tema, es que ya he visto porque pasa eso... lo he solucionado quitando estos estilos:
.thumbpiramide:hover span
a.thumbpiramide img:link
a.thumbpiramide img:visited
a.thumbpiramide img:hover
a.thumbpiramide img:active
a.thumbpiramide img

No se si todos son necesarios quitarlos, pero si los quitas funciona!!!

Ya nos comentaras...

Valora esta respuesta

Comentar

resaltar varias imagenes al pasar por encima de una

Publicado por ini (11 intervenciones) el 26/06/2014 14:30:55

Despues de volverme loco, tu ultima respuesta me ha dado la solucion,

no puedo quitar toda la clase thumbpiramide porque es la encargada de sacar un popup en medio de la piramide con informacion y foto de la persona.

haciendo pruebas he conseguido el efecto eliminando las que tu has dicho menos esta:

a.thumbpiramide img:hover {

	border: 2px solid #f00;

	background : transparent;

Gracias xve, ahora a integrarlo en la web a ver si no hay mas problemas:

Resultado: http://goo.gl/Zzdvnx

Valora esta respuesta

Comentar

Pos: 2

Val: 624

resaltar varias imagenes al pasar por encima de una

Publicado por xve (490 intervenciones) el 26/06/2014 16:53:28

Perfecto gracias por comentarlo!!!

Te recomiendo que pongas un borde aunque sea sin color, para que cuando se ponga el borde de color rojo, no se muevan las imágenes por la pantalla.

Valora esta respuesta

Comentar

Espacio blanco final

[solucionado] Eliminar borde en las imágenes de una área de un mapa