クリックすると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

どのようなエラーが表示されますか？ –

単にオプションあなたが始めるための一つのようなものにあなたのJavaScriptを変更することです：あなたがイメージのリストを置く場合

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

私は何をしようとするかもしれませんが、同様あなたがしてCSSの背景を変更することができ、コンテナのdivにIDを割り当て、DIVの背景が必要なイメージになるように、あなたのCSSを設定していることであろうjsで支えなさい。ここから

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

あなたはJSでのdivをつかむことができ、あなたのクリック機能はの背景画像のプロパティを変更することにより、画像を変更するが、それは代わりに、これを実行されるのと同じタスクを実行していますCSSのdiv。

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

出典

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

クリックするとJavaScriptで画像ソースを変更できますか？

答えて

関連する問題