Efecto al pasar el ...
Avisos
Vaciar todo

Efecto al pasar el cursos sobre la imagen  

Página 1 / 3
 
David
 David
Usuario experto

Hola.

Puesto no veo nada que se parezca a lo que necesito, se haya solucionado o sea para la plataforma que necesito, abro un nuevo tema.

Quiero que tras pasar el ratón por la imagen que hay (lo haría en tres independientes una de la otra) en el home, me haga el mismo efecto que hace cuando lo paso por los productos también de la home (muestra una segunda imagen).

El código que yo pongo en 'vista código' (edito HTML)

Pero me da como resultado, 'contenido no válido'

Os adjunto unas capturas para que lo veáis y también el interior de donde quiero hacerlo.

¡Muchas gracias y espero que me puedan ayudar!
¡Saludos!

URL del sitio: Contenido solo visible a usuarios registrados

 

 

 

Este debate ha sido modificado el hace 4 años por antonio
Citar
Respondido : 17/08/2015 12:12 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

HOla

Tendrías que habilitar temporalmente tu sitio web para ver el código del efecto y el código que has puesto y si tiene dependencias javascript

Saludos.

ResponderCitar
Respondido : 17/08/2015 6:39 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

David
 David
Usuario experto

Hola.

Ya está habilitada. Perdón.

¡Gracias!

ResponderCitar
Respondido : 17/08/2015 6:44 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

El código de cambio de imagen sólo funciona en el ámbito de producto, de manera general las dos imagenes cargan a la vez pero se oculta una de ellas al pasar el mouse, esto además lo hace con referencia a javascript cambiando al parecer la propiedad opacity

El código que quieres implementar sigue otra estrategia, tendrías que indicarnos de donde sacaste este código y en que parte de tu sitio web lo quieres poner , envía la url exacta

Saludos.

ResponderCitar
Respondido : 17/08/2015 10:24 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

David
 David
Usuario experto

Hola, John. Gracias por contestar.

Yo quisiera que hiciera el mismo efecto que hace para los productos, tan bien como tu lo explicas.

Cogí es código (de la red) pensando que era el correcto, pero si no es así (que está visto que no), dime cuál sería el correspondiente. Quiero que haga el mismo efecto que en la sección 'productos' las imágenes colocadas en módulo 'configurador de temas', 'gancho home'. ¿Cómo sé la url exacta de esto? Te adjunto una imagen para ver si es esto exactamente lo que necesitas.

Por lo que estoy viendo, la línea de los productos que hacen este efecto es (creo)

Pero claro hay que dar bien para implementarlo correctamente y en su sitio adecuado.

¡Muchísimas gracias y espero su ayuda!

 

Esta publicación ha sido modificada el hace 4 años por antonio
ResponderCitar
Respondido : 18/08/2015 12:17 pm
Pablo Velasco
 Pablo Velasco
Illustrious Member

Hola,

¿Qué módulos estás utilizando para cargar estas imágenes de la home donde quieres hacer el efecto del cambio de imagen?

Analizando la imagen que has puesto de ejemplo, no veo que haya ningún código javascript que haga el reemplazo de la imagen. Este código tendrías que incluirlo en el propio código HTML. Si se está usando algún editor HTML para configurar el contenido del módulo tendrías que entrar en la vista HTML del mismo para poder añadir el código de forma manual.

ResponderCitar
Respondido : 18/08/2015 1:12 pm

Cursos Gratuitos WordPress

David
 David
Usuario experto

Hola, Pablo.

El módulo es uno que está por defecto en la versión de prestasho que tengo (1.6.0.14) de la plantilla Himalia. Me meto en módulos y me voy a 'configurador de temas' y en añadir elementos, las opciones que me da.

He hecho una prueba después de leer tu comentario (llevas razón), he pensado, y casi me sale. La página está activada para que veas el efecto. Te adjunto unas capturas para que veas dónde estoy.

Apuntar que la imagen de atrás no consigo ponerla a la medida que le estoy dando.

¡Gracias por el interés y ayuda!

ResponderCitar
Respondido : 18/08/2015 2:14 pm
Pablo Velasco
 Pablo Velasco
Illustrious Member

Hola,

El problema está en que estás utilizando el código usado para las imágenes de los productos para tratar de hacer tu reemplazo de imagen, y este código está pensado para ser utilizado específicamente por las imágenes, por lo que en otros lugares te generará errores de diseño como el que tienes ahora.

