공부/기타

[HTML/JS] 랜덤 배너 출력 및 링크 연결

미친사람 2016. 11. 7. 10:10
반응형

만약 링크로 이동하는 부분을 새창에서 뜨는게 싫다면 target="_blank" 부분을 지우고 이용

 

서식대로 작성하고 원하는곳에 삽입

그럼 랜덤으로 이미지 출력되며 링크까지 삽입된 상태로 출력

그걸 누르면 새창 또는 현재창에서 이동

 

 

<script type="text/javascript">

var randombanner=new Array();

randombanner[0]="<img src=이미지 링크.확장자 alt=설명>";
randombanner[1]="<img src=이미지 링크.확장자 alt=설명>";
randombanner[2]="<img src=이미지 링크.확장자 alt=설명>";

var randomNumber = Math.floor( Math.random() * (randombanner.length) );

document.write('<a href="이미지 클릭시 이동링크" target="_blank">' + randombanner[randomNumber] + ' </a>');

</script>

 

또는 js 파일을 로드하는 방식으로도 가능

 

var banner=new Array();

banner[0]="<a href='URL 링크' target='_blank'><img src='이미지 링크' alt=''></a>";

banner[1]="<a href='URL 링크' target='_blank'><img src='이미지 링크' alt=''></a>";

var random_banner=Math.floor(Math.random()*(banner.length));

 

내용의 js 파일을 만들어주구 html 페이지에서 <!--%import("js/rbanner.js")--> 로 로드

 

<div><script>document.write(banner[random_banner]);</script></div>

 

문구로 출력이 가능하다.

 

 

HTML 예제

<!-- 랜덤배너출력 -->
<script language="JavaScript" type="text/JavaScript">
   var banner = new Array();

    banner[0]="<a href='#'><img src='#' border='0' width='100%' height='100%'></a>";
    banner[1]="<a href='#'><img src='#' border='0' width='100%' height='100%'></a>";
    banner[2]="<a href='#'><img src='#' border='0' width='100%' height='100%'></a>";
  
    var random_banner = Math.floor(Math.random()*(banner.length));
</script>

<script>document.write(banner[random_banner]);</script>

 

 

 

반응형