이미지맵 + 슬라이드 연동 (말이 맞나 모르겠네요)
본문
상단에는 이미지 맵을 만들고,
하단에는 슬라이드쇼로 이미지를 슬라이드 시킬건데요,
상단 이미지 맵의 어느 위치를 누르면,
슬라이드쇼 내 몇번 째 이미지로 이동하게끔... 하고 싶은데
구현 가능할까요?
설명으로만은 알기 어려울 것 같아, 예를들면
http://www.hieakasaka.net/753p/day.html
위 페이지처럼 위에 번호를 붙인 이미지 맵을 놓고,
아래 슬라이드 쇼가 있는데, 위 이미지의 번호를 클릭하면
슬라이드쇼안에 해당되는 이미지로 이동하는 식으로...
(저 링크에서는 페이지를 다 따로 만든 것 같지만요 ㅠ ㅠ)
한 페이지 안에서 제이쿼리나 자바스크립트로 구현할 수 있는지 궁금합니다.
아시는 분 계신가요?
답변 6
네 가능한 일들입니다.
저런 소스가 어디 있는 지는 모르겠지만..
그냥 만들어도 가능한 사항입니다.
앗 한발 늦었군요 ㅎㅎ
그냥 참고만 하세요
<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>
예를 들어 bxsilder 슬라이드를 쓴다면,
위의 url에 보시면
Public methods
example:
slider = $('.bxslider').bxSlider();
slider.goToSlide(3);
라고 쓰여져 있는 분이 있는데요.
이 뜻은 슬라이더의 4번째 이미지로 이동하란 뜻이에요.
그러면 이미지 맵에서 아래와 같이 href 태그에서 자바스크립트 custom_function을 호출하게 하고,
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="javascript:custom_function(3);" alt="Sun">
<area shape="circle" coords="90,58,3" href="javascript:custom_function(2);" alt="Mercury">
<area shape="circle" coords="124,58,8" href="javascript:custom_function(0);" alt="Venus">
</map>
custom_function을 아래와 같이 작성합니다.
funciton custom_function(index){
if( typeof slider.goToSlide === 'function' ){ // silder 객체의 goToSilder가 function이면
slider.goToSlide(index); // 해당 슬라이더로 이동
} else { //무엇인가 잘못됬으면
alert('에러');
}
}
이런식으로 작성하시면 됩니다.
배열을 활요하면 되는데요
위에 제가 쓴게 배열을 1차원으로 이용한거니까
2차 배열을 만들면 될거 같은데요
쉽게 아파트 동과 호로 나누듯 배열을 형태에 맞게 쌓기만 하면 됩니다
라고 말하면 말은 쉽지 ㅡㅡ;; 라고 하실듯 해서...
<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 mapIMG1=[];
mapIMG1.push("http://www.hieakasaka.net/753p/img/One%20day/photo/8-1.jpg");//그림1주소
mapIMG1.push("http://www.hieakasaka.net/753p/img/One%20day/photo/9-1.jpg");//그림2주소
mapIMG1.push("http://www.hieakasaka.net/753p/img/One%20day/photo/2-1.jpg");//그림3주소
mapIMG1.push("http://www.hieakasaka.net/753p/img/One%20day/photo/3-1.jpg");//그림4주소
mapIMG1.push("http://www.hieakasaka.net/753p/img/One%20day/photo/5.jpg");//그림5주소
mapIMG1.push("http://www.hieakasaka.net/753p/img/One%20day/photo/11.jpg");//그림6주소
mapIMG1.push("http://www.hieakasaka.net/753p/img/One%20day/photo/7-1.jpg");//그림7주소
mapIMG1.push("http://www.hieakasaka.net/753p/img/One%20day/photo/18-1.jpg");//그림8주소
var mapIMG2=[];
mapIMG2.push("http://www.hieakasaka.net/753p/img/One%20day/photo/7-1.jpg");//그림1주소
mapIMG2.push("http://www.hieakasaka.net/753p/img/One%20day/photo/18-1.jpg");//그림2주소
mapIMG2.push("http://www.hieakasaka.net/753p/img/One%20day/photo/2-1.jpg");//그림3주소
mapIMG2.push("http://www.hieakasaka.net/753p/img/One%20day/photo/3-1.jpg");//그림4주소
mapIMG2.push("http://www.hieakasaka.net/753p/img/One%20day/photo/5.jpg");//그림5주소
mapIMG2.push("http://www.hieakasaka.net/753p/img/One%20day/photo/8-1.jpg");//그림6주소
mapIMG2.push("http://www.hieakasaka.net/753p/img/One%20day/photo/9-1.jpg");//그림7주소
mapIMG2.push("http://www.hieakasaka.net/753p/img/One%20day/photo/11.jpg");//그림8주소
var mapIMG3=[];
mapIMG3.push("http://www.hieakasaka.net/753p/img/One%20day/photo/5.jpg");//그림1주소
mapIMG3.push("http://www.hieakasaka.net/753p/img/One%20day/photo/8-1.jpg");//그림2주소
mapIMG3.push("http://www.hieakasaka.net/753p/img/One%20day/photo/9-1.jpg");//그림3주소
mapIMG3.push("http://www.hieakasaka.net/753p/img/One%20day/photo/11.jpg");//그림4주소
mapIMG3.push("http://www.hieakasaka.net/753p/img/One%20day/photo/7-1.jpg");//그림5주소
mapIMG3.push("http://www.hieakasaka.net/753p/img/One%20day/photo/18-1.jpg");//그림6주소
mapIMG3.push("http://www.hieakasaka.net/753p/img/One%20day/photo/2-1.jpg");//그림7주소
mapIMG3.push("http://www.hieakasaka.net/753p/img/One%20day/photo/3-1.jpg");//그림8주소
var mapIMG4=[];
mapIMG4.push("http://www.hieakasaka.net/753p/img/One%20day/photo/7-1.jpg");//그림1주소
mapIMG4.push("http://www.hieakasaka.net/753p/img/One%20day/photo/18-1.jpg");//그림2주소
mapIMG4.push("http://www.hieakasaka.net/753p/img/One%20day/photo/2-1.jpg");//그림3주소
mapIMG4.push("http://www.hieakasaka.net/753p/img/One%20day/photo/5.jpg");//그림4주소
mapIMG4.push("http://www.hieakasaka.net/753p/img/One%20day/photo/8-1.jpg");//그림5주소
mapIMG4.push("http://www.hieakasaka.net/753p/img/One%20day/photo/9-1.jpg");//그림6주소
mapIMG4.push("http://www.hieakasaka.net/753p/img/One%20day/photo/11.jpg");//그림7주소
mapIMG4.push("http://www.hieakasaka.net/753p/img/One%20day/photo/3-1.jpg");//그림8주소
var mapIMG5=[];
mapIMG5.push("http://www.hieakasaka.net/753p/img/One%20day/photo/9-1.jpg");//그림1주소
mapIMG5.push("http://www.hieakasaka.net/753p/img/One%20day/photo/11.jpg");//그림2주소
mapIMG5.push("http://www.hieakasaka.net/753p/img/One%20day/photo/3-1.jpg");//그림3주소
var mainMAP=[];
mainMAP.push("");//빈배열
mainMAP.push(mapIMG1);//1번 그룹 배열을 매인 배열에 넣음
mainMAP.push(mapIMG2);//2번 그룹 배열을 매인 배열에 넣음
mainMAP.push(mapIMG3);//3번 그룹 배열을 매인 배열에 넣음
mainMAP.push(mapIMG4);//4번 그룹 배열을 매인 배열에 넣음
mainMAP.push(mapIMG5);//5번 그룹 배열을 매인 배열에 넣음
function imgMapGallery(objNUM){
var choiceAry =mainMAP[objNUM];//선택된 그룹의 배열
var aryLEN=choiceAry.length;//선택된 그룹에 담겨진 배열의 갯수
document.getElementById("img_gallery").innerHTML ="";
for(var i=0; i<aryLEN; i++){
//선택 그룹에 담긴 배열의 이미지들을 전부 img_gallery라는 아이디를 가진 div에 출력
if(choiceAry[i])
document.getElementById("img_gallery").innerHTML +="<img src=\""+choiceAry[i]+"\">";
}
}
</script>
저도 한수 배우고 갑니다. 왕계란님 감사합니다.