Change image on hover

html css hover
Johnny Hankgard picture Johnny Hankgard · Feb 22, 2012 · Viewed 151.4k times · Source

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.

Answer

zak picture zak · Sep 15, 2012

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>

Related questions

Changing image on hover with CSS/HTML

I have this problem where I have set an image to display another image when the mouse hovers over, however the first image still appears and the new one doesn't change height and width and overlaps the other one. I'm …

Read More
How to affect other elements when one element is hovered

What I want to do is when a certain div is hovered, it'd affect the properties of another div. For example, in this JSFiddle demo, when you hover over #cube it changes the background-color but what I want is that …

Read More
How to show text on image when hovering?

I'm trying to show a description when hovering over an image. I've already done it in a less than desirable way, using image sprites and hovers here: I want it to look exactly like how I have it, but using …

Read More