이미지맵을 이용한 슬라이드
페이지 정보
작성자
오원장쪽지보내기
메일보내기
자기소개
아이디로 검색
전체게시물
댓글 1건
조회 3,692회
작성일 15-12-22 15:52
본문
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript" src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<script type="text/javascript">
$(function() {
var Slider = $(".slider").bxSlider({
pager : false,
controls : false
});
$("area").on("click", function(e) {
e.preventDefault();
var idx = $(this).index();
Slider.goToSlide(idx);
});
});
</script>
<img src="http://www.hieakasaka.net/753p/img/One%20day/map.jpg" usemap="#img_map" />
<map name="img_map" id="img_map">
<area shape="circle" coords="158, 77, 8" href="2-1" />
<area shape="circle" coords="174, 282, 8" href="3-1" />
<area shape="circle" coords="213, 217, 8" href="5" />
<area shape="circle" coords="119, 52, 9" href="8-1" />
<area shape="circle" coords="267, 162, 12" href="9-1" />
<area shape="circle" coords="432, 102, 12" href="11-1" />
<area shape="circle" coords="212, 273, 8" href="16-1" />
<area shape="circle" coords="77, 124, 9" href="18-1" />
</map>
<ul class="slider">
<li><img src="http://www.hieakasaka.net/753p/img/One%20day/photo/2-1.jpg" /></li>
<li><img src="http://www.hieakasaka.net/753p/img/One%20day/photo/3-1.jpg" /></li>
<li><img src="http://www.hieakasaka.net/753p/img/One%20day/photo/5.jpg" /></li>
<li><img src="http://www.hieakasaka.net/753p/img/One%20day/photo/8-1.jpg" /></li>
<li><img src="http://www.hieakasaka.net/753p/img/One%20day/photo/9-1.jpg" /></li>
<li><img src="http://www.hieakasaka.net/753p/img/One%20day/photo/11-1.jpg" /></li>
<li><img src="http://www.hieakasaka.net/753p/img/One%20day/photo/16-1.jpg" /></li>
<li><img src="http://www.hieakasaka.net/753p/img/One%20day/photo/18-1.jpg" /></li>
</ul>
관련링크
댓글목록
오원장님의 댓글
오원장쪽지보내기
메일보내기
자기소개
아이디로 검색
전체게시물 작성일
동일한 기능인데....자바스크립트 최소화 버전이군요.
<div class="map-1">
<img src="http://www.hieakasaka.net/753p/img/One%20day/map.jpg" width="500" height="332" border="0" usemap="#Map">
<map name="Map" id="Map">
<area shape="circle" coords="158,77,8" href="#" onclick="imgMapGallery('1');return false;">
<area shape="circle" coords="174,282,8" href="#" onclick="imgMapGallery('2');return false;">
<area shape="circle" coords="213,217,8" href="#" onclick="imgMapGallery('3');return false;">
<area shape="circle" coords="119,52,9" href="#" onclick="imgMapGallery('4');return false;">
<area shape="circle" coords="267,162,12" href="#" onclick="imgMapGallery('5');return false;">
<area shape="circle" coords="432,102,12" href="#" onclick="imgMapGallery('6');return false;">
<area shape="circle" coords="212,273,8" href="#" onclick="imgMapGallery('7');return false;">
<area shape="circle" coords="77,124,9" href="#" onclick="imgMapGallery('8');return false;">
<area shape="rect" coords="128,145,149,163" href="#" onclick="imgMapGallery('9');return false;">
</map>
</div>
<div id="img_gallery">
<img id="changeIMG" src="http://www.hieakasaka.net/753p/img/One%20day/photo/1.jpg">
</div>
<script>
var mapIMG=[];
mapIMG.push("");//빈배열
mapIMG.push("http://www.hieakasaka.net/753p/img/One%20day/photo/2-1.jpg");//그림1주소
mapIMG.push("http://www.hieakasaka.net/753p/img/One%20day/photo/3-1.jpg");//그림2주소
mapIMG.push("http://www.hieakasaka.net/753p/img/One%20day/photo/5.jpg");//그림3주소
mapIMG.push("http://www.hieakasaka.net/753p/img/One%20day/photo/8-1.jpg");//그림4주소
mapIMG.push("http://www.hieakasaka.net/753p/img/One%20day/photo/9-1.jpg");//그림5주소
mapIMG.push("http://www.hieakasaka.net/753p/img/One%20day/photo/11.jpg");//그림6주소
mapIMG.push("http://www.hieakasaka.net/753p/img/One%20day/photo/7-1.jpg");//그림7주소
mapIMG.push("http://www.hieakasaka.net/753p/img/One%20day/photo/18-1.jpg");//그림8주소
function imgMapGallery(objNUM){
document.getElementById("changeIMG").src=mapIMG[objNUM];
}
</script>