Cambiar una zona al pasar el raton

[dmm84]

Hola a todos,

Código CSS:

#uno #n { background:url(../images/0iz.png) no-repeat; padding-bottom:5px; padding-left:10px;}
#dos #n { background:url(../images/0de.png) no-repeat; padding-bottom:5px; padding-left:10px;}
 
#uno #n:hover { background:url(../images/1iz.png) no-repeat; padding-bottom:5px; padding-left:10px;}
#dos #n:hover { background:url(../images/1de.png) no-repeat; padding-bottom:5px; padding-left:10px;}
 

Código HTML:

<a href="#" id="uno"><span id="n"></span></a>
<a href="#" id="dos"><span id="n"></span></a>
 

Bueno, el caso es que lo que yo quiero conseguir es que al pasar el raton por #dos se tiene que cambiar tambien #uno. Es decir, si solo paso el raton por #uno pues solo #uno se cambia pero si paso el raton por #dos, entonces #uno y #dos se tienen que cambiar. A ver si alguien me pudiera ayudar con esto.

[Batan]

Con CSS no.
Con Javascript y la propiedad onmousever puedes logar esos efectos.

Saludos

[dmm84]

y como seria un ejemplo sencillo de eso?

[Batan]

Vale, pero uno sencillo solo

El HTML

Código HTML:

<a href="#" id="uno" style="color: blue;" onmouseover="uno()" onmouseout="unoSoltar()">Primer enlace</a>
    <a href="#" id="dos" style="color: blue;" onmouseover="dos()" onmouseout="dosSoltar()">Segundo enlace</a>
 

Invocas los eventos onmouseover(al poner el cursor encima) y onmouseout(al quitar el cursor)



Javascript

Código Javascript:

<script type="text/javascript">
function uno(){
    document.getElementById('dos').style.color = "red";
    }
 
function dos(){
    document.getElementById('uno').style.color = "red";
    }
    
function unoSoltar(){
    document.getElementById('dos').style.color = "blue";
    }
    
function dosSoltar(){
    document.getElementById('uno').style.color = "blue";
    }
</script>
 

Creamos cuatro funciones, las dos primeras harás que el estilo del enlace cambie, y los dos siguiente serán las que los devuelvan a su estilo original.


Saludos

[dmm84]

ok, gracias por todo, solo una ultima cosa y ya no te molesto mas:

si quiero que lo que cambie es el background como en el CSS tengo que usar esto:

Código Javascript:

document.getElementById('uno').style.background = "url(../images/1de.png) no-repeat";
 

[Batan]

No hombre, no me molestas, puedes preguntar todo lo que quieras, pero vamos estos son atributos para los id de los elementos, es como CSS

En tu caso el que me pediste seria backgroundImage. Como vez no cambia mucho de CSS backgground-image, solo quita el "-" y la I en mayuscula.

En el padding-left por ejemplo seria paddingLeft.

Espero haberme explicado bien y lo hayas entendido y sino pues "google".

Saludos

[dmm84]

ok, ya se mas o menos lo que tengo que ir buscando para conseguir el resultado que quiero :)

[dmm84]

al final lo e solucionado sin javascript:

Código HTML:

<span id="uno">
<a href="#" id="primero"></a>
<span id="dos">
<a href="#" id="segundo"></a>
<span id="tres">
<a href="#" id="tercero"></a>
</span></span></span>
 

Código CSS:

#primero,
#segundo,
#tercero { background:url(fotoA.jpg) no-repeat; padding-bottom:5px; padding-left:10px;}
 
#uno:hover #primero { background:url(fotoB.jpg) no-repeat; padding-bottom:5px; padding-left:10px;}
#dos:hover #segundo { background:url(fotoB.jpg) no-repeat; padding-bottom:5px; padding-left:20px;}
#tres:hover #tercero { background:url(fotoB.jpg) no-repeat; padding-bottom:5px; padding-left:10px;}
 

Solo hay que ser persistente hasta que las cosas salgan :)