Jam's story

예제에서 추가된 사항까지 본문

2021-2학기/html+css+javascript

예제에서 추가된 사항까지

애플쩀 2021. 12. 6. 15:12

9-14

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <script type="text/javascript">
        function changeImage(){
            var sel=document.getElementById("sel");
            var img=document.getElementById("myImg");
            var index= sel.selectedIndex; // 선택된 옵션 인덱스: 0, 1, 2
            img.src = sel.options[index].value;
            img.onload=function(){
                var mySpan=document.getElementById("mySpan");
                mySpan.innerHTML=img.width+"x"+img.height;
            }
        }
    </script>
</head>
<body onload="changeImage()">
<form>
    <select id="sel" onchange="changeImage()">
        <option value="C:/media/apple.png">사과</option>
        <option value="C:/media/banana.png" selected >바나나</option>
        <option value="C:/media/mango.png">망고</option>
        <option value="C:/media/strawberry.png" >딸기</option>
    </select>
    <span id="mySpan">이미지크기</span>
</form>
<p><img src="C:/media/banana.png" alt="" id="myImg"></p>
</body>
</html>

9-15

랜덤이미지

<!DOCTYPE html>
<html><head><title>new Image()로 이미지 로딩</title>
<script>
// 배열에 저장된 이름의 이미지들을 미리 로딩
var files = ["C:/media/penguins.png", "C:/media/lighthouse.png",
"C:/media/Chrysanthemum.png", "C:/media/Desert.png",
"C:/media/Hydrangeas.png", "C:/media/Jellyfish.png",
"C:/media/Koala.png", "C:/media/Tulips.png"];
var imgs = new Array();
for(var i=0; i<files.length; i++) { // 8
imgs[i] = new Image(); // 이미지 객체 생성
imgs[i].src = files[i]; // 이미지 로딩
}
// 다음 이미지 출력

function change(img) {
    var index=Math.floor(Math.random()*100);
    index%=imgs.length;
    img.src = imgs[index].src; // 이미지 변경
    index++; // 다음 이미지, 2, …, 7, 8

}

</script></head>
<body>
<h3>new Image()로 이미지 로딩</h3>
<hr>
<p>이미지를 클릭하면 다음 이미지를 보여줍니다.</p>
<img style="border:20px ridge wheat" 
src="C:/media/penguins.png" alt="." width="267" height="200" 
onclick="change(this)" id="myImg">
<button>뒤</button>
</body>
</html>

 

저작자표시

'2021-2학기 > html+css+javascript' 카테고리의 다른 글

내가 실수하고 있는 부분  (0) 2021.12.06
예제 9-15 버튼으로 이전 이후  (0) 2021.12.06
명품 html+css+javascript 7장 실습문제 복습  (0) 2021.12.02
명품 html+css+javascript 10장 실습문제  (0) 2021.11.24
중간고사 시험  (0) 2021.10.21
'2021-2학기/html+css+javascript' Related Articles more
Comments