onclick 이벤트를 이용한 이미지에 링크걸기(javascript location.href 활용)

 

일반적으로 링크는 <a> 태그를 이용하면 되지만,,

jquery를 이용하다 보면 이미지에 링크를 걸 수 없는 경우가 있습니다.

물론 다른 사람이 만든 jquery 모듈을 사용하는 경우겠죠!

내가만든거라면 당근 필요한 기능을 넣었을테니까요!

 

 

 

이 글은 jquery를 이용하여 이미지 슬라이드를 구현하는 내용을

올린 글에 댓글로 문의 하신 분들을 위하여 좀더 자세한 설명이 필요할듯해서

별도의 포스팅으로 올립니다.

 

관련글.

 

[jquery] - 간단한 html 이미지 슬라이드

 

 

개발자라면 간단하게 말로 해도 쉽게 알아들을 수 있겟지만..

그렇지 않은 분은 이해가 어려울것 같다는 생각에

좀더 자세하게 올려보도록 하겠습니다.

 

 

이미지에 링크걸기

 

오해할 수 있어 다시 한번 언급하면

이미지에 링크걸기에 대한 이 글은

관련글 jquery로 이미지 슬라이드 구현시

이미지에 링크거는 방법에 대한 내용입니다.

 

 

링크를 거는 태그는 <a>태그가 있습니다.

하지만 <a>태그를 사용하면 안되는 상황이 있을 수 있죠!

그런 경우에는 자바스크립트와 온클릭 이벤트를 이용하여 해결할 수 있습니다.

 

 

 

<img src="image url">

 

이미지태그 사용은 위와 같이 하지요!

위 태그 안에 추가적인 액션을 넣는 방법 중 onclick이 있습니다.

 

<img onclick="클릭시 처리할 명령" src="image url">

 

 

<img>태그 내에서 이미지를 클릭시 링크를 거는 방법은

자바스크립트 함수를 만들어서 사용하는 방법과

인라인으로 자바스크립트를 사용하는 방법이 있습니다.

 

티스토리에서 포스트내에 사용하기 위해서는

인라인 방식으로 사용하는것이 편하고

홈페이지나 스킨에서 사용할 것이라면 별도 함수를 만들어서 이용하는것이 편할 것입니다.

 

여기서 사용되는 명령은 location.href 입니다.

 

 

 

 

 

자바스크립트 링크 location.href

 

<a>태그 대신 사용할 수 있는 자바스크립트입니다.

사용방식은

 

location.href ="이동할 URL"

 

 

아래 예시는 인라인으로 자바스크립트를 사용한 예입니다.

 

 

<img onclick="javascript:location.href='http://band.us/@billclub';" src="image url">

 

 

위와 같이 하는 경우 이미지를 클릭하면

http://band.us/@billclub 으로 접속이 됩니다.

 

 

 

 

 

 

 

마우스 포인터 변경

 

테스트해보면 이제 이미지 클릭시 링크가 열릴것입니다.

그런데 링크가 되었는지 안되었는지 마우스를 올려도

마우스 포인터가 손가락 모양으로 바뀌지 않습니다.

손가락 모양으로 바뀌지 않으니 만든 사람외에는 링크가 걸려 있는지 모르겠지요!

 

마우스 포인터 변경 하는 방법

 

마우스 포인터 변경을 위해서는 style을 이용하면 됩니다.

 

방법은

 

style="cursor:pointer"

 

와 같이 하면 됩니다.

pointer 대신 hand를 사용해도 되나

웹표준인 pointer 를 사용하는것이 오류를 줄일 수 있습니다.

 

<img onclick="javascript:location.href='http://band.us/@billclub';" style="cursor:pointer;" src="image url">

 

 

 

 

 

 

 

location.href 새창으로 링크열기

 

다 되었다 생각하면 또 다른 해결문제가 생기는데 바로

새창으로 링크를 여는 것입니다.

위 링크가 새창으로 링크가 열리는것이 아니라 현재창에서 열리게 되기 때문에

새창으로 링크를 열고 싶다면 추가적인 자바스크립트 명령이 필요합니다.

 

바로 아래 명령을 추가하면 해결이 됩니다.

 

newin = window.open('about:blank');

newin.location.href="연결url";

 

이걸 인라인으로 적용하면 다음과 같습니다.

 

 

<img onclick="javascript:newin=window.open('about:blank'); newin.location.href='http://band.us/@billclub';" style="cursor:pointer;" src="image url">

 

 

여기서 javascript 명령 적을때 따옴표 부분 잘 확인하세요!

복잡해서 빼먹거나 잘못 될 수 있습니다.

 

와우~~ 끝!

 

해결되셨으면 댓글 달아주시고 가셔요! ^^

엑셀기초 기본용어 및 데이터 입력방법

엑셀기초 기본용어 및 데이터 입력방법 오늘부터 엑셀에 대해서 조금씩 올려볼까 합니다. 엑셀은 숫자 계산을 쉽게 하고 통계 및 차트를 쉽게 작성할 수 있고 문서작성도 편리하여 가장 많이 사용하는 오피스 프로그램입니다. 엑셀의 문..

엑셀 기본글꼴 및 크기 설정 방법

엑셀글꼴 기본설정 및 글꼴 기본크기설정 방법 엑셀을 열면 기본글꼴과 글자크기가 설정되어 있어서 특별히 변경하지 않으면 기본글꼴과 기본 글자크기로 입력이 됩니다. 그런데 본인이 좋아하는 글꼴을 선호하거나 직장특성상 지정한 글자 ..

한글문서를 PDF로 저장하는 방법

한글오피스, 한컴오피스의 한글에서 작성한 문서를 PDF로 저장하려면 어떻게 해야 할까? PDF는 한글문서에 비하여 보안성이 있어서 다른 사람이 문서 수정을 할 수가 없고 한컴오피스가 PC에 설치가 되어 잇지 않아도 문서 열람을..

MS워드에서 티스토리 블로그에 글쓰기

MS워드를 이용하여 티스토리 블로그에 글쓰는 방법에 대해서 알아보겠습니다. MS워드를 이용하여 티스토리 포스팅을 하기 위해서는 처음에 셋팅과정이 필요합니다. 처음하는 경우 좀 복잡해보이지만 그리 어렵지 않습니다. 모르고 혼자 ..

3쿠션 당구 학고(옆돌리기) 치는 법 (당점과 두께)
3쿠션 당구 학고(옆돌리기) 치는 법 (당점과 두께)
3쿠션 당구 학고(옆돌리기) 치는 법 (당점과 두께)
3쿠션 당구 학고(옆돌리기) 치는 법 (당점과 두께)
3쿠션 당구 학고(옆돌리기) 치는 법 (당점과 두께)
신중동역 오피스텔 헤리움메트로타워 전세,월세 입주시작
신중동역 오피스텔 헤리움메트로타워 전세,월세 입주시작
신중동역 오피스텔 헤리움메트로타워 전세,월세 입주시작
신중동역 오피스텔 헤리움메트로타워 전세,월세 입주시작
신중동역 오피스텔 헤리움메트로타워 전세,월세 입주시작
신중동역 오피스텔 헤리움메트로타워 전세,월세 입주시작
신중동역 오피스텔 헤리움메트로타워 전세,월세 입주시작
신중동역 오피스텔 헤리움메트로타워 전세,월세 입주시작
신중동역 오피스텔 헤리움메트로타워 전세,월세 입주시작
주식투자정보 베스트투자클럽에서 얻어가세요!
주식투자정보 베스트투자클럽에서 얻어가세요!