이미지를 클릭 해 또 다른 이미지를 나타내는 태크닉

오늘은 이미지를 클릭 했을때 또다른 이미지로 연결 하는 테크닉에 대해 공부해 보도록 합니다.

처음 방법은 javascript로 윈도 창에 띄우는 방법으로 타켓팅 해보도록 합니다.

여기에 쓰는 자바스크립트의 이벤트 메소드 는 이것이죠 onclick="javascript_:window.open(이미지 주소)"

 

이미지를 클릭 하기 위해서 필요한 이미지들에 연결할 주소url 을 준비 해두어야 하겠죠 

제가 오늘 준비한 이미지들은 네이버의 지식인 체널에서 소스가져오기로 가져 왔습니다.

아래는 피겨스케이팅 선수로 잘 알려진 일본 의 아사다 마오 선수의 이미지 이구요

위의 이미지를 클릭 했을때 출력 되는 이미지도 역시 네이버에서 가져온 이글루스가 출처인 이미지입니다.

위의 아사다 마오 선수를 클릭 하면 타켓 되도록 설정 해 보겠습니다.

아래는 이미지 주소 입니다.

http://tv01.search.naver.net/ugc?t=470x180&q=http://pds25.egloos.com/pds/201309/15/49/b0012149_5235a83ca7cdc.jpg','','width=300,height=250,left=400,top=200,

<a href="#" onclick="javascript_:window.open('http://tv01.search.naver.net/ugc?t=470x180&amp;q=http://pds25.egloos.com/pds/201309/15/49/b0012149_5235a83ca7cdc.jpg','','width=300,height=250,left=400,top=200,scrollbars=no');">타켓팅 이미지 클릭</a>

자 이제 준비를 다 한 상태 이니 아사다 마오 선수를 클릭 했을때 다른 타켓팅 이미지가 나오도록 해 보겠습니다.

아래의 아시다 마오 선수를 클릭 하면 위의 타켓 주소의 이미지가 나오는걸 알수 있습니다.

소스는 이렇 습니다.

<a href="#"onclick="javascript_:window.open('http://tv01.search.naver.net/ugc?t=470x180&amp;q=http://pds25.egloos.com/pds/201309/15/49/b0012149_5235a83ca7cdc.jpg','','width=300,height=250,left=400,top=200,scrollbars=no');"> 이 주소의 이미지는 클릭시 보이는 이미지<img width="100px" border="0" src="http://tv02.search.naver.net/ugc?t=470x180&amp;q=http://cafefiles.naver.net/data23/2008/2/8/13/%B1%E8%BF%AC%BE%C6_spqjwlgid99.jpg"></a> 이 주소의 이미지는 현재 보이는 아사다 마오 선수의 이미지

위에서 타켓팅 주소를 클릭해 창에 띄우는 방법을 응용 하면 어떤 이미지 라도 정확하게 주소를 표시 해 주기만 하면 가능 하다는 걸 알수가 있습니다. 

위에서 링크 되는 글자가 들어간 부분에 이미지 주소를 대입 해 주면 되는 것이죠  아주 쉽고 간단 하지요

하나 더 예를 들어 보도록 하겠습니다.

이번에는 좀 색다르게 아이콘 을 클릭 했을때 타켓팅 주소의 이미지가 떠도록 해 봅니다.

이렇게 아이콘을 클릭해도 다른 이미지를 불러 올수가 있다는걸 알게 되었 습니다.

위에서 사용한 방법은 javascript를 이용 한 방법 이였 구요 

지금부터는 링크 태그(a 태그 또는 앵크 태그)를 이용 한 방법으로 이번엔 아사다 마오 선수를 타켓 대상이 되도록 설정 해 보도록 합니다

위의 주소를 일반적인 방법으로 타켓팅(링크) 하면 이렇게 되겠죠
타켓팅 이미지로....>> 클릭

위의 링크 소스를 풀어 보면 이렇게 됩니다.

간단 하게 태그 공식 으로 나타내면 < img src="http://..주소../">이런 모습이 되겠죠

여기서 img는 image의 약자 이고 src는 소스 의 약자 입니다.

이미지를 나타내는 태그는 스스로 닫히는 태그의 모습을 갖고 있는데요 이런 태그를 가리켜 독립태그라고 합니다.

소스는 이렇 습니다.

<a href="http://tv02.search.naver.net/ugc?t=470x180&amp;q=http://cafefiles.naver.net/data23/2008/2/8/13/%B1%E8%BF%AC%BE%C6_spqjwlgid99.jpg"><img width="180px" height="150px" border="0" src="http://tv01.search.naver.net/ugc?t=470x180&amp;q=http://pds25.egloos.com/pds/201309/15/49/b0012149_5235a83ca7cdc.jpg"></a>

링크태그의 강력한 힘이 작용 해 자바스크립트를 사용 한 것과 똑 같은 작용으로 이미지를 링크 한 것을 알수가  있습니다.

우리가 쓰는 웹 언어의 태그중 모든 액티브한 기능의 언어들은 이 앵커태그를 응용 한 것이 라는 것을 알수 있으며 앵커 태그는 웹의 역사를 바꾸어놓은 가장 중요한 태그 라는 것을  알아야 겠지요  오늘은 여기 까지 공부 하도록 합니다.

아래 이미지를 클릭 해도 앵크태그 설명 페이지로 이동 합니다.