그누보드 QA - 랜덤 이미지 소스에서 각 이미지별 링크

랜덤 이미지 소스에서 각 이미지별 링크

2022.09.22 13:54:33 1216 (110.♡.♡.232)

본문



<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <style type="text/css">
        #a, #b, #c, #d {float:left;}{ border: 1px solid gold; border-radius:5px;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px; width: 440px; height: 150px; }
        </style>
        <script type="text/javascript">
        function random_images(args) {
            if (args.node.length == args.imgs.length) {
                args.imgs.sort(function (a, b) { return 0.5 - Math.random(); });
                args.imgs.sort(function (a, b) { return 0.5 - Math.random(); });
                for (var i = 0, i_len = args.node.length; i < i_len; i++) {
                    args.node[i].innerHTML = '


<a href="'+args.imgs[i].href+'">


<img src="' + args.imgs[i].src + '" width="' + args.imgs[i].width + '" height="' + args.imgs[i].height + '" />';
                }
            } else {
                alert("length is not equal");
            }
        }
        
        document.addEventListener("DOMContentLoaded", function () {
            var params = {
                node: [
                    document.getElementById("a"),
                    document.getElementById("b"),
                    document.getElementById("c"),
                    document.getElementById("d")
                ],
                imgs: [
                    {src: "http://amazingiceland.is/sites/default/files/inline-images/take%20a%20trip%20500%20x%20100.png", width: 440, height: 150, href:"http://sir.co.kr"},
                    {src: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/Basmala.svg/500px-Basmala.svg.png", width: 440, height: 150, href:"http://sir.co.kr"},
                    {src: "https://www.dsj.org/wp-content/uploads/2015/01/LightIsOn-PrintAds-500x100.png", width: 440, height: 150, href:"http://sir.co.kr"},
                    {src: "http://www.bmxmafia.com/Images/logos/Mafia_header_footer_images/bmxmafia_logo_500x100.jpg", width: 440, height: 150, href:"http://sir.co.kr"},
                    //{src: "http://www.deech.org.uk/GirtonOperatic/images/logo-banner-500x100-2013.jpg", width: 440, height: 150},
                ]
            };
            random_images(params);
        }, false);
        </script>
    </head>
    <body>
        <div id="a"></div>
        <div id="b"></div>
        <div id="c"></div>
        <div id="d"></div>
    </body>

<section class="idx_cnt">
    <div class="lt_li lt_li_left">
            <!-- 전체 게시판 최신글 -->
        <div class="lt">
            <h2 class="lt_title"><a href="<?php echo G5_BBS_URL ?>/new.php">전체 게시판 최신글</a></h2>
                <?php
                // new_latest('스킨', '출력라인', '글자수', 'is_comment', cache_minute)
                echo new_latest('theme/new_latest', 7, 25, false, 5);
                ?>
            <div class="lt_more"><a href="<?php echo G5_BBS_URL ?>/new.php"><span class="sound_only">전체 게시판 최신글</span>더보기</a></div>
        </div>
    </div>
</html>



 

COMMUNITY라는 테마를 다운 받아 입맛대로 고쳐가며 연습해보는 중입니다



상기 4가지 이미지가 랜덤으로 돌아가면서 구현되게는 도움을 받아 해결하였는데

위 소스에서 각 이미지 링크들이 새창으로 열리게 하려면 어떻게 해야하는건지요?



이미지 뒤 href:"http://sir.co.kr" 뒤에 target='_blank'를 넣어서 해보니 오히려 소스가 깨지는지

이미지가 통채로 사라져버리더라구요 ㅠㅠ

 

 

추가로 아래 최근글 게시판과 이미지칸의 간격을 띄우고 싶은데

줄바꿈에 대해 아는건 <br>뿐이라

</body> 아래에 <br><br> 입력해봐도 달라지는게 없던데 어떻게 하면 좋을까요?

 

시간되시는 고수분 답변 주시면 대단히 감사하겠습니다