CODEWITHSUNDEEP
javascriptjqueryhtmlcss
cifer
cifer

Reputation: 21

How to change image when I hover then return to original image only when I hover again

I have two images, what I want to happen is that when I hover on the image, the image will change to the second image, and then when I hover on the image again, the image will change to the first image.

How do I do that using JavaScript?

Upvotes: 0

Views: 3057

Answers (4)

Hữu Phong
Hữu Phong

Reputation: 1603

For anyone who do not want to use Javascript, just HTML, CSS.

You just need create second image with position: absolute; and put it with original image into a div (with position: relative;)

After that, you can use CSS to control opacity of second image when you hover it.

Below is my sample code using TailwindCSS

<div className="relative">
 <img 
    src="/image1.png" 
    className="w-[100px] h-[100px]"/>
 <img 
    src="/image1.png" 
    className="w-[100px] h-[100px] absolute opacity-[0] hover:opacity-[1]"/>
</div>

Upvotes: 0

Myco Claro
Myco Claro

Reputation: 483

You can do this! 

<a href="#" id="name">
    <img title="Hello" src="images/view2.jpg>
</a>


  $('#name img').hover(function() {
   $(this).attr('src', 'images/view1.jpg');
   }, function() {
  $(this).attr('src', 'images/view2.jpg');
});

Upvotes: 0

Ciryl Albarez
Ciryl Albarez

Reputation: 41

This is a Javascript solution. I highly suggest you look into Jquery once you understand the below. In your case you don't seems to need the onmouseout.

HTML

<img src="urImg.png" onmouseover="chgImg(this)" onmouseout="normalImg(this)">

Javascript

function chgImg(x) {
x.src = "newImg.png";
}

function normalImg(x) {
x.src = "urImg.png";
}

Upvotes: 2

CodingKiwi
CodingKiwi

Reputation: 776

HTML

<div class="image_container">
 <img src="foo.png" class="first"/>
 <img src="bar.png" class="last"/>
</div>

jQuery

$(".image_container").hover(function(){
  $(this).toggleClass("switch");
});

CSS

.image_container .last{display:none;}
.image_container.switch .last{display:block;}
.image_container.switch .first{display:none;}

Upvotes: 0

Related Questions