Menu
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.
534
Answer: Use the CSS background-image property You can simply use the CSS background-image property in combination with the :hover pseudo-class to replace or change the image on mouseover.
To change the default image, hover over the image and click the 'Edit' option. In this popup you can change your title and description that'll appear on hover. To upload your image, click the box beneath the 'Image' title and upload or select an image from your media library.
Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to change the size of an image. Step 2: Now, place the cursor inside the img tag. And then, we have to use the height and width attribute of the img tag for changing the size of an image.
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> 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> </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> </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); } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
