javascript or jquery change different Images on different button clicks

Question

I have five buttons when I click on one button one image comes in a div tag again when I click on second button another image should replace that image with a new one and so on. what code should I write to achieve it.

please help me do that. may it be javascript or jquery. I think something to do with onclick event.

score 2 · Answer 1 · answered Jun 29 '13 at 07:54

2

         <div class="imageSelector" />


  $(".btnOne").on("click", function(){

  $(".imageSelector").html("put here the html code of the image")

  })


  $(".btnTwo").....

answered Jun 29 '13 at 07:54

luisZavaleta

1,160
11
21

score 2 · Accepted Answer · answered Jun 29 '13 at 07:55

2

Simple as below,

<script type="text/javascript">
    $(function(){

        $('button').on('click',function(e){
            e.preventDefault();

            var imgSRC = $(this).data('src');

            $('#image').html('<img src="'+imgSRC+'" alt="" />');
        });

    });
</script>

<button data-src="image1.jpg">One</button>
<button data-src="image1.jpg">Second</button>
<button data-src="image1.jpg">Third</button>
<button data-src="image1.jpg">Fourth</button>
<button data-src="image1.jpg">Fifth</button>

<div id="image"></div>

Working DEMO

answered Jun 29 '13 at 07:55

Dipesh Parmar

27,090
8
61
90

yep this is exactly what I wanted. thanks@Dipesh Parmar – Php developer Jun 29 '13 at 08:13
ok what default jquery file I should use. I have used 1.9.1 – Php developer Jun 29 '13 at 10:12
@Phpdeveloper jQuery 1.9 is all that you need – Dipesh Parmar Jun 29 '13 at 10:57

score 0 · Answer 3 · answered Jun 29 '13 at 08:02

OldImage value by default set the first image url and in function NewImage url of new image will be occur which may be id of button..

var oldImage="img.png";
function ImageChange(NewImage)
{
    $("#divId").replace(oldImage,"newImage");
    oldImage=newImage;
}

javascript or jquery change different Images on different button clicks

3 Answers3