Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: viher en 7 Septiembre 2010, 16:00 pm



Título: cambiar tamaño imagen con onmouseover
Publicado por: viher 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


Título: Re: cambiar tamaño imagen con onmouseover
Publicado por: Franki 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.


Título: Re: cambiar tamaño imagen con onmouseover
Publicado por: viher en 8 Septiembre 2010, 02:19 am
muchas gracias Franki  ;-)


Título: Re: cambiar tamaño imagen con onmouseover
Publicado por: :ohk<any> en 9 Septiembre 2010, 14:11 pm

Bonita imagen xD.

 ;-) ;-) ;-)