이미지에 링크를 걸고 싶은데요.
본문
pc-header .at-container02 { padding:0px 10px 5px; background: url('/img/banner_t02.jpg') no-repeat left top; }
백그라운드로 이미지를 가지고 와서 링크를 걸 수가 없습니다.
백그라운드가 아닌 이미지 삽입 후 링크 거는 법을 좀 배울 수 있을까요?
답변 5
<a href="링크주소" target="_blank"><div class="at-container02"></div></a>
이렇게 전체로 걸면 됩니다.
style 에 cursor:pointer 는 말그대로 stylesheet 에 넣는 소스구요.
pc-header .at-container02 { padding:0px 10px 5px; background: url('/img/banner_t02.jpg') no-repeat left top; cursor:pointer;}
div 에 onclick 으로 하실꺼면 cursor:pointer 를 넣어야 링크가 있다는 뜻으로 많이들 이해하니까
클릭빈도수가 있을겁니다.
a href 로 감싸시면 자동적으로 pointer 동작합니다.
답변 감사합니다. (__)
.at-container02 클래스가 지정된 테그에 onClick="location.href='링크주소';" 해주시면 될꺼 같아요.
네 acesoft님 답변감사합니다. (__)
해당 클래스가 있는 곳에 onclick으로 처리하면 간단하게 해결됩니다
ex) <div class="at-container02" onclick="location.href='link'"></div>
사용자의 링크 인식을위해서 style에 cursor:pointer 까지 넣어주면 완벽하겠죠?
<div class="at-container02" onclick="location.href='링크주소'" target="_blank">
새창을 띄우려고 하는데 부모창에 그대로 붙네요. 방법이 있을까요?
그리고 style에 cursor:pointer 이건 어찌하는건가요? (__)
onclick="location.href='주소'" 대신
새창으로
onclick="window.open('주소')"
팝업으로
onclick="window.open('주소','팝업이름','width=가로픽셀,height=세로픽셀,location=no,status=no,scrollbars=no');
그리고 스타일에 넣는다는건
pc-header .at-container02 { padding:0px 10px 5px; background: url('/img/banner_t02.jpg') no-repeat left top; cursor:pointer}를 추가해주라는 말입니다.
onclick="window.open('주소')" 이렇게 하니까 창이 한꺼 번에 두개가 뜨더라구요.
at-container02와 at-container 이렇게 두개가 있었는데 같이 감싸져서 그런듯 하더라구요.
답변 감사합니다. (__)
백그라운드 이미지를 쓰면서 링크를 거는방법을 문의주신게 맞나요?
해당 질문은 자바스크립트 없이 스타일 시트만으로 가능합니다.
1. a요소가 인라인 요소기 때문에 inline-block을 해야 넓이,높이를 설정할수 가 있습니다.그리고 백그라운드 부분에 이미지 링크를 거시면 됩니다.
2.그리고 해당요소를 설명하는 부분은 skip 을 활용하여 숨겨 줍니다.
<a href="http://sir.co.kr" target="_blank" class='imgLink skip'>그누보드바로가기</a>
<style type='text/css'>
.imgLink{display:inline-block;width:100px;height:100px;background:red;}
.skip {
overflow: hidden;
line-height: 0;
font-size: 0;
text-indent: -9999px;
}
</style>
네 답변 정말 감사합니다. (__)