用onClick更改onClick

Question

For a website I am coding, I have an interface where one spot holds 4 images: One for Standard, Hover, Clicked, and Bought. The way it currently works is that when the Standard image is hovered over, it switches to the Hover image. When the Hover image is clicked, it switches to the Clicked image. But I have been struggling to get the Bought image to show up when clicked. Code:

     <script>
        function on1() {
            var x = document.getElementById("1");
            x.src = "Hover1.png"; 
            x.style.width = "31%";
        }   
        function out1() {
            var x = document.getElementById("1");
            x.src = "Item1.png"; 
            x.style.width = "30%";
        }
    </script>
    <img src="Item1.png" width="30%" id="1" 
        onmouseover="on1();" 
        onmouseout="out1();" 
        onclick="this.src = 'Desc1.png';">`

Help would be appreciated

Answer 1

You need to add a function handler for the event as follows:

HTML CODE:

<img src="Item1.png" width="30%" id="1" onclick="updateImage(this)">

JS CODE:

updateImage = function(el){
    el.src = 'Desc1.png';
}

Answer 2

I don't know what "Bought" means actually , but I saw that you're trying to make the initial image from the begining be the one in this "Bought" phase.

So a jquery code should do it :

$(document).ready(function(){
    var initial ='https://pbs.twimg.com/profile_images/587778453937618944/-z_faB4f.jpg';
    var hovering = 'http://www.gettyimages.fr/CMS/Pages/Embed_Frontdoor/StaticContent/hero_travel_482206371.jpg';
    var clicking = 'http://www.menucool.com/slider/prod/image-slider-2.jpg';
    $('#test')
    .attr('src',initial)
    .hover(function(ev){
        $(this).attr('src',hovering);
    })
    .mousedown(function(ev){
        $(this).attr('src',clicking);
    })
    .mouseup(function(ev){
        $(this).attr('src',initial);
    })
    .mouseout(function(ev){
        $(this).attr('src',initial);
    });
});

Here's a fiddle