랜덤 이미지 소스에서 각 이미지별 링크
본문
<!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> 입력해봐도 달라지는게 없던데 어떻게 하면 좋을까요?
시간되시는 고수분 답변 주시면 대단히 감사하겠습니다
답변을 작성하시기 전에 로그인 해주세요.
