안녕하세요 오늘은 마우스 오버시 이미지를 미리보는 예제를 만들어보겠습니다.
코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>이미지 마우스 오버 미리보기</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="previewText">마우스를 올려 이미지 미리보기를 확인하세요.</div>
<div id="imagePreview" class="image-preview"></div>
<script>
console.log("스크립트가 로드되었습니다.");
document.addEventListener('DOMContentLoaded', function() {
var previewText = document.getElementById('previewText');
var imagePreview = document.getElementById('imagePreview');
previewText.addEventListener('mouseover', function() {
imagePreview.style.display = 'block';
imagePreview.style.backgroundImage = 'url("https://dcblog.b-cdn.net/wp-content/uploads/2021/02/Full-form-of-URL-1-1024x824.jpg")'; // 이미지 URL 변경
});
previewText.addEventListener('mouseout', function() {
imagePreview.style.display = 'none';
});
// 이미지 미리보기 위치 조정 (옵션)
previewText.addEventListener('mousemove', function(e) {
imagePreview.style.top = e.pageY + 10 + 'px'; // 마우스 위치에 따라 조정
imagePreview.style.left = e.pageX + 10 + 'px';
});
});
</script>
</body>
</html>
style.css
.image-preview {
display: none;
position: fixed;
top: 0; /* 초기 위치 설정 */
left: 0; /* 초기 위치 설정 */
width: 200px;
height: 200px;
border: 1px solid #000;
background-size: cover;
background-position: center;
}
결과입니다.
'JavaScript' 카테고리의 다른 글
| [Javascript] chart.js 를 사용하여 선 그래프 그리기 (0) | 2024.04.09 |
|---|---|
| [JavaScript] CoinGecko API 와 chart api를 사용하여 각 화폐의 현재 USD 가격 표 형태로 비교하기 (0) | 2024.04.06 |
| [JavaScript] 반응형 내비게이션 바 만들기 (0) | 2024.04.01 |
| [JavaScript] CoinGecko API 와 chart api를 사용하여 기간에 따른 암호화폐 가격 변동을 라인 차트로 표시하기 (0) | 2024.03.28 |
| [JavaScript] 탭 레이아웃 만들기 (0) | 2024.03.24 |
