Cambiando atributos de un id desde otro

intropedro · #1 (**permalink**) 24/04/2006, 10:36

Hola, estoy comenzando ha utilizar CSS, y necesito cambiar una imagen que tengo en la web por otras dependiendo de la interaccionq ue aga con otros elementos. La imagen la tengo como background para un id, y se cambiar la imagen por ejemplo cuando pongo el raton encima, pero loq ue no se es si se puede cambiar el background de un id desde otro id. No se si me entendera todo el mundo, sino me intento explicar de otra forma.

La cosa es por ejemplo si desde el hover del id UNO puedo cambiar el background del id DOS, por ejemplo.

Saludos

JavierB · #2 (**permalink**) 24/04/2006, 10:45

Hola intropedro. Bienvenido al foro.

Puedes cambiar el fondo de un elemento con:

document.getElementById('tuId').style.background = 'url(imagen2.jpg)';

Espero que te sirva. Saludos,

AlZuwaga · #3 (**permalink**) 24/04/2006, 10:45

creo que...

#id_actual:hover #id_a_afectar{...;}

... debería servir

(pero no lo probé)

EDIT: Ni lo pruebes, dije una guarrada

Jorolo · #4 (**permalink**) 24/04/2006, 12:07

Hola a todos.

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>un ejemplo simple</title>
<style type="text/css">

#parrafo1:hover + #parrafo2 { background: olive; }
 
</style> </head>
<body>
  <p id='parrafo1'>Al posicionar el raton sobre este parrafo debe cambiar el background de parrafo2</p>
  <p id='parrafo2'>parrafo2, con fondo cambiante</p>
 </body> </html>

AlZuwaga · #5 (**permalink**) 24/04/2006, 12:23

Ah, estaba cerca antes :)
Pero como de costumbre, IE no lo respeta.

Jorolo · #6 (**permalink**) 24/04/2006, 12:37

Hola a todos, hola Al Zuwaga.

Cita:

Pero como de costumbre, IE no lo respeta.

IE7, sí

AlZuwaga · #7 (**permalink**) 24/04/2006, 12:43

Qué bueno, esperemos que salga pronto la versión definitiva y que los usuarios de IE migren al 7 rápidamente :)

Jorolo · #8 (**permalink**) 24/04/2006, 13:45

Hola de nuevo.

la migración a IE7 empezó hace tiempo.

AlZuwaga · #9 (**permalink**) 24/04/2006, 14:00

Sutil, ¿eh? ;)

Jorolo · #10 (**permalink**) 24/04/2006, 14:50

Yo siempre... ¡Como un elefante cabreado!

intropedro · #11 (**permalink**) 24/04/2006, 16:57

Hola, gracias a los 3 por la ayuda, pero tengo un problema, y es que no tengo la necesidad de que vaya en la mayoria de los navegadores, y e provao las dos formas que me habeis dcho y ni en opera, ni firefox, ni ie6 me va

.

De todas formas gracias por la ayuda.

Saludos

Jorolo · #12 (**permalink**) 24/04/2006, 17:31

Hola.

Cita:

Iniciado por intropedro

e provao las dos formas que me habeis dcho y ni en opera, ni firefox, ni ie6 me va

.

eso es que has probao poco.

¿Cómo has probado mi código?
¿Que es lo que no te va?

intropedro · #13 (**permalink**) 24/04/2006, 17:46

Código HTML:

<style type="text/css">
#Inicio{
	height: 34px;
	width: 96px;
	text-indent: 10000px;
	overflow: hidden;
	background: url(Botones/prueba.gif) top left no-repeat;
	display: block;
}
#Inicio:hover{
	background: url(Botones/Atras_normal.png);
}
#Atras{
	height: 34px;
	width: 96px;
	text-indent: 10000px;
	overflow: hidden;
	background: url(Botones/prueba.gif) top left no-repeat;
	display: block;
}
#Atras:hover + #Inicio{
	background: url(Botones/Inicio_normal.png);
}
</style>

