슬라이드 이미지에 링크거는법좀
본문
그누에 하는건 아니구요 드림위버로 소스작업해서
만들고 있습니다.
ftp에 올려논 html 페이지는
일단 FTP에는 이미지 파일만 올려놨습니다.
css나 기타 다른 파일 업로드 되있지 않아요
멀 어떻게 수정해서 올려야할지 몰라서요
그냥 드림위버로 소스 얻어서 하는중인데요
css나 기타 파일을 FTP에 올려놓지않으면
각종 명령이 반응하지 않나요??
소스 첨부합니다. (HTML파일첨부 했구요)
이미지 슬라이드에 링크를 걸고 싶습니다.
링크를 걸면 슬라이드가 안되거나
이미지가 밑으로 나열됩니다.
문제점좀..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
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_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
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];}
}
</script>
</head>
<body onload="MM_preloadImages('http://ppackse.mireene.kr/카드결제/카결11-2.gif','http://ppackse.mireene.kr/카드결제/카톡상담2.gif',')">
<p> </p>
<table width="800" height="269" border="0">
<tr>
<th width="300" height="234" scope="col">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="http://malsup.github.com/jquery.cycle2.js"></script>
<div class="cycle-pager"></div>
<div class="cycle-slideshow"
data-cycle-fx=scrollHorz
data-cycle-timeout=2000
>
<div class="cycle-pager"></div>
<img src="http://ppackse.mireene.kr/mp4/03.jpg" width="600" height="288" border="0">
<img src="http://ppackse.mireene.kr/mp4/01.jpg" width="600" height="288" border="0">
<img src="http://ppackse.mireene.kr/mp4/02.jpg" width="600" height="288" border="0">
</div>
<STYLE>
.cycle-slideshow, .cycle-slideshow * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.cycle-slideshow { width: 500px; min-width: 200px; max-width: 500px; margin: 10px auto; padding: 0; position: relative;}
.cycle-slideshow div.slide { width: 100%; height: 100% }
.cycle-slideshow img {
/*
some of these styles will be set by the plugin (by default) but setting them here
helps avoid flash-of-unstyled-content
*/
position: absolute; top: 0; left: 0;
width: 100%; padding: 0; display: block;
}
/* in case script does not load */
.cycle-slideshow img:first-child {
position: static; z-index: 100;
}
.cycle-pager {
text-align: left; width: 100%; z-index: 500; position: absolute; top: 2px; overflow: hidden;
}
.cycle-pager span {
font-family: arial; font-size: 50px; width: 16px; height: 16px;
display: inline-block; color: #ddd; cursor: pointer;
}
.cycle-pager span.cycle-pager-active { color: #D69746;}
.cycle-pager > * { cursor: pointer;}
</STYLE>
</div>
</th>
<th width="277" scope="col"><a href="http://thankshop.co.kr/card.jpg" target="_blank" onmouseover="MM_swapImage('Image5','','http://ppackse.mireene.kr/카드결제/카결11-2.gif',1)" onmouseout="MM_swapImgRestore()"><img src="http://ppackse.mireene.kr/%EC%B9%B4%EB%93%9C%EA%B2%B0%EC%A0%9C/%EC%B9%B4%EA%B2%B011.gif" name="Image5" width="280" height="144" border="0" id="Image5" /></a><a href="http://thankshop.mall.paran.com/banner_image/20161215130612.jpg" target="_blank" onmouseover="MM_swapImage('Image4','','http://ppackse.mireene.kr/카드결제/카톡상담2.gif',1)" onmouseout="MM_swapImgRestore()"><img src="http://ppackse.mireene.kr/%EC%B9%B4%EB%93%9C%EA%B2%B0%EC%A0%9C/%EC%B9%B4%ED%86%A1%EC%83%81%EB%8B%B4.gif" name="Image4" width="280" height="144" border="0" id="Image4" /></a></th>
</tr>
</table>
</body>
</html>
답변 2
이미지 부분에 링크 태그를 작성하시면 됩니다. 일단 원본은 아래 처럼 되어 있으신데
<img src="http://ppackse.mireene.kr/mp4/03.jpg" width="600" height="288" border="0">
<img src="http://ppackse.mireene.kr/mp4/01.jpg" width="600" height="288" border="0">
<img src="http://ppackse.mireene.kr/mp4/02.jpg" width="600" height="288" border="0">
이 부분을
<a href="링크주소"><img src="http://ppackse.mireene.kr/mp4/03.jpg" width="600" height="288" border="0"></a> 와 같이 작성해 주시면 됩니다.
답변감사합니다. 저렇게 하면 슬라이드가 안되거나 이미지가 아래로 떨어집니다 ㅠ
답변을 작성하시기 전에 로그인 해주세요.
