랜덤이미지 출력

랜덤이미지 출력

QA

랜덤이미지 출력

답변 2

본문


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <style type="text/css">
        #a, #b, #c, #d { 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 = '<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},
                    {src: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/Basmala.svg/500px-Basmala.svg.png", width: 440, height: 150},
                    {src: "https://www.dsj.org/wp-content/uploads/2015/01/LightIsOn-PrintAds-500x100.png", width: 440, height: 150},
                    {src: "http://www.bmxmafia.com/Images/logos/Mafia_header_footer_images/bmxmafia_logo_500x100.jpg", width: 440, height: 150},
                    //{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>
</html>

 

어떤 분이 올려놓으신 소스를 가지고 공부하고 있는 중입니다

위에 나오는 이미지를 두개씩 좌우로 나오게 해보려고 합니다

 

float 이라는 속성으로 이미지 위치를 조절하는 것 같은데

위 소스 중에 어느 위치에 넣으면 되는지,

float 이라는걸 사용하는게 맞는지

초보에게 답변 주시면 대단히 감사하겠습니다

 

추가로, 각 이미지에 링크를 넣으려고 하면 <a href> 를 어디에 넣으면 되는건가요?

 

  imgs: [
                    {src: "http://ㅇㅇㅇㅇㅇㅇ

 

이 부분을 

<a href="네이버"><img src="ㅇㅇㅇㅇㅇㅇ"></a>

이런식으로 바꿔도 되나요?

이 질문에 댓글 쓰기 :

답변 2


이미지 위치는 상단 <style> 에서 
#a, #b {float:left;}
#c, #d {float:right;}
추가하시고 


링크는 
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 + '" /></a>';
{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"},
로 수정 하면 될거 같습니다.

링크는 추가 하는게 아니라 수정하는겁니다. 

args.node[i].innerHTML = '<img src="' + args.imgs[i].src + '" width="' + args.imgs[i].width + '" height="' + args.imgs[i].height + '" />';

이 부분을 

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 + '" /></a>';
로 
{src: "http://amazingiceland.is/sites/default/files/inline-images/take%20a%20trip%20500%20x%20100.png", width: 440, height: 150},

이 부분을 

{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"},
로 
수정해보세요

 

물론 

imgs: [ 에 있는 배열들에 전부 위에처럼 href 를 추가하시구요.
답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 773
© SIRSOFT
현재 페이지 제일 처음으로