<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 기존 스타일 유지 */
#boardcnt{
width: 100%;
overflow: hidden;
margin: 0 auto;
}
.cnt_wrap {
width: 100%;
margin: 0 auto;
}
.cnt_wrap img {
width: 100%;
vertical-align: middle;
}
/* 동영상 섹션 */
.video_wrap {
position: relative;
}
.video_wrap .mov_iframe {
overflow: hidden;
height: 0;
padding-bottom: 56.25%;
width: 100%;
z-index: 2;
background-color: black;
}
.video_wrap .mov_iframe iframe {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="cnt_wrap">
<!-- 랜딩이미지 -->
<div>
<img src="https://cdn.byn.kr/real/_data/promotion/2025/MT/10/251029_influencer/mo/mo_sec01.jpg">
</div>
<!-- style 01 -->
<img src="https://cdn.byn.kr/real/_data/promotion/2025/MT/10/251029_influencer/mo/mo_sec02.jpg" usemap="#image-map1">
<map name="image-map1">
<area target="_self" alt="style01" title="style01" href="https://m.byn.kr/mountia/shop/detail.php?pno=C87E98FD2AD9C4BE99363084E7FCBE47" coords="530,3500,690,3575" shape="rect">
<area target="_self" alt="style01" title="style01" href="https://m.byn.kr/mountia/shop/detail.php?pno=3761C0F57062B5922495D57F1D638A34" coords="530,3625,690,3700" shape="rect">
</map>
<!-- style 02 -->
<img src="https://cdn.byn.kr/real/_data/promotion/2025/MT/10/251029_influencer/mo/mo_sec03.jpg" usemap="#image-map2">
<map name="image-map2">
<area target="_self" alt="style02" title="style02" href="https://m.byn.kr/mountia/shop/detail.php?pno=4D8EDDA7DF8A40BF329DD502999635BF" coords="530,3370,690,3450" shape="rect">
<area target="_self" alt="style02" title="style02" href="https://m.byn.kr/mountia/shop/detail.php?pno=67C328DEDE20D44AB62981AE9F22EAD1" coords="530,3500,690,3570" shape="rect">
</map>
<!-- style 03 -->
<img src="https://cdn.byn.kr/real/_data/promotion/2025/MT/10/251029_influencer/mo/mo_sec04.jpg" usemap="#image-map3">
<map name="image-map3">
<area target="_self" alt="style03" title="style03" href="https://m.byn.kr/mountia/shop/detail.php?pno=5B8148F422E7E5A8135945D56ECDB2D6" coords="530,3370,690,3450" shape="rect">
</map>
<!-- style 04 -->
<img src="https://cdn.byn.kr/real/_data/promotion/2025/MT/10/251029_influencer/mo/mo_sec05.jpg" usemap="#image-map4">
<map name="image-map4">
<area target="_self" alt="style04" title="style04" href="https://m.byn.kr/mountia/shop/detail.php?pno=52414D7A9F40A7F40C37CF923B8DCCB5" coords="530,3500,690,3575" shape="rect">
</map>
</div>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>
<!-- Image Maps -->
<script src="https://www.byn.kr/_skin/sw_kor_bcc/jquery.rwdImageMaps.min.js"></script>
<script>
$(document).ready(function() {
// 기존 스크립트 유지
$('img[usemap]').rwdImageMaps();
const swiperOptions = {
direction: 'horizontal',
loop: true,
autoplay: {
delay: 1500,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
}
};
new Swiper('.slider-1', swiperOptions);
new Swiper('.slider-2', swiperOptions);
new Swiper('.slider-3', swiperOptions);
// 수정된 핫스팟 기능 구현
$('.hotspot').each(function() {
// 터치 영역 생성
const touchArea = $('<div class="hotspot-touch-area"></div>');
$(this).append(touchArea);
// 수정된 텍스트 박스 생성 구조
const textBox = $(`
<div class="text-box">
<div class="product-image-frame">
<img src="${$(this).data('image')}" alt="Product">
</div>
<div class="text-container">
<span class="text-line">${$(this).data('text-line1')}</span>
<span class="text-line">${$(this).data('text-line2')}</span>
</div>
</div>
`);
$(this).after(textBox);
// 위치 기반 정렬 설정
const hotspotLeft = parseFloat($(this).css('left'));
const containerWidth = $(this).parent().width();
const isLeftAligned = hotspotLeft < containerWidth / 2;
const gap = parseInt(textBox.css('--hotspot-gap')) || 13;
textBox.addClass(isLeftAligned ? 'left' : 'right');
textBox.css('top', parseFloat($(this).css('top')) + $(this).height() + gap + 'px');
textBox.css('left', $(this).css('left'));
// 클릭 이벤트
$(this).on('click', function(e) {
e.stopPropagation();
$('.text-box').removeClass('active'); // 모든 텍스트 박스 닫기
textBox.toggleClass('active'); // 클릭된 텍스트 박스 토글
});
// 텍스트 박스 클릭 시 링크 이동
textBox.on('click', function() {
window.location.href = $(this).prev('.hotspot').data('link');
});
});
// 다른 영역 클릭 시 텍스트 박스 닫기
$(document).on('click', function(e) {
if (!$(e.target).closest('.hotspot, .text-box').length) {
$('.text-box').removeClass('active');
}
});
});
</script>
</body>
</html>
<!-- 영상삽입
<div class="video_wrap">
<div class="mov_iframe">
<iframe src="https://player.vimeo.com/video/1007955322?h=50f57857fe" frameborder="0" allow="autoplay;">
</iframe>
</div>
</div>
-->
