Foros del Web » Creando para Internet » CSS »

Cambiando atributos de un id desde otro

Estas en el tema de Cambiando atributos de un id desde otro en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 24/04/2006, 11:36
 
Fecha de Ingreso: abril-2006
Mensajes: 15
Antigüedad: 11 años, 7 meses
Puntos: 0
Cambiando atributos de un id desde otro

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
  #2 (permalink)  
Antiguo 24/04/2006, 11:45
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
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,
  #3 (permalink)  
Antiguo 24/04/2006, 11:45
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
creo que...

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

... debería servir (pero no lo probé)


EDIT: Ni lo pruebes, dije una guarrada
__________________
...___...

Última edición por AlZuwaga; 24/04/2006 a las 11:52
  #4 (permalink)  
Antiguo 24/04/2006, 13:07
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 12 años, 1 mes
Puntos: 1
Un ejemplo simple

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> 
  #5 (permalink)  
Antiguo 24/04/2006, 13:23
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
Ah, estaba cerca antes :)
Pero como de costumbre, IE no lo respeta.
__________________
...___...
  #6 (permalink)  
Antiguo 24/04/2006, 13:37
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 12 años, 1 mes
Puntos: 1
Hola a todos, hola Al Zuwaga.

Cita:
Pero como de costumbre, IE no lo respeta.
IE7, sí
  #7 (permalink)  
Antiguo 24/04/2006, 13:43
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
Qué bueno, esperemos que salga pronto la versión definitiva y que los usuarios de IE migren al 7 rápidamente :)
__________________
...___...
  #8 (permalink)  
Antiguo 24/04/2006, 14:45
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 12 años, 1 mes
Puntos: 1
Hola de nuevo.

la migración a IE7 empezó hace tiempo.
  #9 (permalink)  
Antiguo 24/04/2006, 15:00
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
Sutil, ¿eh? ;)
__________________
...___...
  #10 (permalink)  
Antiguo 24/04/2006, 15:50
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 12 años, 1 mes
Puntos: 1


Yo siempre... ¡Como un elefante cabreado!

  #11 (permalink)  
Antiguo 24/04/2006, 17:57
 
Fecha de Ingreso: abril-2006
Mensajes: 15
Antigüedad: 11 años, 7 meses
Puntos: 0
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
  #12 (permalink)  
Antiguo 24/04/2006, 18:31
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 12 años, 1 mes
Puntos: 1
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?
  #13 (permalink)  
Antiguo 24/04/2006, 18:46
 
Fecha de Ingreso: abril-2006
Mensajes: 15
Antigüedad: 11 años, 7 meses
Puntos: 0
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
  #14 (permalink)  
Antiguo 25/04/2006, 00:04
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 12 años, 1 mes
Puntos: 1
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
  #15 (permalink)  
Antiguo 28/04/2006, 11:41
 
Fecha de Ingreso: abril-2006
Mensajes: 15
Antigüedad: 11 años, 7 meses
Puntos: 0
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
  #16 (permalink)  
Antiguo 28/04/2006, 13:18
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 12 años, 1 mes
Puntos: 1
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'
  #17 (permalink)  
Antiguo 28/04/2006, 14:41
 
Fecha de Ingreso: abril-2006
Mensajes: 15
Antigüedad: 11 años, 7 meses
Puntos: 0
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
  #18 (permalink)  
Antiguo 28/04/2006, 16:18
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 12 años, 1 mes
Puntos: 1
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> 
  #19 (permalink)  
Antiguo 28/04/2006, 17:17
 
Fecha de Ingreso: abril-2006
Mensajes: 15
Antigüedad: 11 años, 7 meses
Puntos: 0
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
  #20 (permalink)  
Antiguo 28/04/2006, 17:56
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 12 años, 1 mes
Puntos: 1
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.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:50.