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

JavaScript Fancy UI Examples

  1. JS: Image Rollover
  2. JS: Pop-up New Window
  3. JS: Digital Clock
  4. JS: Stopwatch
  5. JS: Fade a Element
  6. JS: Fade a Element Using CSS Transition
  7. JavaScript UI: Shake Element
  8. JS: How to Create Tooltip
  9. JS: Falling Snow Effect
  10. 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