JavaScript로 클릭하면 이미지 소스를 어떻게 바꿀 수 있습니까?

동물의 그림을 보여주기 위해 다른 버튼을 클릭 할 때 이미지 소스를 어떻게 바꿀 수 있는지 알아 내려고합니다. 내 JS 코드는 내 HTML 문서의 머리에있는 스크립트 태그 사이에 있습니다. 나는 그것을 아래에 붙여 넣었다. Safari를 사용하고 있습니다.JavaScript로 클릭하면 이미지 소스를 어떻게 바꿀 수 있습니까?

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Welcome</title> 
    <link rel="stylesheet" href="styles.css"> 

    <script> 
    function change(){ 
    document.getElementById("pic").src="./images/lion.jpg"; 
    } 
    </script> 

    </head> 
    <body> 

    <header> 
    <div class="container"> 
    <h1>Choose an Animal</h1> 
    <hr> 
    </div> 
    </header> 

    <section> 
    <div class="container"> 
    <img src="./images/image.jpg" id="pic"> 
    </div> 
    </section> 

    <section id="animals"> 
    <div class="container"> 
    <button type="button" class="button1"  onclick="change">Lion</button> 
    <button type="button" class="button1">Tiger</button> 
    <button type="button" class="button1">Bear</button> 
    </div> 
    </section> 



    </body> 
</html>

출처

2017-12-24 CodeMom

어떤 종류의 오류가 발생하고 있습니까? –

하나 단순히 옵션은 같은에 자바 스크립트를 변경하는 것입니다

function change(index) { 
 
    var imageLookup = ["./images/lion.jpg", "./images/tiger.jpg", "./images/bear.jpg"]; 
 
    document.getElementById("pic").src = imageLookup[index]; 
 
}

당신은 이미지의 목록을 넣으면 배열을 사용하면 각 버튼에서 인덱스 변경 기능을 전달할 수 있습니다.

그림과 같이 사자가 변경 (0), 호랑이 변경 (1) 및 곰 변경 (2) 버튼 기능을 수정하십시오. 라이온스, 호랑이, 곰, 오 마이 ... 이미지로가는 경로가 올바른 경우 전환이 이루어져야합니다.

아직도 고민 중이라면 알려주세요.

출처

2017-12-24 09:58:27 Highdown

JQuery를 사용하는 경우보다 효율적인 방법으로 코드를 작성할 수 있습니다.

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Welcome</title> 
    <link rel="stylesheet" href="styles.css"> 
    </head> 
    <body> 

    <header> 
    <div class="container"> 
    <h1>Choose an Animal</h1> 
    <hr> 
    </div> 
    </header> 

    <section> 
    <div class="container"> 
    <img src="images/lion.jpg" id="pic"> 
    </div> 
    </section> 

    <section id="animals"> 
    <div class="container"> 
    <button type="button" class="button1" data-img="lion.jpg">Lion</button> 
    <button type="button" class="button1" data-img="tiger.jpg">Tiger</button> 
    <button type="button" class="button1" data-img="bear.jpg">Bear</button> 
    </div> 
    </section> 

    <script 
    src="https://code.jquery.com/jquery-3.2.1.min.js" 
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
    crossorigin="anonymous"></script> 

    <script type="text/javascript"> 
    $(function(){ 
     $('.button1').on('click',function(){ 
     var image = $(this).data('img'); 
     $('.container #pic').attr('src','images/'+ image); 
     }); 
    }) 
    </script>

출처

2017-12-24 06:34:29

내가, 컨테이너 DIV에 ID를 할당하고 사업부의 배경이 원하는 이미지 있도록 CSS를 설정해야하는 것입니다 수행하려고 할 수도 있습니다 유사 그런 다음 CSS 배경을 변경할 수 있습니다 js.

<section> 
 
    <div class="container" id="pic"> 
 
    <!-- no img tag needed now --> 
 
    </div> 
 
</section>

여기에서

당신이 JS와 사업부를 잡고 당신의 클릭 기능은 이미지를 변경 같은 작업을 수행해야하지만 대신의 배경 이미지 속성을 변경하여이 일을 할 것입니다 수 있습니다 CSS의 div. 당신이 시작하는

function myFunc() { 
 
    document.getElementById('pic').style.backgroundImage = 
 
    'url(path/to/image.jpg)'; 
 
}

출처

2017-12-24 07:43:56 4cody

JavaScript로 클릭하면 이미지 소스를 어떻게 바꿀 수 있습니까?

답변

관련 문제