CODEWITHSUNDEEP
javascriptjqueryimageloops
holyredbeard
holyredbeard

Reputation: 21218

Changing img source by clicking button

I want to replace the number in the image src (eg. from eyes1 to eyes2) when I click a button. 

moveRightBtn.on('click', function(){
    var eyesImg = $('#eyesImg').get(0).src;
    console.log(eyesImg) // <--- folder/folder/folder/img/eyes1.png

    //iterate with one (eg. eyes1.png to eyes2.png) and change the src?
}

What is the best way to do this?

Upvotes: 0

Views: 92

Answers (5)

Alex
Alex

Reputation: 38519

Just to expand on pmandell answer, you could also keep an increment (if that's what you want to do)

Also, it seems your image has an ID of eyesImg, so I've taken that into account also

var counter = 0;

moveRightBtn.on('click', function(){
    $('#eyesImg').attr('src','folder/folder/folder/img/eyes' + counter + '.png');
    counter++
}

Edit

Here's an example involving cats. Cats always help
http://jsfiddle.net/alexjamesbrown/6Cve9/

Upvotes: 1

Dennis Erfeling
Dennis Erfeling

Reputation: 63

Try this one:

$('#eyesImg').attr('src',$('eyesImg').attr('src').replace('eyes1','eyes2'));

Upvotes: 0

NullPointerException
NullPointerException

Reputation: 3804

Use like this

 var image =  $(this).attr('src');
 //alert(image);
 var newimage = image.replace('1.png','2.png');
$(this).attr('src',newimage );

fiddle

Upvotes: 0

Gabe
Gabe

Reputation: 50493

moveRightBtn.on('click', function(){
    $(this).prop('src','folder/folder/folder/img/eyes2.png');
}

Upvotes: 0

pmandell
pmandell

Reputation: 4328

moveRightBtn.on('click', function(){
    $(this).attr('src','new_src_string');
}

Upvotes: 0

Related Questions