묻고답하기
이미지 슬라이드에 a 링크 어떻게 넣나요?
2017.02.09 16:44
이미지 슬라이드 만들었는데
헤드 부분은 이렇게 넣었구요
<head>
.cycle-slideshow, .cycle-slideshow * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.cycle-slideshow { width: 516px; min-width: 300px; max-width: 516px; margin: 0px auto; padding: 0; position: relative; }
.cycle-slideshow div.slide {width: 100%; height: 100% }
.cycle-slideshow img {
position: absolute; top:0; left:0;
width: 100%; padding: 0; display: block;
}
.cycle-slideshow img:first-child { position: static; z-index:100; }
.cycle-pager { text-align:center; width:100%; z-index:516; position:absolute; top:250px; 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;}
</head>
바디 부분은 아래처럼 넣었습니다
<body>
<td width="526" align="left" valign="top"><a href="http://www.daum.net">
<div class="cycle-slideshow"
cycle-slideshow data-cycle-loader="wait"
data-cycle-timeout="3000"
data-cycle-fx="scrollHorz"
data-cycle-pause-on-hover="true"
data-cycle-speed="300"
>
<div class="cycle-pager"></div>
<img src="/images/2016-091.jpg" />
<img src="/images/2016-093.jpg" />
<img src="/images/2016-094.jpg" />
</div>
</a>
</td>
</body>
현재는 빨간색 부분처럼
td 안에 a 링크를 걸어둔 상태라
슬라이드 되는 세 개의 이미지를 각각 클릭하면
동일한 페이지 하나만 공통적으로 나오도록 되어있는데요
이 이미지들에 각각 링크를 주려면 어떻게 해야하나요?
답변 기다리겠습니다
감사합니다
- [2021/08/03] 묻고답하기 홈페이지를 처음 제작해보는데 *3
- [2020/12/16] 묻고답하기 footer 하단에 고정하려면 어딜 수정해야 할까요?
- [2019/04/02] 묻고답하기 cycle-pager 배너에 a 링크를 걸면 배너 이미지가 풀려요ㅠ *2
- [2019/03/27] 묻고답하기 모바일에서만 '권한이 없습니다'가 나오는 이유가 궁금합니다. *1
- [2019/01/03] 묻고답하기 카메론 위젯에서 날짜부분을 올리고 싶어요. *1
댓글 7
-
외인
2017.02.09 16:58
-
파도.
2017.02.09 17:18
댓글 감사합니다 :) 1번 방법으로 하니 이미지가 세 이미지가 쭉 펼쳐져서 나오는 오류가 생기구요 2번으로 하니 마우스 커서가 손 모양으로 바뀌지 않네요 style="cursor:hand;" 를 넣어도 바뀌지가 않는데 어떻게 해야 할까요?
-
외인님 말씀도 맞는데..
onCLick= 은 비표준이니 되도록이면 사용은 하지마시고... 링크를 연결하는 개념인. "a태그"를 사용하세요^^
-
파도.
2017.02.09 17:19
댓글 감사합니다 :)
<a href="http://www.daum.net"><img src="이미지주소"></a>
<a href="http://www.daum.net"><img src="이미지주소"></a>
이런 식으로 넣으니 세 이미지가 쭉 아래로 펼쳐지는 오류가 생기네요
어디를 수정하면 될까요?
-
제가보기엔.. 쭉... 아래로 펼쳐지는건. js스크립트에 오류나 문제등등.. 그런거 같은데요.^^
스크립트에 문제가 없다면. 배너이미지가 동일선상에서 이미지 3개가 보이겠죠..^^ 스크립트를 확인해보세요.
-
파도.
2017.02.09 17:43
감사합니다 :) 제가 초보라 웹소스를 그대로 가져왔더니 오류가 생기는 것 같네요
head 에는
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>위와 같은 소스를 넣었는데요 스크립트를 확인하려면 이 파일을 직접 확인해봐야 되는거죠?
-
외인
2017.02.14 17:58
스타일시트를 조정하시면 될 것 같네요. 스타일시트 img 나오는 부분 앞에 a 를 넣어 보시면 어떨까 싶어요.
a img 이케
1번 방법 <img src- 태그 앞에 <a href=""><img src 이런 식으로 넣으셔도 되구요 - 소스에서 이미지 세개 이니 세 번 넣어야 합니다. 각각 주소 다르게 해도 되구요. 아니면 <img src="" onCLick="location.href='링크' ... 이런 식으로 넣으셔도 됩니다.