elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Trabajando con las ramas de git (tercera parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  cambiar tamaño imagen con onmouseover
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: cambiar tamaño imagen con onmouseover  (Leído 5,510 veces)
viher

Desconectado Desconectado

Mensajes: 113



Ver Perfil
cambiar tamaño imagen con onmouseover
« en: 7 Septiembre 2010, 16:00 pm »

hola,yo tengo el siguiente código con mouseover

Código
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <SCRIPT LANGUAGE="javascript">
  5. <!-- Begin
  6. loadImage1 = new Image();
  7. loadImage1.src = "http://img100.xvideos.com/videos/thumbs/0/8/7/0870cc6a3cd66f55c48e8cf241c4c268.2.jpg";
  8. staticImage1 = new Image();
  9. staticImage1.src = "http://img100.xvideos.com/videos/thumbs/0/8/7/0870cc6a3cd66f55c48e8cf241c4c268.1.jpg";
  10. // End -->
  11. </script>
  12. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  13. <title>Documento sin título</title>
  14. </head>
  15.  
  16. <body>
  17. <a href="http://img100.xvideos.com/videos/thumbs/0/8/7/0870cc6a3cd66f55c48e8cf241c4c268.3.jpg" onmouseover="image1.src=loadImage1.src;" onmouseout="image1.src=staticImage1.src;">
  18. <img name="image1" src="http://img100.xvideos.com/videos/thumbs/0/8/7/0870cc6a3cd66f55c48e8cf241c4c268.1.jpg" border=0></a>
  19. </body>
  20. </html>

el caso es que querria que cuando pase el raton por encima la imagen que está puesta se pusiera por ejemplo la propiedad height="100%" y width="100%" pero he estado probando y no lo consigo,he hecho lo siguiente:

Código
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <SCRIPT LANGUAGE="javascript">
  5. <!-- Begin
  6. loadImage1 = new Image();
  7. loadImage1.src = "http://img100.xvideos.com/videos/thumbs/0/8/7/0870cc6a3cd66f55c48e8cf241c4c268.2.jpg";
  8. staticImage1 = new Image();
  9. staticImage1.src = "http://img100.xvideos.com/videos/thumbs/0/8/7/0870cc6a3cd66f55c48e8cf241c4c268.1.jpg";
  10. // End -->
  11. </script>
  12. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  13. <title>Documento sin título</title>
  14. </head>
  15.  
  16. <body>
  17. <a href="http://img100.xvideos.com/videos/thumbs/0/8/7/0870cc6a3cd66f55c48e8cf241c4c268.3.jpg" onmouseover="image1.src=loadImage1.src; image1.width=100%;" onmouseout="image1.src=staticImage1.src;">
  18. <img name="image1" src="http://img100.xvideos.com/videos/thumbs/0/8/7/0870cc6a3cd66f55c48e8cf241c4c268.1.jpg" border=0></a>
  19. </body>
  20. </html>

como seria? gracias


« Última modificación: 7 Septiembre 2010, 20:32 pm por viher » En línea

Franki

Desconectado Desconectado

Mensajes: 46


Ver Perfil WWW
Re: cambiar tamaño imagen con onmouseover
« Respuesta #1 en: 8 Septiembre 2010, 00:32 am »

Código
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <SCRIPT LANGUAGE="javascript">
  5. <!-- Begin
  6. loadImage1 = new Image();
  7. loadImage1.src = "http://img100.xvideos.com/videos/thumbs/0/8/7/0870cc6a3cd66f55c48e8cf241c4c268.2.jpg";
  8. staticImage1 = new Image();
  9. staticImage1.src = "http://img100.xvideos.com/videos/thumbs/0/8/7/0870cc6a3cd66f55c48e8cf241c4c268.1.jpg";
  10. // End -->
  11. </script>
  12. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  13. <title>Documento sin título</title>
  14. </head>
  15.  
  16. <body>
  17. <a href="http://img100.xvideos.com/videos/thumbs/0/8/7/0870cc6a3cd66f55c48e8cf241c4c268.3.jpg" onmouseover="image1.src=loadImage1.src; image1.style.width='100%';" onmouseout="image1.src=staticImage1.src;">
  18. <img name="image1" src="http://img100.xvideos.com/videos/thumbs/0/8/7/0870cc6a3cd66f55c48e8cf241c4c268.1.jpg" border=0></a>
  19. </body>
  20. </html>

No puedes acceder directamente al atributo width a partir de la imagen. A partir de la imagen puedes acceder al atributo style, y a partir de ese atributo al atributo width. Luego tienes que comentar entre comillas simples el valor del atributo width porque es una cadena de texto.

Eso son los cambios para que funcionen. Revisa el código que te he puesto.

Bonita imagen xD.


En línea

viher

Desconectado Desconectado

Mensajes: 113



Ver Perfil
Re: cambiar tamaño imagen con onmouseover
« Respuesta #2 en: 8 Septiembre 2010, 02:19 am »

muchas gracias Franki  ;-)
En línea

:ohk<any>


Desconectado Desconectado

Mensajes: 1.744


Yo lo que quiero que me salga bien es la vida.


Ver Perfil WWW
Re: cambiar tamaño imagen con onmouseover
« Respuesta #3 en: 9 Septiembre 2010, 14:11 pm »


Bonita imagen xD.

 ;-) ;-) ;-)
En línea

Y es que a veces pienso que si no estuviera loco no podría salir adelante.
Lo que no se es capaz de dar, en realidad no se posee, uno es poseído por ello.
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Cambiar contenido de OnMouseOver y Out desde un Array
Desarrollo Web
Cannabinnol 4 3,280 Último mensaje 1 Febrero 2013, 23:08 pm
por Cannabinnol
[Resuelto] (javascript) Onmouseover ocurre con los elementos hijos
Desarrollo Web
Seyro97 1 1,829 Último mensaje 5 Abril 2015, 18:20 pm
por Seyro97
[Resuelto] Cambiar el tamaño de una imagen alojada en otro servidor
Desarrollo Web
user-marcos 5 3,719 Último mensaje 11 Enero 2016, 23:35 pm
por Ume
Subir imagen y cambiar tamaño
PHP
gabrielbdmr 0 2,124 Último mensaje 2 Diciembre 2016, 02:10 am
por gabrielbdmr
Cambiar el tamaño de imagen dinamicamente
Desarrollo Web
FGM24 4 11,160 Último mensaje 5 Noviembre 2021, 02:54 am
por FGM24
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines