웹프로그래밍

Global It Leader!!


jQuery


 
 

이미지맵을 이용한 슬라이드

페이지 정보

작성자 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 1건 조회 1,310회 작성일 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>

댓글목록

오원장님의 댓글

no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 작성일

동일한 기능인데....자바스크립트 최소화 버전이군요.
<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>

전체 117
게시물 검색
jQuery 목록
번호 제목 글쓴이 조회 날짜
117 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 57 11-06
116 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 64 11-03
115 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 76 10-28
114 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 140 10-06
113 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 198 09-11
112 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 455 01-20
111 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 453 08-18
110 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 450 01-30
109 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 576 09-23
108 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 657 02-04
107 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 682 02-04
106 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 831 09-05
105 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 872 02-23
104 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 894 12-27
103 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 927 12-21
102 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1144 07-11
101 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1041 06-24
열람중 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1311 12-22
99 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1294 08-13
98 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1297 08-04