CODEWITHSUNDEEP
jqueryhtmlcss
Chris
Chris

Reputation: 949

Dissecting the img src attribute

I am using jQuery to display an image on a click. This works fine by storing the source of the image into a variable like so..

var theSrc = $(event.target).attr('src');

I can then put this image into a div and display it

var theImg = '<div class="wrap"><img src="'+imgSrc+'"></div>';

What I would like to do, would be to simply alter the source of the image slightly to a larger file in the same directory that is bigger by appending "Big" to the name

image.png

to

imageBig.png

Is this possible using jQuery?

Upvotes: 1

Views: 928

Answers (4)

Michael Geary
Michael Geary

Reputation: 28870

I would just use .replace() - it's simpler than .split() for this use:

var theSrc = $(event.target).attr('src').replace( '.png', 'Big.png' );

Also a suggestion: I would eliminate noise words like the from your variable names. Instead of theSrc, use src. Instead of theImg, use img. The word the doesn't communicate anything at all and has no value in a variable name. It actually has negative value, because it's extra stuff to read that doesn't add any meaning to the simpler name.

Upvotes: 4

user1864610
user1864610

Reputation:

Not with jQuery, but you can do it with Javascript:

var temp = imgSrc.split('.');
var newSrc = temp[0]+'Big.'+temp[1];

Upvotes: 1

tymeJV
tymeJV

Reputation: 104785

You can do something like:

var theSrc = $(event.target).attr('src');
theSrc = theSrc.split(".")[0] + "Big." + thetheSrc.split(".")[1];

Upvotes: 6

Brian Mains
Brian Mains

Reputation: 50728

Sure:

$("img").attr("src", "imageBig.png");

See the JQuery documentation: http://api.jquery.com/attr/#attr2 There are multiple flavors of attr that you can use.

To do it dynamically, see @tymeJV's post, which will work as long as there is only one period in the file name.

Upvotes: 2

Related Questions