Lo he puesto asi, la etiqueta inicio me cambia bien cuando me pongo encima de ella, pero cuando me pongo encima de Atras no hace nada. No se si abre cometido algun error, sino ya me diras.

Saludos

Jorolo · #14 (**permalink**) 24/04/2006, 23:04

Hola.

#Atras:hover + #Inicio {
background: url(Botones/Inicio_normal.png); }

¿inicio es hermano adyacente de atras? si no lo es, no deberia funcionar.
http://www.sidar.org/recur/desdi/tra...cent-selectors

intropedro · #15 (**permalink**) 28/04/2006, 10:41

Pues no se, no me termino de aclarar que son hermanos adyacentes, ¿son cuando estan seguidos en el codigo html?

Código HTML:

<td width="50%" height="32">
	<div align="right">
		<a id="Atras" href="#"></a>
	</div>
</td>
<td width="50%">
	<div align="left">
		<a id="Inicio" href="#"></a>
	</div>
</td>

Saludos

Jorolo · #16 (**permalink**) 28/04/2006, 12:18

Hola intropedro.

Hermanos son los hijos del mismo padre
Adyacentes son los que están uno a continuación del otro.

Un ejemplo:

<ul>
<li id='li1'> <em></em> </li>
<li id='li2'> </li>
<li id='li3'> </li>
</ul>

Todos los 'li' son hermanos por que son hijos del mismo padre (ul)
'li1' y 'li2' son hermanos y además adyacentes, 'li1' y 'li3' no son adyacentes

'em' es descendiente de 'ul' pero no hijo, em es hijo de 'li1'

intropedro · #17 (**permalink**) 28/04/2006, 13:41

Vale, ya lo e comprendido, tonces loq ue tenia no eran hermanos adyacentes pero este codigo si lo es:

Código HTML:

<td width="100%" height="32">
	<div align="right">
		<a id="Atras" href="#"></a>
		<a id="Inicio" href="#"></a>
	</div>
</td>

Pero sin embargo me sige sin ir en opera, firefox e ie6

saludos

Jorolo · #18 (**permalink**) 28/04/2006, 15:18

Hola de nuevo.

Casi seguro que el problema es una tonteria. Puede que algo cause 'interferencias'

Prueba y mira este código. ¡Funciona!

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>relacionando hermanos adyacentes ej.02</title>

<style type="text/css">
#Atras:hover + #Inicio {
background: url(avatar_worm_transp.gif); } 
/* este gif es el abatar de Al Zuwaga  */

</style> </head>
<body>

<p>relacionando hermanos con id, dentro de una tabla</p>

<hr>
<table>
<tr> <td>
<div align="right">
		<a id="Atras" href="#">id="Atras"</a>
		<a id="Inicio" href="#">id="Inicio"</a>
	</div>
</td> </tr> </table>

</body> </html>

intropedro · #19 (**permalink**) 28/04/2006, 16:17

ya esta. muchas gracias Jorolo, no se que fallaria pero lo he ido poniendo todo desde 0 y funciona. Para mi que esta igual

.

Una pena que solo se pueda hacer para hermanos adyacentes.

Saludos

Jorolo · #20 (**permalink**) 28/04/2006, 16:56

Como suelen decir los los jueces del tenis... ¡NOO!

Relee el enlace que te puse anteriormente:
http://www.sidar.org/recur/desdi/tra.../selector.html

Especialmente:
# 5.5 Selectores de descendientes
# 5.6 Selectores de hijos
# 5.7 Selectores de hermanos adyacentes

y ya puestos todo el capítulo.

comentarios:
1- estas tecnicas tienen sus limitaciones, no puedes hacer las mismas cosas que con javascript, php, o ensamblador. css no es un lenguaje de programación.
Aun así pueden hacerse muchiiiisimas cosas.

2- Esto es un juego de niños en comparación con las cosas que podran hacerse con css3 (el año que viene)

3- En diversas ocasiones he publicado ejemplos en este foro. Busca y encontrarás

4- odviamente pueden hacerse combinaciones. Por ejemplo: seleccionar un descendiente de un hermano.