Javascript - Change picture and change audio when clicked

Question

Basically, I'm trying to create this thing on my website where when you click a picture, the picture changes. When the picture changes, an audio file says something.

For example, if you have the "That was Easy Button", you click it and it changes to Shia Labeouf and an audio file says "JUST DO IT!".

Does anyone know how to do this, or if you can lead me to the right direction to do something like this?

This is very simple but the stackoverflow guidelines require that you show a basic understanding/attempt to do this. If no one helps that will be why. I suggest doing some Google searches and amending your question. — smcjones, Jun 21 '15 at 20:57

score 0 · Answer 1 · edited May 23 '17 at 10:26

You should use Jquery a Javascript library, this is the code you need, but of course it's better you study something about it so you can expand it:

HTML:

<span class="btn">That was Easy Button</span>

Javascript:

$(document).ready(function() {
    $('.btn').click(function () {
        $(this).html('JUST DO IT!');                
    });
});

PS This only change the text of the button, go ahead and try to add the code to turn on the audio (hint: Play an audio file using jQuery when a button is clicked)

score 0 · Answer 2 · answered Jun 21 '15 at 21:26

Here is an example for you

In this example, an image (from wikipedia) is shown to the user. When user clicks on the image, another one from the list is replaces the previous one. There are 3 images defined and script loops around.

HTML

<div id="clickable">
    <img src="https://en.wikipedia.org/wiki/Sparrow#/media/File:House_Sparrow_mar08.jpg"/>
</div>

JS Code

var data = [ "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/House_Sparrow_mar08.jpg/1024px-House_Sparrow_mar08.jpg",
        "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Ara_ararauna_Luc_Viatour.jpg/1024px-Ara_ararauna_Luc_Viatour.jpg",
        "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Rose-ringed_Parakeet_eating_leaves.JPG/1024px-Rose-ringed_Parakeet_eating_leaves.JPG" ];
var ind = 0;

function swap(){
    ind ++;
    $('#clickable').html('<img src="' + data[ind % 3] + '"/>');
}

$('#clickable').on('click', swap);

swap();

I didn't provide an audio. But this should enough to give you an idea.

My example uses JQuery

Hope it helps.

Javascript - Change picture and change audio when clicked

2 Answers2