Dynamically change a image URL based on a variable

Question

I'm currently displaying a circle graph in a project I'm working on. I'm wanting to update the circle chart by changing the image URL that is displayed, there are 100 unique images each representing one percentage point on the chart. The URLs are set up in such a fashion img/circleGraph/circleG-12.png the number (in this case 12) being the percentage complete that the graph is showing. In JavaScript /jQuery how could I alter the URL that is displayed dynamically, based on a percentage I'm returned from the database?

This is a .Net MVC application that I'm working on, so the percentage complete is returning back to me in a Razor variable as a decimal. I know I would have to multiply this variable by 100 in order to convert to a whole number and then set that as part of the URL, but am unsure on how to approach it.

$('imageID').attr("src", "img/circleGraph/circleG-" + {%} + ".png"); — Shmiddty
– Shmiddty, Commented Oct 1, 2012 at 14:27
Are the URLs all unique like '/img/circleGraph/squareG_12.png', '/img/circleGraph/somethingElseF_12.png', etc etc? — Joe
– Joe, Commented Oct 1, 2012 at 14:29
The only unique portion of the file name is the number. Shmiddty that looks about right going to give it a run. Thanks guys! — Stavros_S
– Stavros_S, Commented Oct 1, 2012 at 15:00

Chase · Accepted Answer · 2012-10-01 14:31:16Z

2

$("img").attr("src", "/img/circleGraph/circleG-" + Math.Round(number*100) + fileExtension);

where number is the number you are returned from the DB and fileExtension is the file extension of the image file (.jpg, .png, etc...) - thanks @Shmiddty for the reminder!

edited Oct 1, 2012 at 14:31

answered Oct 1, 2012 at 14:25

Chase

29.6k1 gold badge52 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Stavros_S Over a year ago

This is a lot like how I figured the implementation would go. Will mark answered once I run it, Thanks!

Chase Over a year ago

Hope it works for ya, if not then let me know and I'll try to help more. Thanks

Stavros_S Over a year ago

I'm getting an error when I compile for trying to run this portion Math.round(@(plan.Progress) * 100) . The @(plan.Progress) is the variable holding the decimal value. It's .Net MVC razor script, not sure if your familiar with that or not.

Stavros_S Over a year ago

Ok so I removed the @ symbol and am no longer getting the compilation error. One last question. I'm running this after the <img> is displayed. I have the src attribute of that image set to img/circleGraph/circleg-0.png as a place holder. Could this cause any hiccups down the road?

Chase Over a year ago

Apologies @Stavros_s, I wasn't able to check SO much yesterday. It looks like you were able to get it all sorted out though =)

|

Collectives™ on Stack Overflow

Dynamically change a image URL based on a variable

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related