랜덤이미지 출력
본문
<!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"}, 로 수정 하면 될거 같습니다.
감사합니다. 덕분에 이미지 위치는 해결하였습니다
그런데 링크는 말씀해주신대로 {src 위에 한줄 넣었더니 이미지가 통채로 나오지를 않네요
뭔가 구문이 깨진듯 합니다
하이퍼링크는 뒤늦게 무슨 말씀인지 이해했습니다
모두 해결했습니다 감사합니다! ^^
링크는 추가 하는게 아니라 수정하는겁니다.
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 를 추가하시구요.
댓글 적어놓고보니 다시 또 친절하게 풀어서 설명해주셨군요. 정말 감사합니다~