이미지맵 + 슬라이드 연동 (말이 맞나 모르겠네요)
본문
상단에는 이미지 맵을 만들고,
하단에는 슬라이드쇼로 이미지를 슬라이드 시킬건데요,
상단 이미지 맵의 어느 위치를 누르면,
슬라이드쇼 내 몇번 째 이미지로 이동하게끔... 하고 싶은데
구현 가능할까요?
설명으로만은 알기 어려울 것 같아, 예를들면
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('에러');
}
}
이런식으로 작성하시면 됩니다.
헉, 나의 영웅 건님 ㅎ 나타나주셨어! -_ ㅠ
bxslider쓰고 있었는데 잘 되었네용 ^^ 그런게 있는지도 몰랐네요 ㅠ ㅠ ... 영어를 배워야 할런지 원...
감사합니다!! 함 해볼게요!
헐...custom_function코드를 그대로 가져다 스크립트에 붙였는데
에러메세지가 뜨네요 ㅠ ㅠ...
제가 뭘 잘못한 건질 모르니 답답하기만 ~
일단 이 부분은 보류 해야겠네요 ㅠ ㅠ 제 능력밖이네요-ㅅ -...
철자가 틀렸네요 ㅠ
function custom_function(index){
거...건님... ㅠ ㅠ 가..감사해요 ㅠ ㅠ
제가 바보네요 그런 것두 모르고 허허허
배열을 활요하면 되는데요
위에 제가 쓴게 배열을 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>
오메, 스크립트가 엄청 길어지는군요...
친절하고 자세한 답변에 감사드립니다 ^^
공부해 볼게용~~
저도 한수 배우고 갑니다. 왕계란님 감사합니다.
