묻고답하기
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
마우스 오버시 큰 그림으로 바뀌는 소스...
2007.02.02 18:30
쇼핑몰 같은데 보면 아래 작은 이미지들이 있고
그 이미지에 마우스를 갖다대면 위에 큰 이미지가 나오잖아요.
그걸하고 싶어서 소스 갖다가 보는데 자바스크립트의 구조를 모르니
도통 이해하기가 어렵네요.
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
<table border="0" cellspacing="0" cellpadding="0" height=77>
<tr>
<td align="center" style="background-position: 0px -20px;" background="/UPLOAD/LG-SV42001.jpg" width="59"><img onmouseover="MM_swapImage('boxsu1','','/images/pro_bboxss.gif',1);style.cursor='hand';roll('picture'+ '+ ','/UPLOAD/LG-SV42001.jpg');" onmouseout="MM_swapImgRestore();style.cursor=''" onerror="this.style.display='none'" src="/images/pro_bboxs.gif" width="62" height="77" border="0" name="boxsu1"></td>
<td width="2"></td><td align="center" style="background-position: 100px 100px;" background="/UPLOAD/LG-SV42002.jpg" width="59"><img onmouseover="MM_swapImage('boxsu2','','/images/pro_bboxss.gif',1);style.cursor='hand';roll('picture','/UPLOAD/LG-SV42002.jpg');" onmouseout="MM_swapImgRestore();style.cursor=''" onerror="this.style.display='none'" src="/images/pro_bboxs.gif" width="62" height="77" border="0" name="boxsu2"></td>
<td width="2"></td><td align="center" style="background-position: 100px 200px;" background="/UPLOAD/LG-SV42003.jpg" width="59"><img onmouseover="MM_swapImage('boxsu3','','/images/pro_bboxss.gif',1);style.cursor='hand';roll('picture','/UPLOAD/LG-SV42003.jpg');" onmouseout="MM_swapImgRestore();style.cursor=''" onerror="this.style.display='none'" src="/images/pro_bboxs.gif" width="62" height="77" border="0" name="boxsu3"></td>
<td width="4"></td><td align="center" style="background-position: 100px 0px;" background="/UPLOAD/LG-SV42004.jpg" width="59"><img onmouseover="MM_swapImage('boxsu4','','/images/pro_bboxss.gif',1);style.cursor='hand';roll('picture','/UPLOAD/LG-SV42004.jpg'+ ');" onmouseout="MM_swapImgRestore();style.cursor=''" onerror="this.style.display='none'" src="/images/pro_bboxs.gif" width="62" height="77" border="0" name="boxsu4"></td>
</tr>
</table>
자바스크립트 부분과 테이블에서 쓰인 부분을 따왔는데...
이거 설명 좀 해주실수 있나요?
그리고 네이버에 네모라는게 있습니다.
그거 보면 이미지 양옆으로 화살표가 있고
그 화살표를 누르면 이미지가 바뀌는데
네이버의 네모는 플래쉬를 이용했는데
그걸 자바스크립트로 비슷한 효과는 못하나요?
그 이미지에 마우스를 갖다대면 위에 큰 이미지가 나오잖아요.
그걸하고 싶어서 소스 갖다가 보는데 자바스크립트의 구조를 모르니
도통 이해하기가 어렵네요.
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
<table border="0" cellspacing="0" cellpadding="0" height=77>
<tr>
<td align="center" style="background-position: 0px -20px;" background="/UPLOAD/LG-SV42001.jpg" width="59"><img onmouseover="MM_swapImage('boxsu1','','/images/pro_bboxss.gif',1);style.cursor='hand';roll('picture'+ '+ ','/UPLOAD/LG-SV42001.jpg');" onmouseout="MM_swapImgRestore();style.cursor=''" onerror="this.style.display='none'" src="/images/pro_bboxs.gif" width="62" height="77" border="0" name="boxsu1"></td>
<td width="2"></td><td align="center" style="background-position: 100px 100px;" background="/UPLOAD/LG-SV42002.jpg" width="59"><img onmouseover="MM_swapImage('boxsu2','','/images/pro_bboxss.gif',1);style.cursor='hand';roll('picture','/UPLOAD/LG-SV42002.jpg');" onmouseout="MM_swapImgRestore();style.cursor=''" onerror="this.style.display='none'" src="/images/pro_bboxs.gif" width="62" height="77" border="0" name="boxsu2"></td>
<td width="2"></td><td align="center" style="background-position: 100px 200px;" background="/UPLOAD/LG-SV42003.jpg" width="59"><img onmouseover="MM_swapImage('boxsu3','','/images/pro_bboxss.gif',1);style.cursor='hand';roll('picture','/UPLOAD/LG-SV42003.jpg');" onmouseout="MM_swapImgRestore();style.cursor=''" onerror="this.style.display='none'" src="/images/pro_bboxs.gif" width="62" height="77" border="0" name="boxsu3"></td>
<td width="4"></td><td align="center" style="background-position: 100px 0px;" background="/UPLOAD/LG-SV42004.jpg" width="59"><img onmouseover="MM_swapImage('boxsu4','','/images/pro_bboxss.gif',1);style.cursor='hand';roll('picture','/UPLOAD/LG-SV42004.jpg'+ ');" onmouseout="MM_swapImgRestore();style.cursor=''" onerror="this.style.display='none'" src="/images/pro_bboxs.gif" width="62" height="77" border="0" name="boxsu4"></td>
</tr>
</table>
자바스크립트 부분과 테이블에서 쓰인 부분을 따왔는데...
이거 설명 좀 해주실수 있나요?
그리고 네이버에 네모라는게 있습니다.
그거 보면 이미지 양옆으로 화살표가 있고
그 화살표를 누르면 이미지가 바뀌는데
네이버의 네모는 플래쉬를 이용했는데
그걸 자바스크립트로 비슷한 효과는 못하나요?
댓글 0
글쓴이 | 제목 | 최종 글 |
---|---|---|
XE | 공지 글 쓰기,삭제 운영방식 변경 공지 [16] | 2019.03.05 by 남기남 |
오리남 | 회원가입 페이지가 열리지 않아요 | |
별님왕자 | 1.5.4.2에서 1.7.3.3로 업데이트 후에 이런 메시지가 떠요 [1] | 2013.08.01 by 별님왕자 |
가입명 | 로그인 창에서 [1] | 2013.08.01 by sejin7940 |
야마돌끼 | 회원가입시 가입축하이메일을 보내려 합니다. [1] | 2013.08.01 by sejin7940 |
wnpdl | 비회원 게시판 글쓰기 비밀번호 길이 제한이 없나요? [1] | 2013.08.01 by sejin7940 |
맑은산 | 탭형 페이지 구성 [1] | 2013.08.01 by YEARNING |
부렉 | 글쓸때마다 주소와 제목을 다른곳에 저장하고싶습니다. [2] | 2013.08.01 by pentopen |
오락실주인 | robots.txt 차단 설정 봐주세요 ~ [1] | 2013.08.01 by pentopen |
진주빛쎄미 | 기본 레이아웃 비주얼 이미지 자동 슬라이더 기능 문의 | |
난남자입니다하하 | 대구 XE 나 바이럴 포토샵 전문가분 알바해보실분 계신가요? | |
짱강한 | 쪽지보낼때 이미지 첨부방법 | |
llppll | 404 에러 페이지 어디서 수정하나요?!! [1] | 2013.08.01 by 참치.k |
EvangelineA.K.Macdowell | 언어설정이 한국어인데도 영어로 뜹니다.. [1] | 2013.08.01 by 참치.k |
부렉 | xe에서 php문은 쓸수없나요? [1] | 2013.08.01 by 투씨 |
ghkdrma | 회원정보 새창질문입니다. | |
이정희729 | 게시판 제목 | |
KTK | mysql 쿼리문 질문입니다. 제발 도움좀 주세요.. [1] | 2013.08.01 by 투씨 |
최윤한 | 사용자 정의 항목 추가 값을 board list 에서 불러올려고 하면 어떻게 하나요? [1] | 2013.08.01 by sejin7940 |
가입명 | 비공개 사이트 제작 [1] | 2013.08.01 by ㄱㄴㄷㄹ |
쿡래빗 | 위젯코드 생성시 위젯스타일 못입히나요? [2] | 2013.08.01 by 큰성565 |