Html:cambiar de imagen o de tamaño de imagen al pasar el ratón

Programar (a nivel básico) siempre me ha parecido sencillo, sólo se trata de saber lo que puedes hacer y como. Pero hace tiempo un programador web me dijo algo que se me quedó grabado “no pierdas tiempo programando cosas que otro ya ha hecho…en Internet hay muchísimas”.

Pongo este pequeño código por si alguien quiere que una imagen cambie o cambie de tamaño al pasar el ratón.

<img src="/imagen.jpg" width="150" height="100" name="image_prueba"
onmouseover="image_prueba.width='300';image_prueba.height='200';"
onmouseout="image_prueba.width='150';image_prueba.height='100';" />

Esto cambia la imagen.jpg  de tamaño 150x100 a 300x200 al pasar el ratón. 
Cuando quitamos el ratón lo vuelve al tamaño original.
Para cambiar la imagen:
<img src="image1.gif" 
onmouseover="this.src='image2.gif'" 
onmouseout="this.src='image1.gif'">

Esto también se puede hacer en Java Script:

<script language=”JavaScript”>
<!– Hide the script from old browsers —

img0_on = new Image(186,25);
img0_on.src=”example2.gif“;
img0_off = new Image(186,25);
img0_off.src=”example1.gif“;

img1_on = new Image(103,33);
img1_on.src=”email2.gif“;
img1_off = new Image(103,33);
img1_off.src=”email1.gif“;

function over_image(parm_name)
     {
        document[parm_name].src = eval(parm_name + “_on.src”);
     }
function off_image(parm_name)
     {
        document[parm_name].src = eval(parm_name + “_off.src”);
     }
// –End Hiding Here –>
</script>

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Resumen de nuestra Política de Privacidad

  • Responsable: SmythSys IT Consulting SLNE.
  • Finalidad: Gestionar y moderar los comentarios.
  • Legitimación: Necesitas dar tu consentimiento para publicar un comentario.
  • Destinatarios: Tus datos se alojan en los servidores de OVH.
  • Derechos: Tienes derecho a acceder, rectificar, limitar y suprimir los datos en la dirección del responsable (en nuestra política de privacidad).

Scroll al inicio