How to Make an Image Rotate on Mouseover

Written by chris hoke
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Make an Image Rotate on Mouseover
(Michael Blann/Lifesize/Getty Images)

The "onMouseOver" function (also called "hover") is a JavaScript event that triggers an action in the user interface when the mouse cursor is placed over an object. JavaScript is primarily used on Web pages, so the event typically changes something on the Web page in which the JavaScript code is written. By using the onMouseOver function, combined with the "rotate" tool of an online image-editing website, you can create a rotating effect for an image that is triggered when users places their mouse cursor over the image.

Skill level:

Things you need

  • Computer
  • Internet access

Show MoreHide


  1. 1

    Launch your default Web browser and type the URL for an online image-editing website (such as Pixenate, Pixlr or LunaPic) into the address bar, then press the "Enter" key.

  2. 2

    Upload the image you wish to rotate by clicking the "Choose your image to edit" link or "Open image from computer" button. Click to select the image, then click "Open." Click "Upload this image" to upload the picture.

  3. 3

    Click the "Rotate" tool on the image-editing toolbar, or click "Image" and select "Rotate Canvas." Click to select the rotation degree and settings, then click "Save to Disk" or "File," then "Save." Save the rotated image in the same directory as the original image file.

  4. 4

    Launch your default HTML editor. If you do not have a default HTML editor, click the "Free HTML Editors" link in the Resources section. Create a new HTML document.

  5. 5

    Click the "File" menu and choose "Save." Type "rotate.html" as the document name and choose the folder that contains the "image1" and "image2" files as the save directory. Click "Save."

  6. 6

    Locate the "<body>" and "</body>" tags in the new HTML document. Click to place the mouse cursor between the two body tags, then press "Enter" to create a new line.

  7. 7

    Type the following into the blank line, replacing the "rotatedimage.gif" text with the rotated image name and the "originalimage.gif" text with the original, unrotated image name:

    <a href="" onMouseOver="document.Rotate.src='rotatedimage.gif';" onMouseOut="document.Rotate.src='originalimage.gif';">

    Press "Enter" to create a new line.

  8. 8

    Type the following:

    <img src="originalimage.gif" name="Rotate">

    Press "Enter."

  9. 9



    Click the "File" menu and choose "Save."

  10. 10

    Double-click the "rotate.html" file to open it in your default Web browser. Hover the mouse cursor over the image to see the rotation effect, then move your mouse cursor off the image to see it revert back to the original, unrotated image.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.