Búsqueda en el Foro:
Buscar


« Ver tema anterior :: Ver siguiente tema »  
Autor Mensaje
Mensaje24-01-2014, 23:19 (UTC)    
Título del mensaje: Como agrandar una imagen al pasar el cursor

Existe una forma de al pasar el cursor del raton la imagen se agrande? sin tener que cliquear y se vaya a otra ventana?
Mensaje24-01-2014, 23:55 (UTC)    
Título del mensaje:

Hola sweety-cyv,

Para ampliar la imagen al pasar el mouse y otro para ampliar la imagen al darle click sin abrirse ninguna ventana, es muy sencillo sin efecto alguno al momento de ampliarla.

Ampliar imagen al pasar el mouse escribió:
<img src="URL De la imagen" onmouseover="this.width=500;this.height=500;" onmouseout="this.width=400;this.height=400;" width="300" height="300" alt="" />

------------------------------------------------------------------------------------------------------------------------------------------------------------
width=500: Ancho de la imagen original.
height=500: Altura de la imagen original.
width=400: Ancho de la imagen que quieres que quede después de pasarle el mouse (Se recomienda el mismo tamaño que la imagen miniatura).
height=400: Altura de la imagen que quieres que quede después de pasarle el mouse (Se recomienda el mismo tamaño que la imagen miniatura).
width="300": Ancho de la imagen en miniatura.
height="300": Altura de la imagen en miniatura.
------------------------------------------------------------------------------------------------------------------------------------------------------------
Para ampliar las imágenes al darle click sin abrirse ninguna ventana, es parecido al anterior:
+ http://www.paginawebgratis.es/forum/viewtopic.php?t=55671

Ampliar imágenes con efecto se abren la ventana en tu propia web y con un botón para cerrarlas:
+ http://www.paginawebgratis.es/forum/viewtopic.php?t=66323
+ http://www.paginawebgratis.es/forum/viewtopic.php?t=66297
+ http://www.paginawebgratis.es/forum/viewtopic.php?t=62952

Saludos!
iPWG
Mensaje25-01-2014, 07:54 (UTC)    
Título del mensaje:

Gracias por responderme y ayudarme.
quisiera entender un poco como hacerlo, ya que no soy experta en estas cuestiones y necesito un paso a paso, para lograrlo.
Estuve utilizando el efecto del clic, es decir, cuando se da click a la imagen esta se abre en otra pagina.. por decirlo asi. Pero lei por ahi esto de pasar el mouse y que se amplie o agrande, y me gusto mas el efecto, entonces:
1- una vez que coloque estos codigos, en anterior efecto se anularia no?
2- Donde tengo que colocar los codigos exactamente? para que funcionen bien?
3- Es posible tambien que cuando se ponga el cursos en la imagen esta se "ponga como en blur o gris?, no se explicar bien el efecto.
Gracias
Mensaje25-01-2014, 08:38 (UTC)    
Título del mensaje:

El código que te deje es muy sencillo no tiene efecto alguno ahora si quieres uno con efecto que se abra un pequeño pop-up (ventana) allí mismo al pasar el mouse sin clickear, utiliza este te explicare simplemente como colocarlo en tu web para que función para que no te compliques mucho.

Este código pegalo en "Editar diseño - Configuraciones avanzadas - Texto sobre el diseño"
Cita:
<style type="text/css">
.thumbnail {position: relative; z-index: 0;}
.thumbnail:hover {background-color: transparent; z-index: 50;}
.thumbnail span img{ border-width: 0; padding: 2px; }
.thumbnail:hover span{ visibility: visible; top: 0; left: 10px; }
.thumbnail span{
position: absolute;
background-color: #FAFAFA;
-webkit-box-shadow: 0 0 4px 2px #D6D6D6;
box-shadow: 0 0 5px 2px #D6D6D6;
padding: 5px;
left: -100px;
border: 3px double gray;
visibility: hidden;
color: #000;
text-align:center;
text-decoration: none;
}
</style>

Este código pegalo donde quieras pone una imagen con este efecto ya sea el los "BOX" o en "Controlar paginas - Presionando Fuente HTML"

Cita:
<a class="thumbnail" href="#thumb"><img src="URL de la imagen" width="250px" height="150px" border="0" /><span><img src="URL de la imagen" /><br />Descripción para la foto.</span></a>

URL de la imagen: Remplazarlo por la URL de la imagen que quieras poner hazlo dos veces donde lo indica el código.
250: Este es el ancho de la imagen en miniatura que se mostrara sin pasarle el mouse. (Puedes dejarlo así si no tienes conocimiento sobre esto).
150: Esta es la altura de la imagen en miniatura que se mostrara sin pasarle el mouse. (Puedes dejarlo así si no tienes conocimiento sobre esto).

Vista previa del efecto:


Es todo lo he echo lo mas sencillo que pude para que lo logres entender.

Saludos!
iPWG
Mensaje26-01-2014, 07:50 (UTC)    
Título del mensaje:

Intentare ver que sale. Gracias por tu ayuda
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group