Rollover

[inventanova]

Hola a todos

Planteo mi problema ante la desesperación, jeje:

En el home de un wordpress: http://www.clinicanaranjoacosta.com/ Estoy intentando hacer tres rollovers (las tres bolas azules) . Pues bien, la primera me funciona a la perfección, pero la segunda y tercera, cuando retiro el ratón, por más vueltas que le doy no consigo hacer que vuelva la imagen de color azul.

El código que estoy usando es el siguiente: (pongo el de la sección entera:

[one_third]
<div>
<div style="width: 120px; height: 80px; position: relative;"></div>
<p style="text-align: center;"><img style="position: absolute; left: 0; top: 0; width: 40%; height: auto;" onmouseout="document.images.rollover.style.visibil ity = 'visible'" alt="rollover" src="http://www.clinicanaranjoacosta.com/wp-content/uploads/2013/06/img2.gif" />
<img id="rollover" style="position: absolute; left: 0; top: 0; width: 40%; height: auto;" onmouseover="this.style.visibility = 'hidden'" alt="rollover" src="http://www.clinicanaranjoacosta.com/wp-content/uploads/2013/06/img1.gif" name="rollover" /></p>
&nbsp;
<h4 style="text-align: center;">PERIODONCIA</h4>
Cuidamos de la SALUD y ESTÉTICA de sus ENCÍAS con el MÁXIMO RIGOR CIENTÍFICO
</div>
[/one_third]

[one_third]
<div>
<div style="width: 120px; height: 80px; position: relative;"></div>
<p style="text-align: center;"><img style="position: absolute; left: 0; top: 0; width: 40%; height: auto;" onmouseout="document.images.rollover.style.visibil ity = 'visible'" alt="rollover" src="http://www.clinicanaranjoacosta.com/wp-content/uploads/2013/06/img4.gif" />
<img id="rollover" style="position: absolute; left: 0; top: 0; width: 40%; height: auto;" onmouseover="this.style.visibility = 'hidden'" alt="rollover" src="http://www.clinicanaranjoacosta.com/wp-content/uploads/2013/06/img3.gif" name="rollover" /></p>
&nbsp;
<h4 style="text-align: center;">IMPLANTES</h4>
Implantología GUIADA POR ORDENADOR, técnica SIN PUNTOS, SIN INCISIONES, SIN MOLESTIAS Y DEL ALTA PRECISIÓN

</div>
[/one_third]

[one_third_last]
<div>
<div style="width: 120px; height: 80px; position: relative;"></div>
<p style="text-align: center;"><img style="position: absolute; left: 0; top: 0; width: 40%; height: auto;" onmouseout="document.images.rollover.style.visibil ity = 'visible'" alt="rollover" src="http://www.clinicanaranjoacosta.com/wp-content/uploads/2013/06/img2.gif" />
<img id="rollover" style="position: absolute; left: 0; top: 0; width: 40%; height: auto;" onmouseover="this.style.visibility = 'hidden'" alt="rollover" src="http://www.clinicanaranjoacosta.com/wp-content/uploads/2013/06/img1.gif" name="rollover" /></p>
&nbsp;
<h4 style="text-align: center;">ORTODONCIA</h4>
La Ortodoncia del FUTURO ya es PRESENTE: sistema INVISALIGN. Consiga una sonrisa espléndida sin que la gente note que está siguiendo un tratamiento, y sin alterar su vida cotidiana

</div>
[/one_third_last]

&nbsp;

<a href="/?page_id=52"><img alt="laura" src="http://www.clinicanaranjoacosta.com/wp-content/uploads/2013/05/image-1.jpeg" width="400" height="auto" /></a>
<div>
<h1 style="text-align: left;">¿POR QUÉ ELEGIRNOS?</h1>
En nuestra clínica apostamos por la excelencia Académica y Clínica. Usted será atendido por Médicos Especialistas en Ortodoncia, Periodoncia e Implantes, acreditados por la Universidad Complutense de Madrid.

</div>

Y las css asociadas son:

.bola {
margin-left:30%;
margin-bottom:60px;
}

.bola2 {
margin-left:30%;
margin-bottom:60px;
}


.bola3 {
margin-left:30%;
margin-bottom:60px;
}

.textoservicios {
text-align: justify;
color:#808080;
}

y para media querie:

.bola{
width:18% !important;
height:auto !important;
margin-left:7%;
margin-bottom: 5%;
}

.bola2{
width:18% !important;
height:auto !important;
margin-left:39%;
margin-bottom: 5%;
}

.bola3{
width:18% !important;
height:auto !important;
margin-left:70%;
margin-bottom: 5%;
}

.textoservicios {
float: left;
width: 200px;
margin-right: 20px;
margin-left: 17px;
color:#808080
}

A ver si alguien me pudiera echar una mano, por favor

Gracias y un saludo

[pzin]

No sé que tendrá que ver con CSS si estás usando JavaScript.

[inventanova]

La imagen de las "bolas" en sí tienen una clase asociada, para colocarlas donde yo quería....


El código es exactamente igual para las tres, si de hecho elimino el de la primera la segunda (la que pasa a ser primera) funciona bien...no entiendo nada; en javascript me pierdo, copié el código de un tutorial...lo mismo el problema viene por ahí, se me está pasando algo que no entiendo ...¿podrías ayudarme?

[pzin]

Yo es que no usaría JavaScript para hacer eso.

Con CSS puedes poner un enlace con esa imagen de fondo, y luego usar la pseudo-clase :hover para cambiar esa imagen por otro. O hacer usando CSS sprites.

Código HTML:

<a class="servicios" href="enlace.htm">
  Periodoncia
</a>
 

Código CSS:

a.servicios {
  display: inline-block;
  width: 30%
  padding: 100px 20px 0;
  background-image: url(bolanaranja.png);
  text-align: center;
}
 
a.servicios:hover {
  background-image: url(bolagris.png);
}
 

Es bastante menos lioso que la sopa de JavaScript que tienes ahí.