목록으로

이미지맵 + 슬라이드 연동 (말이 맞나 모르겠네요) 채택완료

nanati 9년 전 조회 9,368

답변 6

상단에는 이미지 맵을 만들고,

하단에는 슬라이드쇼로 이미지를 슬라이드 시킬건데요,

상단 이미지 맵의 어느 위치를 누르면,

슬라이드쇼 내 몇번 째 이미지로 이동하게끔... 하고 싶은데

구현 가능할까요?

설명으로만은 알기 어려울 것 같아, 예를들면

http://www.hieakasaka.net/753p/day.html" target="_self">http://www.hieakasaka.net/753p/day.html

위 페이지처럼 위에 번호를 붙인 이미지 맵을 놓고,

아래 슬라이드 쇼가 있는데, 위 이미지의 번호를 클릭하면

슬라이드쇼안에 해당되는 이미지로 이동하는 식으로...

(저 링크에서는 페이지를 다 따로 만든 것 같지만요 ㅠ ㅠ)

한 페이지 안에서 제이쿼리나 자바스크립트로 구현할 수 있는지 궁금합니다.

아시는 분 계신가요?

#javascript #jquery #자바스크립트 #제이쿼리

댓글을 작성하려면 로그인이 필요합니다.

답변 6개

정렬:

채택된 답변

+20 포인트

devdev

9년 전

네 가능한 일들입니다.

저런 소스가 어디 있는 지는 모르겠지만..

그냥 만들어도 가능한 사항입니다.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

nanati

9년 전

감사합니다 ㅎㅎ 제가 자바스크립트를 몰라서요~
슬라이드쇼도 남이 만든거 가져다 쓰는 형편이라..
아무튼 가능하군요! 감사합니다^^

댓글을 작성하려면 로그인이 필요합니다.

예뜨락

9년 전

배열을 활요하면 되는데요

위에 제가 쓴게 배열을 1차원으로 이용한거니까

2차 배열을 만들면 될거 같은데요

쉽게 아파트 동과 호로 나누듯 배열을 형태에 맞게 쌓기만 하면 됩니다

라고 말하면 말은 쉽지 ㅡㅡ;; 라고 하실듯 해서...

<img src="http://www.hieakasaka.net/753p/img/One%20day/map.jpg">http://www.hieakasaka.net/753p/img/One%20day/map.jpg" width="500" height="332" border="0" usemap="#Map">

</map>

</div>

<img id="changeIMG" src="http://www.hieakasaka.net/753p/img/One%20day/photo/1.jpg">http://www.hieakasaka.net/753p/img/One%20day/photo/1.jpg">

</div>

var mapIMG1=[];

mapIMG1.push("http://www.hieakasaka.net/753p/img/One%20day/photo/8-1.jpg">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">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">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">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">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">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">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">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">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">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">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">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">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">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">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">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">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">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">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">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">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">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">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">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">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">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">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">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">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">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">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">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">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">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">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>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

nanati

9년 전

오메, 스크립트가 엄청 길어지는군요...
친절하고 자세한 답변에 감사드립니다 ^^
공부해 볼게용~~

댓글을 작성하려면 로그인이 필요합니다.

thisgun

9년 전

예를 들어 bxsilder 슬라이드를 쓴다면,

http://bxslider.com/options">http://bxslider.com/options

위의 url에 보시면

Public methods

goToSlide

Performs a slide transition to the supplied slide index (zero-based)

example:
slider = $('.bxslider').bxSlider();
slider.goToSlide(3);

라고 쓰여져 있는 분이 있는데요.

이 뜻은 슬라이더의 4번째 이미지로 이동하란 뜻이에요.

그러면 이미지 맵에서 아래와 같이 href 태그에서 자바스크립트 custom_function을 호출하게 하고,

custom_function을 아래와 같이 작성합니다.

</span></p><p><span style="font-size: 14.6667px;">funciton custom_function(index){</span></p><p><span style="font-size: 14.6667px; line-height: 1.5;">if( typeof slider.goToSlide === 'function'</span><span style="font-size: 14.6667px; line-height: 1.5;"> ){ // silder 객체의 goToSilder가 function이면</span></p><p><span style="font-size: 14.6667px;">slider.goToSlide(index);  // 해당 슬라이더로 이동</span><span style="font-size: 14.6667px; line-height: 1.5;"> </span></p><p><span style="font-size: 14.6667px; line-height: 22px;">} else { //무엇인가 잘못됬으면</span></p><p><span style="font-size: 14.6667px; line-height: 22px;">alert('에러');</span></p><p><span style="font-size: 14.6667px; line-height: 22px;">}</span></p><p><span style="font-size: 14.6667px;">}</span></p><p><span style="font-size: 14.6667px; line-height: 22px;">

이런식으로 작성하시면 됩니다.

로그인 후 평가할 수 있습니다