|
상품페이지가 너무 길어지다 보니 메인 상세설명에는 간략한 이미지만 배열하고,
상세이미지는 클릭을 통해 자세히 보여주는 방식으로, 주로 의류 판매자들께서 이용하시면 유용한 방법입니다.
크게 두 가지 방법이 있습니다.
1. 전체 이미지의 특정 부분에 맵을 잡아서 링크하는 경우
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>무제 문서</title>
<script language=javascript>
function popup_img(url, width, height)
{
var opt = 'scrollbars=yes,width='+width+',height='+height+',top=0,left=0';
var win = window.open("","popup_img", opt );
win.document.write("<body topmargin='0' leftmargin='0'>");
win.document.write("<img Onclick='javascript:window.close();' style='margin-top:0;' src="+url+" width='"+width+"' height='"+height+"'>");
win.document.write("</body>");
}
</script>
</head>
<body>
<img src="http://링크파일ID.linkfile.co.kr/test.jpg" width="숫자" height="숫자" border="0" usemap="#Map">
<map name="Map" id="Map"><area shape="rect" coords="선택좌표(숫자)" href="javascript:popup_img
('팝업으로 뜰 이미지경로.jpg','폭(숫자)','높이(숫자)');">
<area shape="rect" coords="선택좌표(숫자)" href="javascript:popup_img
('팝업으로 뜰 이미지경로.jpg','폭(숫자)','높이(숫자)');">
<area shape="rect" coords="선택좌표(숫자)" href="javascript:popup_img
('팝업으로 뜰 이미지경로.jpg','폭(숫자)','높이(숫자)');">
<area shape="rect" coords="선택좌표(숫자)" href="javascript:popup_img
('팝업으로 뜰 이미지경로.jpg','폭(숫자)','높이(숫자)');">
<area shape="rect" coords="선택좌표(숫자)" href="javascript:popup_img
('팝업으로 뜰 이미지경로.jpg','폭(숫자)','높이(숫자)');">
<area shape="rect" coords="선택좌표(숫자)" href="javascript:popup_img
('팝업으로 뜰 이미지경로.jpg','폭(숫자)','높이(숫자)');">
</map>
</body>
</html>
2. 개별 이미지에 링크를 걸 경우
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>무제 문서</title>
<script language=javascript>
function popup_img(url, width, height)
{
var opt = 'scrollbars=yes,width='+width+',height='+height+',top=0,left=0';
var win = window.open("","popup_img", opt );
win.document.write("<body topmargin='0' leftmargin='0'>");
win.document.write("<img Onclick='javascript:window.close();' style='margin-top:0;' src="+url+" width='"+width+"' height='"+height+"'>");
win.document.write("</body>");
}
</script>
</head>
<body>
<a href="javascript:popup_img('팝업으로 뜰 이미지경로.jpg','숫자','숫자');">
<img src="http://링크파일id.linkfile.co.kr/test.JPG" border="0"><br>
<a href="javascript:popup_img('팝업으로 뜰 이미지경로.jpg','숫자','숫자');">
<img src="http://링크파일id.linkfile.co.kr/test.JPG" border="0"><br>
<a href="javascript:popup_img('팝업으로 뜰 이미지경로.jpg','숫자','숫자');">
<img src="http://링크파일id.linkfile.co.kr/test.JPG" border="0"><br>
<a href="javascript:popup_img('팝업으로 뜰 이미지경로.jpg','숫자','숫자');">
<img src="http://링크파일id.linkfile.co.kr/test.JPG" border="0"><br>
<a href="javascript:popup_img('팝업으로 뜰 이미지경로.jpg','숫자','숫자');">
<img src="http://링크파일id.linkfile.co.kr/test.JPG" border="0"><br>
<a href="javascript:popup_img('팝업으로 뜰 이미지경로.jpg','숫자','숫자');">
<img src="http://링크파일id.linkfile.co.kr/test.JPG" border="0"><br>
<a href="javascript:popup_img('팝업으로 뜰 이미지경로.jpg','숫자','숫자');">
<img src="http://링크파일id.linkfile.co.kr/test.JPG" border="0"><br>
<a href="javascript:popup_img('팝업으로 뜰 이미지경로.jpg','숫자','숫자');">
<img src="http://링크파일id.linkfile.co.kr/test.JPG" border="0"><br>
<a href="javascript:popup_img('팝업으로 뜰 이미지경로.jpg','숫자','숫자');">
<img src="http://링크파일id.linkfile.co.kr/test.JPG" border="0"><br>
<a href="javascript:popup_img('팝업으로 뜰 이미지경로.jpg','숫자','숫자');">
<img src="http://링크파일id.linkfile.co.kr/test.JPG" border="0"><br>
<a href="javascript:popup_img('팝업으로 뜰 이미지경로.jpg','숫자','숫자');">
<img src="http://링크파일id.linkfile.co.kr/test.JPG" border="0">
</body>
</html>
주의할 점
1. 위 소스를 링크파일 내 html편집기를 통해 저장하시고, 한 줄 소스를 복사하여 옥션이나 G마켓 등의 페이지에 링크해
주셔야 정상적으로 보입니다. 한 줄 소스를 이용하지 않을 경우 제대로 작동되지 않습니다.
저장시 반드시 제목 오른쪽에 있는 'html 직접입력'에 체크 후 저장하셔야 합니다!!
2. 위 내용이 이해가 되지 않으시면 고객센터로 전화 문의해 주시기 바랍니다.^^ 친절히 설명 드리겠습니다.
3. 위 소스를 링크파일 이미지호스팅의 이용 목적 외 무단 도용 및 반출을 엄격히 금합니다.
|
