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 명령 적을때 따옴표 부분 잘 확인하세요!

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

 

와우~~ 끝!

 

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