그누보드 - 능동형 이미지 링크버튼

능동형 이미지 링크버튼 > 그누보드5 팁자료실

그누보드5 팁자료실

능동형 이미지 링크버튼 정보

능동형 이미지 링크버튼

본문

유튜브 썸네일 버튼형을 만들다 올려 봅니다.

이미지는 모두 정사각형이어야 합니다 사이즈는 상관 없습니다.

cutNum = 6 은 6개씩 분할된다는 의미입니다. 이것을 다른 숫자로 바꾸면 그 숫자만큼 분할됩니다.

imgDiv 의 width 인 720픽셀에 딱 맞게 사이즈가 나옵니다. 반응형은 100% 로 주면 되고 기타 다른 값을 넣어도 그 값에 딱 맞게 사이즈가 떨어집니다.

나머지 변수나 스타일을 조금씩 바꿔보면 변화하는 곳을 금방 알 것입니다.

텍스트와 링크는 그냥 그누보드 사이트로만 걸었습니다.

크롬에서만 확인하였습니다.

imgList_번호 의 형식으로 "이미지주소", "텍스트", "링크주소" 가 들어갑니다.

이미지갯수는 100개나 200개나 상관이 없습니다. 동일형식으로 해 주세요.


<script>
    cutNum = 6; // 한줄에 위치하는 이미지숫자
    imageGapPixel = 2; // 이미지간격
    radiusPercent = 20; // 둥글기수치 0~50
    textMarginPercent = 73; // 텍스트위치 margin-top 과 같음 퍼센트로 설정
    imgList_1 = ["https://blog.kakaocdn.net/dn/cMVe4H/btq5RuQIRfF/DkSPyZQhLMVpy26P86Sp40/img.jpg", "그누보드<br>SIR.KR", "https://sir.kr/"];
    imgList_2 = ["https://blog.kakaocdn.net/dn/nU4Lk/btq5TtDAlDl/cGLKyjuxsDOHGJ1WxujAFk/img.jpg", "그누보드<br>SIR.KR", "https://naver.com/"];
    imgList_3 = ["https://blog.kakaocdn.net/dn/b7j6gV/btq5Syd5zbE/keJ3abDzXi32bHzKduJCA1/img.jpg", "그누보드<br>SIR.KR", "https://daum.net/"];
    imgList_4 = ["https://blog.kakaocdn.net/dn/bQy7RZ/btq5Y9jj9J7/BgHmKBQmpphNpYkfS0qO0k/img.jpg", "그누보드<br>SIR.KR", "https://sir.kr/"];
    imgList_5 = ["https://blog.kakaocdn.net/dn/y9wL8/btq5Yqr6Mfk/QkHrJyuJtTC41fBfWnMsZk/img.jpg", "그누보드<br>SIR.KR", "https://sir.kr/"];
    imgList_6 = ["https://blog.kakaocdn.net/dn/PilbO/btq5TsScxQb/GVfvaGZqc4PLN25sgEKBLk/img.jpg", "그누보드<br>SIR.KR", "https://sir.kr/"];
    imgList_7 = ["https://blog.kakaocdn.net/dn/cKhXce/btq5Ttp4eBk/ZADYMqqTmFkkuwX9Tt55AK/img.jpg", "그누보드<br>SIR.KR", "https://sir.kr/"];
    imgList_8 = ["https://blog.kakaocdn.net/dn/d5MZRr/btq5TrZ5wRz/uIGtc7icn0wmhVpBsa2KsK/img.jpg", "그누보드<br>SIR.KR", "https://sir.kr/"];
    imgList_9 = ["https://blog.kakaocdn.net/dn/bMaFXG/btq5TsScxSU/D6C1UMQ6e2fJezv0rlvmN1/img.jpg", "그누보드<br>SIR.KR", "https://sir.kr/"];
    imgList_10 = ["https://blog.kakaocdn.net/dn/9u24l/btq5TtwUlyZ/ao3o9xmnYWJ977KtV0irAk/img.jpg", "그누보드<br>SIR.KR", "https://sir.kr/"];
    imgList_11 = ["https://blog.kakaocdn.net/dn/bLBwe9/btq5RvIYCwg/GJuD0y78AHG9qa4sEFornk/img.jpg", "그누보드<br>SIR.KR", "https://sir.kr/"];
    imgList_12 = ["https://blog.kakaocdn.net/dn/bmoAru/btq5Y7lvPVC/7nkHZyrt3h8eDBvWjCcCT0/img.jpg", "그누보드<br>SIR.KR", "https://sir.kr/"];
    imgList_13 = ["https://blog.kakaocdn.net/dn/cohhuV/btq5SykVnIL/EXwGM77ss40KLTxvt3m6q1/img.jpg", "그누보드<br>SIR.KR", "https://sir.kr/"];
    imgList_14 = ["https://blog.kakaocdn.net/dn/cHsRIh/btq5Y8kpUBx/2DLWaYAtM1ldFckdP6ODP1/img.jpg", "그누보드<br>SIR.KR", "https://sir.kr/"];
    imgList_15 = ["https://blog.kakaocdn.net/dn/cXP9Wn/btq5Ruwrvsf/FXtbmllQUGsRZdVTO0BCu1/img.jpg", "그누보드<br>SIR.KR", "https://sir.kr/"];
    imgList_16 = ["https://blog.kakaocdn.net/dn/uhsWd/btq5WONZdSe/MmlQhALVNwWWzWz11i9vwK/img.jpg", "그누보드<br>SIR.KR", "https://sir.kr/"];
    imgList_17 = ["https://blog.kakaocdn.net/dn/cPmplq/btq5YrxKFWE/vvEdp4EAOXXXo7zYqILK4k/img.jpg", "그누보드<br>SIR.KR", "https://sir.kr/"];
    imgList_18 = ["https://blog.kakaocdn.net/dn/kIAaG/btq5SxsGf4O/iVAwk9NnzFGJBVumuabQP0/img.jpg", "그누보드<br>SIR.KR", "https://sir.kr/"];
    imgList_19 = ["https://blog.kakaocdn.net/dn/c0ek8U/btq5XKYDp5P/xo9tB3oLTh3GuxlztCKik0/img.jpg", "그누보드<br>SIR.KR", "https://sir.kr/"];
    imgList_20 = ["https://blog.kakaocdn.net/dn/cuzTkp/btq5Y8SfCy9/LyaeKYrnPB06mQsM7ETMNk/img.jpg", "그누보드<br>SIR.KR", "https://sir.kr/"];
    for (imgTotal = 0; this['imgList_' + (imgTotal + 1)]; imgTotal++);
