('' ) 위의 사진을 보시면 한 이미지 내의 썸네일 마다 다른 링크가 걸려 있습니다.
물론, html을 잘 활용하실 실력이 되시거나 JAVA 등 프로그래밍에 능하신 분은 그냥 패쓰해 주시기 바라구요...
오늘은 저, 짜잔형 처럼 초보인 분들을 위해 이미지내에 간단히 링크를 넣는 방법을 소개해 드리려고 합니다.
먼저 아주 간단한 프로그램을 만들어 배포해 주신 pidgin bloggg 에 감사드립니다. 이곳에서 프로그램을 다운받으시거나
imapic2.exe영문 설명도 첨부합니다.
imagemapic.pdf출처는 당연히... pidgin bloggg 입니다. 다시 한번 감사드립니다~~~
간단 강좌 시작해 보겠습니다.
1. 사용하실 이미지를 하나 만들어 주세요... (저는, 제 블로그 첫 페이지 일부를 캡쳐했습니다)
2. 위에서 다운받으신, imagemapic 을 실행하셔서
사용할 이미지를 오픈 합니다.
default 로 사각 선택툴이 작동됩니다. 간단한 메뉴는 아래와 같습니다~~
다양한 선택 도구를 이용하여 링크를 걸어줄 이미지내의 범위를 정해 주시구요... 오른쪽 클릭을 하면
edit properties 등의 서브 메뉴가 보입니다. 클릭~
타켓을 지정해 주시고요... (현재창 또는 새창 등...) 잘 모르시겠으면 위에 써있듯이 blank를 선택, 새창에 열리도록 하구요
해당 영역을 클릭해서, 이동할 경로도 지정해 주도록 합니다.
노란 마크가 보이시죠? thumbnail 을 하나 하나 사각툴로 지정 후 링크될 곳을 지정해 주었습니다.
그리고, generate code 기능을 사용하면....
짜잔... html 코드를 샤샤샥 만들어 줍니다. 이제 끝났으니 그냥 복사해서 사용하시면 되는데요...
당연히, 먼저 사용하시려고 만들어 놓은 이미지를 업로드 해놓으셔야 겠지요 ^^
저는, 제 쇼핑몰이 있어서 그곳을 이용했습니다. (여러분도 이미지 호스팅이 가능한 곳을 사용하시면 되겠지요)
이미지가 업로드되어 있는 곳의 경로를 확인하시구요, 이미지의 이름이 변경되어 업로드 되는 경우가 대부분이니
변경된 이미지 이름도 메모장 등에 복사해 주세요~~
그 다음에 생성된 코드에서 "이미지 경로"(첫번째 네모친 곳)와 "이미지 이름"(네모친 곳들)을 변경해 주시면 완성~~~
수정한 코드를 그대로 가져다 붙이시면 되겠습니다. 간단하죠 ^^:
블로그 첫 페이지에 카테고리 메뉴를 예쁘게 만들 수도 있고.... 뭐.... 활용은 무궁 무진할 듯 합니다.
부디 잘 사용하셔서 멋진 블로깅하시는데에 조금이라도 도움이 되었으면 좋겠습니다... 꾸벅~
이올린에 북마크하기
이올린에 추천하기'a mine of information' 카테고리의 다른 글
| IBM 노트북 T40 청소하기 (10) | 2008/03/30 |
|---|---|
| 램브란트 무선동조기 (DRST-4) (10) | 2008/03/26 |
| 이미지에 링크 넣기 (image mapping) (16) | 2008/01/21 |
| IBM T40 수리(?) 하기 + 관련 정보 (9) | 2008/01/02 |
| 수은 전지 호환 표 (10) | 2007/12/13 |
| 내 차에 맞는 THULE 캐리어 찾기 (3) | 2007/11/29 |
