클릭 이벤트
도서관련 웹페이지를 만드는 중에 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
});'Backend > Spring' 카테고리의 다른 글
| [Spring] MessageConverter 정의 및 종류 ( + GET, POST의 경우) (0) | 2024.06.03 |
|---|---|
| [Spring] @RequestMapping 이란? (0) | 2024.06.03 |
| [Spring Project] button 간격 조절 (0) | 2024.05.31 |
| [Spring] BootStrap 오픈소스 다운 받아 적용하기 (0) | 2024.05.31 |
| Spring MVC Project 수동 생성 (1) | 2024.05.30 |