Consulta Modificación con imágenes.

Mauro25987 · 7 Jun 2012

Hola vbHispano otra ves ja, les quería pedir ayuda con algo que quiero hacer, puede resultar sencillo para los que saben algo de programación de vbulletin. Todavia no esta a mi alcance.
Lo que quiero hacer es una modificación por ejemplo en el footer con imágenes donde cuando pase con el mouse se cambie imagen. y al hacer click me lleve a un link.

Mas o menos linkear y centrar una imagen con html lo se, lo que no se hacer el script para el cambio de imagen con el cursor del mouse.

Gracias de ante mano.

imported_OLMID · 8 Jun 2012

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

Duditas · 8 Jun 2012

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 =)

Mauro25987 · 8 Jun 2012

Duditas dijo:
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

imported_OLMID · 9 Jun 2012

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/CambioImagenFooter.html

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

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

Mauro25987 · 11 Jun 2012

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.

Ver el archivo adjunto 5524

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

Insertar CODE, HTML o PHP:

<div align="center">
[COLOR=#008000]<a href=[COLOR=#0000FF]"twitter"[/COLOR]>[/COLOR][COLOR=#000080]<div class=[COLOR=#0000FF]"cambioImagenFooter"[/COLOR]>[/COLOR][COLOR=#000080]</div>[/COLOR][COLOR=#008000]</a>
[/COLOR][COLOR=#008000]<a href=[COLOR=#0000FF]"youtube"[/COLOR]>[/COLOR][COLOR=#000080]<div class=[COLOR=#0000FF]"cambioImagenFooter1"[/COLOR]>[/COLOR][COLOR=#000080]</div>[/COLOR][COLOR=#008000]</a>
</div>[/COLOR]

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

imported_OLMID · 12 Jun 2012

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:

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:

Insertar CODE, HTML o PHP:

.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/CambioImagenFooter2.html

Saludos

Mauro25987 · 12 Jun 2012

OLMID dijo:
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:

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:

Insertar CODE, HTML o PHP:

.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/CambioImagenFooter2.html

Saludos

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

imported_OLMID · 13 Jun 2012

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

Un saludo