이미지에 링크를 걸고 싶은데요.

이미지에 링크를 걸고 싶은데요.

QA

이미지에 링크를 걸고 싶은데요.

답변 5

본문

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='링크주소';" 해주시면 될꺼 같아요.

해당 클래스가 있는 곳에 onclick으로 처리하면 간단하게 해결됩니다

 

ex) <div class="at-container02" onclick="location.href='link'"></div>

사용자의 링크 인식을위해서 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}를 추가해주라는 말입니다.

백그라운드 이미지를 쓰면서 링크를 거는방법을 문의주신게 맞나요?

해당 질문은 자바스크립트 없이 스타일 시트만으로 가능합니다.

 

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>

 

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 20
© SIRSOFT
현재 페이지 제일 처음으로