• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 170
  • Last Modified:

javascript, querystring

<script>
if querystring("id") = "1" then
src="/Images/Design/Header.jpg"
elseif querystring("id") = "2" then
src="/Images/Design/Header2.jpg"
</script>

Open in new window

I have below html codes on the webpage, and I want to apply above codes so it will dynamically loaded the images.
How can I do that in javascript?
<img alt="CaliforniaRentals" border="0" src="/Images/Design/Header.jpg" />

Open in new window

0
CoolDev2014
Asked:
CoolDev2014
1 Solution
 
quizwedgeCommented:
First, you'll need to parse the querystring. There are a few ways to do that, but some are mentioned at http://www.joezimjs.com/javascript/3-ways-to-parse-a-query-string-in-a-url/ Not sure if you need help with that or if you've already got that.

Assuming that ID is the only querystring parameter (that is, your querystring is ?id=123) you can do something as simple as the following:

var id = window.location.search.substr(4);

Open in new window


window.location.search contains the querystring and starts with a ?

Now that you have the id stored as id, the next step is to give your image an id.

Change that to

<img id="header_image" alt="CaliforniaRentals" border="0" src="/Images/Design/Header.jpg" />

Open in new window


To actually change the image src you need the following code

if (id == "1") {
   document.getElementById("header_image").src="/Images/Design/Header.jpg";
} else if (id == "2") {
   document.getElementById("header_image").src="/Images/Design/Header2.jpg";
}

Open in new window


That being said, if you're doing this on load, you'd be better off using whatever server side language you have access to so that the image doesn't load the default header and then change.
0
 
Dave BaldwinFixer of ProblemsCommented:
That being said, if you're doing this on load, you'd be better off using whatever server side language you have access to so that the image doesn't load the default header and then change.
I definitely agree!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now