-
Cómo hacer una imagen gira en Mouseover
-
La función "onMouseOver" (también llamado "flotar") es un evento de JavaScript que ejecuta una acción en la interfaz de usuario cuando el cursor del ratón se coloca sobre un objeto. JavaScript se utiliza principalmente en páginas web, por lo que el evento normalmente cambia algo en la página Web en la que está escrito el código JavaScript. Mediante el uso de la función onMouseOver, combinado con la herramienta "Rotar" de un sitio web de edición de imágenes en línea, puede crear un efecto de rotación para una imagen que se activa cuando el usuario coloca el cursor del ratón sobre la imagen.Instrucciones
1 Inicie el navegador web por defecto y escriba la dirección URL de un sitio web de edición de imágenes en línea (como Pixenate, Pixlr o LunaPic) en la barra de direcciones, a continuación, pulse la tecla "Enter".
2 Sube la imagen que desea girar haciendo clic en el "Cambiar la imagen para editar" enlace o "Abrir imagen desde el ordenador" botón. Haga clic para seleccionar la imagen, a continuación, haga clic en "Abrir". Haga clic en "Subir esta imagen" para cargar la imagen.
3 Haga clic en la herramienta "Rotar" en la barra de herramientas de edición de imágenes, o haga clic en "Imagen" y seleccionar "Rotar lienzo". Haga clic para seleccionar el grado de rotación y configuración, a continuación, haga clic en "Guardar en disco" o "Archivo", luego "Guardar". Guardar la imagen rotada en el mismo directorio que el archivo de imagen original.
4 Lanzamiento de su editor HTML predeterminado. Si usted no tiene un editor HTML predeterminado, haga clic en el enlace "libres Editores HTML" en la sección Recursos. Crear un nuevo documento HTML.
5 Haga clic en el menú "Archivo" y seleccione "Guardar". Tipo "rotate.html" como el nombre del documento y seleccione la carpeta que contiene el "imagen1" y archivos "image2" como el directorio de almacenamiento. Clic en Guardar."
6 Localizar los "<body>" y "</ body>" etiquetas en el nuevo documento HTML. Haga clic para colocar el cursor del ratón entre las dos etiquetas del cuerpo, a continuación, pulse "Enter" para crear una nueva línea.
7 Escriba lo siguiente en la línea en blanco, sustituyendo el texto "rotatedimage.gif" con el nombre de la imagen rotada y el texto "originalimage.gif" con el nombre de la imagen original, sin rotar:
<A href = "" onMouseOver = "document.Rotate.src = 'rotatedimage.gif';" onMouseOut = "document.Rotate.src = 'originalimage.gif';">
Pulse la tecla "Enter" para crear una nueva línea.
8 Escriba lo siguiente:
<Img Nombre = "Rotar">
Presione ENTRAR."
9 Tipo:
</a>
Haga clic en el menú "Archivo" y seleccione "Guardar".
10 Haga doble clic en el archivo "rotate.html" para abrirlo en el navegador Web predeterminado. Pase el cursor del ratón sobre la imagen para ver el efecto de la rotación, a continuación, mover el cursor del ratón fuera de la imagen para ver que volver a la imagen original, sin girar.
