Image Swap with the Mouse

vegaseat 0 186 Views

Swap two images as you move your mouse in and out of the image field. Uses onMouseOver, onMouseOut and a short javascript code.

<!-- Experiments with images  vegaseat  6/15/04 -->
<!-- onMouseOver, onMouseOut, JS -->

<html>
<head>

	<title>Swap Images with onMouseOver and onMouseOut</title>
	
</head>
<body bgcolor="#FFFFCC" text="#3300FF">


<CENTER>
<FORM NAME = form1>
<H2>
Move the mouse across to swap the image ...
</H2>
<A HREF="" name= link1 onMouseOver = "ImgOver()" onMouseOut = "ImgOut()">
    <IMG NAME = "IMG1" SRC = "c:/windows/web/wallpaper/follow.jpg" WIDTH = 800 HEIGHT = 600>
</A>
</CENTER>

<SCRIPT LANGUAGE= JavaScript>

function ImgOver()
{
  // use an image file you have or use one of XP's wallpaper
  document.form1.IMG1.src = 'c:/windows/web/wallpaper/home.jpg';
}

function ImgOut()
{
  // use an image file you have or use one of XP's wallpaper
  document.form1.IMG1.src = 'c:/windows/web/wallpaper/follow.jpg';
}

</SCRIPT>

</body>
</html>

Dani AI

Generated

A few practical notes and a cleaner, more robust approach to the classic onMouseOver/out swap shown by . The original uses local Windows file paths and inline handlers, which are brittle (and will not work for anyone except the original machine). is right to question the missing closing form tag; HTML should be well-formed, but naming an image by a form is fragile. ’s point about preloading is valid – avoid visible flicker – but there are modern, simpler patterns that give better accessibility, performance, and touch support.

A CSS-only solution (no JavaScript) works when a simple hover swap is acceptable and avoids flicker if both images are cached or combined into a sprite:

<div class="swap" role="img" aria-label="Example image"></div>

<style>
.swap { width:800px; height:600px; background-image:url('image1.jpg'); background-size:cover; }
.swap:hover { background-image:url('image2.jpg'); }
</style>

If the element must be an <img> or needs to switch on touch/click, use data attributes plus event listeners and a modern preload method instead of inline handlers:

<img id="swap" src="image1.jpg" alt="Description" data-hover="image2.jpg">

<script>
document.addEventListener('DOMContentLoaded', function () {
  var img = document.getElementById('swap');
  if (!img) return;
  var hover = img.dataset.hover, orig = img.src;
  if (hover) {
    var link = document.createElement('link');
    link.rel = 'preload'; link.as = 'image'; link.href = hover;
    document.head.appendChild(link);
    img.addEventListener('mouseenter', function(){ this.src = hover; });
    img.addEventListener('mouseleave', function(){ this.src = orig; });
    img.addEventListener('touchstart', function(){ this.src = hover; }, {passive:true});
  }
});
</script>

Troubleshooting tips: never use local file paths like c:/... on a web page; prefer relative or hosted URLs. Always include meaningful alt. Avoid empty <a href=""> wrappers (they can trigger navigation). Test with dev tools for 404s and test on touch devices since hover is not universal.

Member Avatar for egaus
egaus 0 Newbie Poster

Is no closing <form> tag required here? What could you use to give a name to instead of a form to refer to in the document.whatever.IMG1.src line? I've tried using several things I give names to but they don't work. Hmm..

Take a break and go to:

Check out:

Member Avatar for wiko
wiko 0 Newbie Poster

ok

Member Avatar for almostbob
almostbob 866 Retired: passive income ROCKS

the code is unneccessarily complex

<img src='image1.jpg' onmouseover='src="image2.jpg";' onmouseout='src="image1.jpg";'>

the only javascript required is to load the second image in the background after the page is loaded and displayed, so there is no mouseover delay

 ...snip .. 

</body>
<script language="javascript" type="text/javascript">
//<![CDATA[
<!-- 
image2 = new Image();
image2.src = "image2.jpg";
//-->
//]]>
</script>
</html>
Edited by mike_2000_17 because: Fixed formatting
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Edit Preview