DIV 배경이미지를 자바스크립트로 랜덤 제어 예



배경이미지 변경하기 예제를 통해 DIV사용법 및 CSS 배경설정 속성 학습, 자바스크립트 난수발생 함수 등을 학습 해 보도록 하겠습니다.

추가로 자바스크립트 배열도 사용하게 됩니다.


학습내용

- DIV 영역 CSS를 통한 배경 설정 하기

- 자바스크립트 난수 발생 함수를 통한 이미지 선택하기

- DIV 태그 설정 id를 통한 배경 이미지 경로 변경하기


소스 

<!DOCTYPE html> 

<html>

<head>

  <title>테스트</title>

  <script>

    var fileNm  = ['이미지1.png', '이미지2.png', '이미지3.png'];


    function imgChange(){

      var url = "url(" + fileNm[Math.floor(Math.random() * 3)] + ")";

      document.getElementById("bgGround").style.backgroundImage = url;

    }

  </script>

</head>

<body>

  <div id="bgGround" style="width:100%; height:500px; background-color:#464646; background-repeat:no-repeat; background-position:center;"></div>

  <br>

  <input type="button" value="이미지 변경" onclick="imgChange();" />

</body> 

</html>


소스설명

background-color:#464646 배경색상을 설정 합니다.    

background-repeat:no-repeat 배경에 이미지를 반복해서 표시하지 않도록 설정 합니다.       

background-position:center 배경이미지를 가운데로 정렬합니다.    


var fileNm  = ['이미지1.png', '이미지2.png', '이미지3.png'] 이미지 경로 값을 담은 배열을 생성합니다.     

Math.floor(Math.random() * 3) 0~2까지의 난수를 발생 시킵니다.          

document.getElementById("bgGround").style.backgroundImage  div 설정 id값으로 해당 객체에 접근하여 배경이미지 값을 변경 합니다.   


실습

- 이미지1

DIV배경이미지1


-이미지2

DIV배경이미지2


-이미지3

DIV배경이미지3


- DIV 영역(배경이미지가 변경 될 영역)



클릭하게 되면 난수를 발생하여 랜덤으로 DIV의 배경이미지가 변경 되는 것을 확인 할 수 있습니다.


Posted by JOY [바가지]

댓글을 달아 주세요

  1. 잉여토기 2018.05.26 07:58 신고  댓글주소  수정/삭제  댓글쓰기

    버튼을 누르니 정말 이미지가 변경되네요. 신기해요.

  2. *저녁노을* 2018.05.26 08:04 신고  댓글주소  수정/삭제  댓글쓰기

    잘 배워갑니다.

    즐거운 주말 되세요^^

  3. Deborah 2018.05.29 02:09 신고  댓글주소  수정/삭제  댓글쓰기

    오.. 정말 잘 하셨네요. 좋은 예제와 더불어 설명 잘 해주셨어요.

  4. nsj 2018.07.03 15:26  댓글주소  수정/삭제  댓글쓰기

    바탕화면에 저장되어 있는 이미지를 적었는데 적용이 안됩니다 이런 경우에는 어떻게 해야하나요??

    • JOY [바가지] 2018.07.03 15:56 신고  댓글주소  수정/삭제

      html파일도 바탕화면에 저장하고 하시면 됩니다 저장경로(폴더)가 다를경우 이미지 경로를 설정하시면 됩니다 예를들어 fileNm에 c:/User/Desktop/이미지1.png 로 설정하면 됩니다 경로는 파일 속성 보기를 통해 확인가능합니다~

  5. nsj 2018.07.04 22:46  댓글주소  수정/삭제  댓글쓰기

    파일 경로도 추가해서 해봤는데 안되는 경우는 어떡해야하나요..??
    혹시 이미지 url을 적용해서도 할 수 있나요?
    또한 랜덤이 아니라 순서대로 바꾸려면
    var url="url(" + fileNm[Math.floor(Math.random() * 3)] +")";
    이 부분을 var url ="url("+fileNm[Math.floor]")"; 로 바꾸면 될까요?

    위에 올리신 코드를 그대로 해봐도 안됩니다ㅠㅠㅠㅠ

    • JOY [바가지] 2018.07.05 01:15 신고  댓글주소  수정/삭제

      Math.floor 는 소수점내림 함수 입니다. 즉 랜덤함수를 통해 값이 1.2231 로 나왔다면 이 값을 1로 변경 해 줍니다. 따라서 fileNm[1]값 즉 이미지1.png 경로로 설정 하게 됩니다.
      URL은 웹환경(웹서버)에 올려져 있는 경우 가능합니다. 자신의 PC에 저장된 이미지라면 웹브라우저로 이미지를 드래그 해 보세요 그러면 이미지가 브라우저에 보이고 주소창에 해당 파일의 경로가 보일 것 입니다. 그 경로 정보를 var fileNm = ['이미지1.png', '이미지2.png', '이미지3.png'] 이곳에 넣어 보세요 ^^
      혹, 그래도 안되고 예제 파일(html) 및 이미지 가 필요하시면 메일로 보내 드리겠습니다.

  6. 2018.07.05 17:31  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • JOY [바가지] 2018.07.06 00:17 신고  댓글주소  수정/삭제

      자세한 설명은 메일로 보내 드렸습니다.
      대부분 오타 인것으로 보입니다.
      funtion → function
      getElementByld → getElementById
      aabb는 Name → aadd 가 ID값이네요.^^