알릭의 얼음집

예전부터 탐하고 있었던거지만..

시간이 나질않아 손을 못대고 있던 올블로그의 연관 이미지 클라우드
(뭔가 검색시에만 나옴.. 아래 이미지의 키워드는 뭐였을까요? ㅋ)



암튼 이넘이 너무 탐나요!!! (어디 딱히 써먹을때도 없으면서...ㅡ.ㅡ;).. 그리하여...

오케이!! 나도 직접 만들어 보자!!!

우선 table 과 div 와 style을 이용해서 뚝딱뚝딱... 틀 완성!



물론 마우스 올리면 테두리 강조도 되구요~



자.. 이제 저 틀안에 이미지들만 넣으면 되는거겠죠?

img 태그로... width 만 맞춰서 (그러면 높이는 알아서 비율에 맞게 맞춰지니까요) 입력!!



헐~ 이미지 높이에 따라 들쭉날쭉... 역시 이렇게 간단히는 안되는거죠...

그래서 테이블이 늘어나지 않도록... img 에 position:absolute 을 줬습니다.



후후.. 슬슬 틀을 잡아가는군... 그러나 역시 삐져나오는 이미지들 ㅜ.ㅜ;

아항~ img 를 깜싸고 있는 div 에 overflow: hidden 을 주었습니다.



오예!! 완성인듯~

흠.. 그런데 자세히 살펴보니...

역시 짧은애들이 안습이네요...
긴애들은.. 4방에 있어야할 테두리와 이미지 사이에 1px 공백이 상단과 좌측에만 있네요...

에잇!! 어쩌란 말이냐....

큰이미지들은 img 에 clip 을 먹여서 잘라주면 될것 같은데.. 작은 애들은 어쩌죠?

어쩔수 없군요... 자바 스크립트 출동!!!

image 에 onload 로 스크립트 먹여서 크기에 따라 잘리던지..확대 되던지... 하게 처리했습니다.



짜잔~ 이 정도면 만족합니다. ^^

소스가 궁금하세요? 아래 링크에서 소스보기 하시면 다 나옵니다....
(멋스럽게 심플라이트박스까지 적용해둔 상태...ㅋ)

실제 구동 화면 보기 클릭!!

이미지 클라우드 만들어 보기 대장정 끝~