Tema: Rollover
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 05/06/2013, 03:12
inventanova
 
Fecha de Ingreso: abril-2011
Mensajes: 4
Antigüedad: 13 años, 1 mes
Puntos: 0
Rollover

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