>source

이미지를 다른 이미지로 변경하는 방법 녹색 이미지를 클릭하면 페이지가 전환되고 녹색 이미지가 흰색 이미지가됩니다. 클릭하기 전에

클릭 후

내 코드

<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>

내 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;
       }

  • 답변 # 1

    아주 쉽게 새로운 수업을 만들 수 있습니다. bg-active

    bg-active에 대한 CSS 코드

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

    onClick 요소addClass bg-active

  • 답변 # 2

    자바 스크립트를 사용하여이 문제를 해결할 수 있습니다.

    <!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>
    
    

관련 자료

  • 이전 javascript - Python을 통해 웹 페이지 내에서 CSV 다운로드
  • 다음 angular - Ionic 5의 반응성 양식 날짜 선택기