</script>
<style>
    @import url(http://cdn.jsdelivr.net/font-nanum/1.0/nanumbarungothic/nanumbarungothic.css);
    .listDiv { height:100%; font-size:9pt; font-family:'Nanum Barun Gothic'; color:#000000; text-align:center; opacity:0; cursor:pointer; background:linear-gradient(rgba(0,0,0,0) 70%, rgba(255,255,255,0.7) 70%); }
</style>
<div id=imgDiv style=width:720px;overflow:hidden>
    <script>
        document.write("<table style=width:" + (imgDiv.clientWidth + imageGapPixel) + "px cellpadding=0 cellspacing=0>");
        plusList = "</tr><tr><td style=height:" + imageGapPixel + "px></td></tr><tr>";
        for (i = 1; i <= imgTotal; i++) {
            basicList = "<td onclick=window.open('" + this['imgList_' + i][2] + "') style=padding-right:" + imageGapPixel + "px><div id=imgBtn_" + i + " style=background-image:url(" + this['imgList_' + i][0] + ");background-size:100%;border-radius:" + radiusPercent + "%><div class=listDiv onmouseover=style.opacity='1' onmouseout=style.opacity='0' style=border-radius:" + radiusPercent + "%><div id=textDiv_" + i + " style=padding-top:" + textMarginPercent + "%>" + this['imgList_' + i][1] + "</div></div></div></td>";
            if (i % cutNum == 0 && i != imgTotal) document.write(basicList + plusList);
            else document.write(basicList);
        }
        for (i = 1; i <= imgTotal; i++) this["imgBtn_" + i].style.height = this["imgBtn_" + i].clientWidth + 'px';
        document.write("</tr></table>");
    </script>
</div>

결과보기 - http://www.mediaplayer.kr/main/tip/24