Backend/Spring

[Spring Project] 클릭 이벤트 추가

saintclair 2024. 5. 31. 17:41

 

클릭 이벤트 

 

도서관련 웹페이지를 만드는 중에 a 이미지를 기본으로 설정해두고 커서를 올리면 b 이미지로 바뀌는 기능을 구현했다.

클릭하게 되면 상품의 페이지로 이동한다.

 

 

1. HTML 기능추가(.jsp 파일)

home.jsp 파일의 body 안에 입력해준다.

이미지 경로는 상대경로로 입력하면 되고 내 경우에는 설정이 끝났는데도 기능이 구현되지 않아서 코드를 뜯어보니 js 파일 경로가 잘못되어 있었다. 

내 경우는 resources/js/script.js 경로로 수정했더니 잘 작동되었다.

<body>
<div class="product-image">
  <a href="product-page.html"> <!-- 상품 페이지 링크 -->
    <img src="image1.jpg" alt="이미지" id="productImg">
  </a>
</div>
<script src="script.js"></script>
</body>

 

 

2. JavaScript 기능추가(.js 파일)

// JavaScript 파일 내에서 마우스 이벤트와 클릭 이벤트를 처리하여 이미지를 변경하고 페이지로 이동합니다.
const productImg = document.getElementById('productImg');

// 마우스를 올렸을 때의 처리
productImg.addEventListener('mouseenter', function() {
  // 마우스를 올렸을 때의 이미지 경로
  this.src = 'image1.jpg';
});

// 마우스를 내렸을 때의 처리
productImg.addEventListener('mouseleave', function() {
  // 마우스를 내렸을 때의 이미지 경로
  this.src = 'image2.jpg';
});

// 이미지를 클릭했을 때의 처리 (상품 페이지로 이동)
productImg.addEventListener('click', function() {
  window.location.href = 'product-page.html'; // 이동할 페이지의 URL
});