CODEWITHSUNDEEP
htmlcssnext.js
Ravios Savior
Ravios Savior

Reputation: 21

change image after click in css html

how to change the image into another image I have a green image when clicked it will switch pages and the green image will become a white image Before Click before click

After Click after Click

My code

<ActiveLink activeClassName="bg" href="/about">
                        <li className="nav-item box-icon">
                          <a className="nav-link">
                            <img src="/assets/img/green.png" className="icon-size" />
                          </a>
                          <span>Graduate </span>
                        </li>
                      </ActiveLink>

my css

.box-icon {width: 200px;
             height: 150px;
             background-color: aqua;
             text-align: center;
             padding-top: 10px;
             font-family: "Poppins";
             font-size: 20px;
           }
       .icon-size {
         widows: 53px;
         height: 60px;
         margin-top: 25px;
       }
       .bg {
         content: url("../public/assets/img/white/white.png");
         background-color: #0fa49e;
         widows: 53px;
         height: 150px;
         color: #fff;
         font-family: "Poppins";
         font-size: 20px;
       }

Upvotes: 1

Views: 1649

Answers (2)

Md. Shafiqul Islam
Md. Shafiqul Islam

Reputation: 394

You can use javascript to solve this problem

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can change HTML attribute values.</p>

<p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>

<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>

<img id="myImage" src="pic_bulboff.gif" style="width:100px">

<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>

</body>
</html>

Upvotes: 0

CodingWithRoyal
CodingWithRoyal

Reputation: 1123

Its super easy make a new class bg-active

css code for bg-active

.bg-active {
   content: url("afterclick.png") !important;
}

onClick element addClass bg-active

Upvotes: 1

Related Questions