Tendrías que probar a utilizar un código como el del primer mensaje de este hilo, ya que puede que sí funcione.

ResponderCitar
Respondido : 18/08/2015 4:01 pm

David
 David
Usuario experto

Hola, Pablo.

Pues sí, puede ser, pero con ese código estaba casi que lo conseguía y con el que yo puse al principio, no para de darme error. Hago pruebas, modifico, miro si falta o sobra alguna comilla o palabra, pero me dice una y otra código no válido. Estoy alojando las imágenes en diferentes sitios para ver si fuera eso, pero tampoco.

¿Alguna ayuda con el código u otra que me sirva definitivamente?

¡Gracias y saludos!

ResponderCitar
Respondido : 19/08/2015 3:03 pm
Pablo Velasco
 Pablo Velasco
Illustrious Member

Hola,

Analizando las 4 imágenes de la página de inicio no veo que ninguna tenga el código que habías indicado inicialmente. Sin embargo, sí que estaba el código que habías puesto cuando probaste el sistema de rollover que usan las imágenes de los productos.

Asegúrate de que has puesto el código en el lugar correcto, ya que no se ve cargando.

ResponderCitar
Respondido : 19/08/2015 4:13 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

David
 David
Usuario experto

Hola, Pablo.

¿Te refieres a este código:?

Así, aún viendo si falla o sobra alguna comilla, letra o enlace de la imágen, me da "Contenido no válido". Este código lo pongo en el cuerpo de 'edición HTML opcional' que me da el módulo.

¿O a este otro, que es el que tienen las imágenes de los productos:?

Este, como resultado, poniéndolo en el mismo cuerpo opcional para HTML, me da la captura que te comenté. Las dos imágenes con efecto incluido, pero la que queda atrás, no encaja en las medidas y no consigo modificarla.

¡Saludos y perdona mi torpeza por momentos!
¡Espero tu ayuda!
¡Gracias!

Esta publicación ha sido modificada el hace 4 años por antonio
ResponderCitar
Respondido : 19/08/2015 6:27 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Tal como te comentó Pablo al parecer el segundo código te será más dificil de implementar en otro lugar, será mejor trabajar con el código inicial

El código que comentaste al inicio es este, asegurate de que las rutas a las imágenes sean válidas
http://www.sitepoint.com/web-foundations/onmouseover-html-element/

Saludos.

ResponderCitar
Respondido : 19/08/2015 7:48 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

David
 David
Usuario experto

Hola.

Cojo el código y lo pongo tal cual. Estoy utilizando imágenes de distinto sitios para comprobar si el error es la URL de las imágenes, pero nada, me dice que Contenido no válido.

El tema es que debería servir la simple línea, pero ya dudo de aquí valga, porque en el mismo enlace dice:

Note that this event attribute cannot be applied to the following elements:

applet
base
basefont
bdo
br
font
frame
frameset
head
html
iframe
isindex
meta
param
script
style
title

Pero yo me pregunto que si esta línea está hecha para poder aplicarse en HTML, por qué se dice que no vale.
Por más que lo intento, no me sale. Yo pongo esto, que son las dos imágenes que quiero. Son dos imágenes alojada en mi cuenta de dropbox

¡Saludos y espero de vuestra ayuda!
¡Muchas gracias!

Esta publicación ha sido modificada el hace 4 años por antonio
ResponderCitar
Respondido : 23/08/2015 3:02 pm
Luis Mendez Alejo
 Luis Mendez Alejo
Miembro Admin

Hola David,

¿Has probado con imágenes que estén en tu Hosting y que no tengan que leerse desde DropBox?

Saludos

ResponderCitar
Respondido : 24/08/2015 3:49 am

wpdoctor-revisa-la-salud-de-tu-wordpress

David
 David
Usuario experto

Hola.

Estoy probando y probando, con imágenes del hosting como de fuera (dropbox, flickr...), pero nada. Me estoy dando cuenta de que la acción 'onmouseover' y 'onmouseout', son las que me dicen que ¡contenido no válido. Pasen por la web y miren como tengo el efecto ahora mismo.

De todas formas, aparte de terminar por encontrar la solución, ¿me podrían poner un ejemplo de cómo sería con una imagen almacenada en mi host de prestashop?

¡Gracias y espero de vuestra ayuda!
¡Saludos!

ResponderCitar
Respondido : 24/08/2015 4:27 pm
Página 1 / 3