Si lo que quieres es que al pasar el mouse se cambie la imagen, eso se puede hacer con css y es muy sencillo

Saludos

A mí me ha quedado totalmente clara la explicación, OLMID. No sé Mauro, pero yo ya no tengo ninguna duda más xDDD

Es broma, eh? Pero de verdad creo que el pobre Mauro se habrá quedado igual que estaba. Decir lo que has dicho y no decir nada, viene a ser lo mismo. No lo tomes a mal =)

Iniciado por Duditas

A mí me ha quedado totalmente clara la explicación, OLMID. No sé Mauro, pero yo ya no tengo ninguna duda más xDDD

Es broma, eh? Pero de verdad creo que el pobre Mauro se habrá quedado igual que estaba. Decir lo que has dicho y no decir nada, viene a ser lo mismo. No lo tomes a mal =)

jaja si, igual me gustaría saber como se hace con css, seguí buscando mas info y encontré como hacerlo con javascript.
Dejo el link por si alguien le interesa Javascript - Cambio de imagen al pasar el mouse - onmouseover - Tutores.org

No sabía muy bien si quería que al pasar el mouse cambie la imagen (pero siempre la misma) o que cambie a imágenes aleatorias

Con css el efecto sería este:
https://dl.dropbox.com/u/6499300/Cam...genFooter.html

El código a insertar en el footer o donde quieras que aparezcan la imagen es este:

Código HTML:

<a href="ENLACE"><div class="cambioImagenFooter"></div></a>

En la plantilla additional.css pega esto:

.cambioImagenFooter { background: url(URL DE LA IMAGEN 1) center center no-repeat; width: 700px; height:100px; }
.cambioImagenFooter:hover { background: url(URL DE LA IMAGEN 2) center center no-repeat; }

Cambiar:
ENLACE
URL DE LA IMAGEN 1
URL DE LA IMAGEN 2
Las medidas width y height a las de tu imagen

Saludos y espero que funcione

funciona a la perfeccion, me gusto mas hacerlo asi con css que con javascript.
Solo una consulta mas para terminar este thread.
en mi caso son varias imagenes, o sea ejemplo esta youtube y esta twitter. el tema que el ponerlas queda una arriba de la otra. dejo el ejemplo.

ty.png

Esto se debe a que estan en un div, lo que quiero hacer es que quede una al lado de la otra. me explico?

Código:

<div align="center">
<a href="twitter"><div class="cambioImagenFooter"></div></a>
<a href="youtube"><div class="cambioImagenFooter1"></div></a>
</div>

Seria algo asi como esta ahora.
No se como poner cambioImagenFooter para que no este dentro de un div class.

Para colocar un div al lado del otro con css, añade la propiedad float:left; a la/s clase/s que quieres que vayan en linea horizontal, empezarán de izquierda a derecha

Otra forma sería construyendo una tabla, el código:

Código HTML:

<table align="center" border="0" cellpadding="5" cellspacing="0"><tr>
<td><a href="youtube"><div class="cambioImagenFooter"></div></a></td>
<td><a href="twitter"><div class="cambioImagenFooter1"></div></a></td>
</tr></table>

Para pegar en la plantilla additional.css sería esto:

Código:

.cambioImagenFooter{background: url(IMAGEN youtube1) center center no-repeat;width: 150px;height:100px;padding:3px;border:1px solid #888;}
.cambioImagenFooter:hover{background: url(IMAGEN youtube2) center center no-repeat;border:1px solid red;}

.cambioImagenFooter1{background: url(IMAGEN twitter1) center center no-repeat;width: 150px;height:100px;padding:3px;border:1px solid #888;}
.cambioImagenFooter1:hover{background: url(IMAGEN twitter2) center center no-repeat;border:1px solid red;}

Y este el resultado
https://dl.dropbox.com/u/6499300/Cam...enFooter2.html


Saludos

Iniciado por OLMID

Para colocar un div al lado del otro con css, añade la propiedad float:left; a la/s clase/s que quieres que vayan en linea horizontal, empezarán de izquierda a derecha

Otra forma sería construyendo una tabla, el código:

Código HTML:

<table align="center" border="0" cellpadding="5" cellspacing="0"><tr>
<td><a href="youtube"><div class="cambioImagenFooter"></div></a></td>
<td><a href="twitter"><div class="cambioImagenFooter1"></div></a></td>
</tr></table>

Para pegar en la plantilla additional.css sería esto:

Código:

.cambioImagenFooter{background: url(IMAGEN youtube1) center center no-repeat;width: 150px;height:100px;padding:3px;border:1px solid #888;}
.cambioImagenFooter:hover{background: url(IMAGEN youtube2) center center no-repeat;border:1px solid red;}

.cambioImagenFooter1{background: url(IMAGEN twitter1) center center no-repeat;width: 150px;height:100px;padding:3px;border:1px solid #888;}
.cambioImagenFooter1:hover{background: url(IMAGEN twitter2) center center no-repeat;border:1px solid red;}

Y este el resultado
https://dl.dropbox.com/u/6499300/Cam...enFooter2.html


Saludos

Sin palabras OLMID.
Muchisimas gracias, me quedo de lujo!!!!

Mauro, me alegro muchísimo que te haya servido, ha sido todo un placer compartirlo

Un saludo