인터넷정보

올블스러운 이미지 클라우드 만들기

알 수 없는 사용자 2007. 10. 18. 13:26
이미지 주소만 넣으면 막 자동으로 만들어 주는 그런건 아닙니다.(쏴리..)

오히려 script, html, css 팁에 더 가깝네요.

이미지 클라우드 같은 요소가 급하게 뚝닥 급조해야할 상황이 생길수도 있기에... 과감히 알짜에 넣어봅니다.

---------- 이하 블로그 본문 -------------


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

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



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

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

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



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



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

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



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

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



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

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



오예!! 완성인듯~

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

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

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

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

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

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



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

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

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

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


소스 :

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
  5. <meta http-equiv=cache-control content=no-cache>
  6. <meta http-equiv=pragma    content=no-cache>
  7. <!-- title -->
  8. <title>올블 스타일 이미지 클라우드</title>
  9. <!-- stylesheets -->
  10. <!-- <link rel=stylesheet href="" type="text/css" title="Global CSS"> -->
  11. <!-- global script -->
  12. <script language="javascript" type="text/javascript" src="./slb.js" ></script>
  13. <script type="text/javascript" language="javascript">
  14.     //<![CDATA[
  15.     function fitImgBig(img) {
  16.         var w = img.width;
  17.         if (img.offsetHeight < w) {
  18.             img.removeAttribute('width');
  19.             img.height = w;
  20.         }
  21.         if(navigator.appVersion.indexOf("MSIE") < 0) {
  22.             w = w + 8;
  23.             if (img.offsetHeight < w) {
  24.                 img.removeAttribute('width');
  25.                 img.height = w;
  26.             } else {
  27.                 img.removeAttribute('height');
  28.                 img.width = w;
  29.             }
  30.             img.parentNode.style.width = parseInt(img.parentNode.offsetWidth) + 'px';
  31.             img.parentNode.style.height = parseInt(img.parentNode.offsetHeight) + 'px';
  32.         }
  33.         img.style.clip = 'rect(0px '+w+'px '+w+'px 0px)';
  34.     }
  35.     
  36.     function fitImgSmall(img) {
  37.         var w = img.width;
  38.         if (img.offsetHeight < w) {
  39.             img.removeAttribute('width');
  40.             img.height = w;
  41.         }
  42.         if(navigator.appVersion.indexOf("MSIE") < 0) {
  43.             w = w + 4;
  44.             if (img.offsetHeight < w) {
  45.                 img.removeAttribute('width');
  46.                 img.height = w;
  47.             } else {
  48.                 img.removeAttribute('height');
  49.                 img.width = w;
  50.             }
  51.         }
  52.         img.style.clip = 'rect(0px '+w+'px '+w+'px 0px)';
  53.     }
  54.     //]]>
  55. </script>
  56. <!-- document-specific inline style -->
  57. <style type="text/css">
  58.     /*<![CDATA[*/
  59.     html { width:100%; height:100%; margin: 0px; padding: 0px;}
  60.     BODY { margin: 0px; padding: 0px; width: 100%; height: 100%; font-size:9pt; font-family: 맑은 고딕, 굴림, 돋움, 바탕, verdana}
  61.     BODY,TD,SELECT,input,DIV,form,TEXTAREA,center,option,pre,blockquote {font-size:9pt; font-family: 맑은 고딕, 굴림, 돋움, 바탕, verdana}
  62.     .SLB_center { cursor:pointer; visibility:hidden; border: solid 4px #000000; background-color: #FFF}
  63.     .SLB_close { cursor: pointer; display:none; font-family: verdana,tahoma; font-size: 9pt; background-color:#000000; color: #ffffff; padding-bottom: 4px; }
  64.     .SLB_caption { cursor: pointer; display:none; font-family: verdana,tahoma; font-size: 9pt; background-color:#000000; color: #ffffff; padding-bottom: 4px; }
  65.     #SLB_loading { cursor: pointer; display:none; z-index: 99998; position:absolute; font-family: verdana,tahoma; font-size: 9pt; background-color:#000000; color: #ffffff; padding: 3px 0px 4px 0px; border: solid 2px #cfcfcf; }
  66.     
  67.     
  68.     .imgcloudoutline {
  69.         margin-left:20px;
  70.         border:4px solid #B5C8F7;
  71.         width: 260px;
  72.         text-align:center;
  73.     }
  74.     
  75.     .imgcloudoutline h4 {
  76.         padding: 6px 8px 4px 10px;
  77.         text-align: left;
  78.         font: bold 12px/16px 굴림;
  79.         color: #365374;
  80.         background-color: #B5C8F7;
  81.         margin:0px;
  82.     }
  83.     
  84.     .imgcloudoutline table {
  85.         margin: 10px auto;
  86.         border:1px solid #ddd;
  87.     }
  88.     
  89.     .imgcloud {
  90.         border:1px solid #ddd;
  91.         padding: 1px;
  92.         width: 44px;
  93.         height: 44px;
  94.         overflow: hidden;
  95.     }
  96.     .imgcloudhover {
  97.         border: 2px solid #7899AF;
  98.         padding: 0px;
  99.         width: 44px;
  100.         height: 44px;
  101.         overflow: hidden;
  102.     }
  103.     .imgcloudbig {
  104.         border:1px solid #ddd;
  105.         padding: 1px;
  106.         width: 88px;
  107.         height: 88px;
  108.         overflow: hidden;
  109.     }
  110.     
  111.     .imgcloudbighover {
  112.         border: 2px solid #7899AF;
  113.         padding: 0px;
  114.         width: 88px;
  115.         height: 88px;
  116.         overflow: hidden;
  117.     }
  118.     
  119.     .cloudimg {
  120.         border: 0px;
  121.         position: absolute;
  122.         cursor: pointer;
  123.     }
  124.     /*]]>*/
  125. </style>
  126. </head>
  127. <body>
  128. <div id="SLB_film" style="z-index: 99997; position:absolute; display:none; width:100%; height:100%; background-color:#000000; filter:Alpha(opacity=60); opacity:0.6; -moz-opacity:0.6;"></div>
  129. <div id="SLB_content" onclick="SLB_show();" align="center" style="z-index: 99999; position:absolute;"></div>
  130. <div id="SLB_loading" onclick="SLB_show();" title="로딩중...클릭시 취소"> Loading... </div>
  131. <p style="margin:0px;">&nbsp;</p>
  132. <div class="imgcloudoutline">
  133.     <h4>이미지 클라우드</h4>
  134.     <table cellpadding="0" cellspacing="0" border="0">
  135.         <tbody>
  136.         <tr valign=middle>
  137.             <td colspan="2" rowspan="2">
  138.                 <div class="imgcloudbig" onmouseover="this.className = 'imgcloudbighover';" onmouseout="this.className = 'imgcloudbig';"><img align="absmiddle" class="cloudimg" src="http://images.allblog.net/7/64273/9755990.jpg" width="84" onload="fitImgBig(this);" onclick="SLB_show(this.src,'image',true);" /></div>
  139.             </td>
  140.             <td>
  141.                 <div class="imgcloud" onmouseover="this.className = 'imgcloudhover';" onmouseout="this.className = 'imgcloud';"><img align="absmiddle" class="cloudimg" src="http://images.allblog.net/3/27834/9590434.jpg" width="40" onload="fitImgSmall(this);" onclick="SLB_show(this.src,'image',true);" /></div>
  142.             </td>
  143.             <td>
  144.                 <div class="imgcloud" onmouseover="this.className = 'imgcloudhover';" onmouseout="this.className = 'imgcloud';"><img align="absmiddle" class="cloudimg" src="http://images.allblog.net/10/98609/9582003.jpg" width="40" onload="fitImgSmall(this);" onclick="SLB_show(this.src,'image',true);" /></div>
  145.             </td>
  146.             <td>
  147.                 <div class="imgcloud" onmouseover="this.className = 'imgcloudhover';" onmouseout="this.className = 'imgcloud';"><img align="absmiddle" class="cloudimg" src="http://images.allblog.net/12/117293/9535528.jpg" width="40" onload="fitImgSmall(this);" onclick="SLB_show(this.src,'image',true);" /></div>
  148.             </td>
  149.         </tr>
  150.         <tr>
  151.             <td>
  152.                 <div class="imgcloud" onmouseover="this.className = 'imgcloudhover';" onmouseout="this.className = 'imgcloud';"><img align="absmiddle" class="cloudimg" src="http://images.allblog.net/13/122739/9527010.jpg" width="40" onload="fitImgSmall(this);" onclick="SLB_show(this.src,'image',true);" /></div>
  153.             </td>
  154.             <td>
  155.                 <div class="imgcloud" onmouseover="this.className = 'imgcloudhover';" onmouseout="this.className = 'imgcloud';"><img align="absmiddle" class="cloudimg" src="http://images.allblog.net/11/102149/9486499.jpg" width="40" onload="fitImgSmall(this);" onclick="SLB_show(this.src,'image',true);" /></div>
  156.             </td>
  157.             <td>
  158.                 <div class="imgcloud" onmouseover="this.className = 'imgcloudhover';" onmouseout="this.className = 'imgcloud';"><img align="absmiddle" class="cloudimg" src="http://images.allblog.net/5/44746/9373739.jpg" width="40" onload="fitImgSmall(this);" onclick="SLB_show(this.src,'image',true);" /></div>
  159.             </td>
  160.         </tr>
  161.         <tr valign=middle>
  162.             <td>
  163.                 <div class="imgcloud" onmouseover="this.className = 'imgcloudhover';" onmouseout="this.className = 'imgcloud';"><img align="absmiddle" class="cloudimg" src="http://images.allblog.net/10/92993/9286988.jpg" width="40" onload="fitImgSmall(this);" onclick="SLB_show(this.src,'image',true);" /></div>
  164.             </td>
  165.             <td>
  166.                 <div class="imgcloud" onmouseover="this.className = 'imgcloudhover';" onmouseout="this.className = 'imgcloud';"><img align="absmiddle" class="cloudimg" src="http://images.allblog.net/13/128380/9353153.jpg" width="40" onload="fitImgSmall(this);" onclick="SLB_show(this.src,'image',true);" /></div>
  167.             </td>
  168.             <td>
  169.                 <div class="imgcloud" onmouseover="this.className = 'imgcloudhover';" onmouseout="this.className = 'imgcloud';"><img align="absmiddle" class="cloudimg" src="http://images.allblog.net/13/120699/9265333.jpg" width="40" onload="fitImgSmall(this);" onclick="SLB_show(this.src,'image',true);" /></div>
  170.             </td>
  171.             <td colspan="2" rowspan="2">
  172.                 <div class="imgcloudbig" onmouseover="this.className = 'imgcloudbighover';" onmouseout="this.className = 'imgcloudbig';"><img align="absmiddle" class="cloudimg" src="http://images.allblog.net/7/68211/9260419.jpg" width="84" onload="fitImgBig(this);" onclick="SLB_show(this.src,'image',true);" /></div>
  173.             </td>
  174.         </tr>
  175.         <tr>
  176.             <td>
  177.                 <div class="imgcloud" onmouseover="this.className = 'imgcloudhover';" onmouseout="this.className = 'imgcloud';"><img align="absmiddle" class="cloudimg" src="http://images.allblog.net/11/104215/9255221.jpg" width="40" onload="fitImgSmall(this);" onclick="SLB_show(this.src,'image',true);" /></div>
  178.             </td>
  179.             <td>
  180.                 <div class="imgcloud" onmouseover="this.className = 'imgcloudhover';" onmouseout="this.className = 'imgcloud';"><img align="absmiddle" class="cloudimg" src="http://images.allblog.net/11/104215/9246326.jpg" width="40" onload="fitImgSmall(this);" onclick="SLB_show(this.src,'image',true);" /></div>
  181.             </td>
  182.             <td>
  183.                 <div class="imgcloud" onmouseover="this.className = 'imgcloudhover';" onmouseout="this.className = 'imgcloud';"><img align="absmiddle" class="cloudimg" src="http://images.allblog.net/3/26465/9233119.jpg" width="40" onload="fitImgSmall(this);" onclick="SLB_show(this.src,'image',true);" /></div>
  184.             </td>
  185.         </tr>
  186.         </tbody>
  187.     </table>
  188. </div>
  189. </body>
  190. </html>

반응형