JS: Image Rollover

By Xah Lee. Date: . Last updated: .

This page shows a JavaScript based image rollover.

Move your mouse to the following image and see it change. (on mobile devices, touch the image also works.)

tile A

Here's the HTML code:

<img id="img_roll_54998" src="i/tile_A.png" alt="tile A">

Here's the JavaScript code:

let obj = document .getElementById("img_roll_54998");

(new Image()).src = "i/tile_B.png"; // pre-cache

obj.addEventListener("mouseover", (() => { obj.src="i/tile_B.png"; }) , false);

obj.addEventListener("mouseout", (() => { obj.src="i/tile_A.png"; }) , false);

How to pre-cache Images?

(new Image()).src = "cats.gif";

the Image() is a constructor that returns a HTMLImageElement object, which represents the <image> element.

Pure CSS Image Rollover

CSS: Image Rollover

Web Scripting Examples

  1. Disable Right Click
  2. document.write
  3. Image Rollover
  4. Pop-up New Window
  5. Digital Clock
  6. Stopwatch
  7. Fade a Element
  8. Fade a Element Using CSS Transition
  9. Shake Element
  10. How to Create Tooltip
  11. Falling Snow Effect
  12. JavaScript: Floating Box Following Scroll
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS in Depth
  4. JS Reference
  5. DOM
  6. SVG
  7. Web Dev Blog