Change image on hover

Question

How can I change this exact code to do the hovering effect on mouseover?

I tried following some of the other questions and answers, but I could not really follow them.

So the HTML is:

<a href="RR.html"><img src="R3.jpg" width=700 height=300 /></a> <div> <a href="SSX.html"><img src="SSX.jpg" height=100 width=120 /></a> <a href="MPreview.html"><img src="MaxPayne3Cover.jpg" height=100 width=120 /></a> <a href="NC.html"><img src="NC.jpg" height=100 width=120 /></a> </br> </div>

Now what I want to do is change the big size image when the mouse hovers over the small images.

Tyler Quiring · Accepted Answer · 2019-04-10 13:38:02Z

Try this it`s so easy and the shortest one, just change the Image's URL:

<a href="TARGET URL GOES HERE"> <img src="URL OF FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF SECOND IMAGE GOES HERE';" onmouseout="this.src='URL OF FIRST IMAGE GOES HERE';"> </a>

Peter Mortensen · Accepted Answer · 2012-08-08 17:49:23Z

Try the following code. It's working

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title><br /> </head> <body> <p> <script type="text/javascript" language="javascript"> function changeImage(img){ document.getElementById('bigImage').src=img; } </script> <img src="../Pictures/lightcircle.png" alt="" width="284" height="156" id="bigImage" /> <p>&nbsp; </p> <div> <p> <img src="../Pictures/lightcircle2.png" height=79 width=78 onmouseover="changeImage('../Pictures/lightcircle2.png')"/> </p> <p><img src="../Pictures/lightcircle.png" alt="" width="120" height="100" onmouseover="changeImage('../Pictures/lightcircle.png')"/></p> <p><img src="../Pictures/lightcircle2.png" alt="" width="78" height="79" onmouseover="changeImage('../Pictures/lightcircle2.png')"/></p> <p>&nbsp;</p> </br> </div> </body> </html>

I modified the code, like it will work with some delay in it.. But still, it is not animating..

function changeImage(img){ // document.getElementById('bigImage').src=img; setTimeout(function() {document.getElementById('bigImage').src=img;},1250); }

Peter Mortensen · Accepted Answer · 2012-08-08 17:51:19Z

Or do like this:

<a href="SSX.html"> <img src="SSX.jpg" onmouseover="this.src='SSX2.jpg';" onmouseout="this.src='SSX.jpg';" height=100 width=120 /> </a>

I think this is the easiest way.

Nizam Kazi · Accepted Answer · 2015-09-23 06:34:06Z

No JavaScript needed if you are using this technique

<div class="effect"> <img class="image" src="image.jpg" /> <img class="image hover" src="image-hover.jpg" /> </div>

the you will need css to control it

.effect img.image{ /*type your css here which you want to use for both*/ } .effect:hover img.image{ display:none; } .effect img.hover{ display:none; } .effect:hover img.hover{ display:block; }

remember to give some class to div and mention it in your css name to avoid trouble :)

Now you can use Sprite CSS technique also, Search about it for more details

Bo Persson · Accepted Answer · 2012-11-23 11:08:27Z

The easiest way for Roll Over image or Mouse Over image for web pages menus

<a href="#" onmouseover="document.myimage1.src='images/ipt_home2.png';" onmouseout="document.myimage1.src='images/ipt_home1.png';"> <img src="images/ipt_home1.png" name="myimage1" /> </a>

Peter Mortensen · Accepted Answer · 2012-08-08 17:50:32Z

<script type="text/javascript"> function changeImage(img){ img.src=URL_TO_NEW_IMAGE; } </script> <a href="RR.html"><img id="bigImage" onmouseover="changeImage(document.getElementById('bigImage'));" src="R3.jpg" width=700 height=300/></a> <div> <a href="SSX.html" ><img src="SSX.jpg" height=100 width=120/></a> <a href="MPreview.html"><img src="MaxPayne3Cover.jpg" height=100 width=120/></a> <a href="NC.html" ><img src="NC.jpg" height=100 width=120/></a> </br> </div>

Nizam Kazi · Accepted Answer · 2013-11-20 10:35:50Z

If you don't want to do Javascript you can use CSS and :hover selector to get the same effect.

Here's how:

index.html:

<!DOCTYPE HTML> <html> <head> <link rel="stylesheet" type="text/css" href="stylesheet.css" /> <title>Image hover example</title> </head> <body> <div class="change_img"></div> </body> </html>

stylesheet.css

.change_img { background-image:url('img.png'); }/*Normal Image*/ .change_img:hover { background-image:url('img_hover.png'); }/*On MouseOver*/

Vikshay · Accepted Answer · 2014-06-19 02:46:58Z

Just Use this:

Example:

<img src="http://nineplanets.org/planets.jpg" onmouseover="this.src='http://nineplanets.org/planetorder.JPG';" onmouseout="this.src='http://nineplanets.org/planets.jpg';"> </img>

Works best with the Pictures being the same size.

Copy This

<img src="IMG-1" onmouseover="this.src='IMG-2';" onmouseout="this.src='IMG-1';"> </img>

Zhihao · Accepted Answer · 2013-10-06 08:25:14Z

Here is a simplified code sample:

.change_img { background-image: url(image1.jpg); } .change_img:hover { background-image: url(image2.jpg); }

Collectives™ on Stack Overflow

Change image on hover

9 Answers 9

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Linked

Related