javascript, querystring

CoolDev2014
CoolDev2014 used Ask the Experts™
on
<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

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
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.
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
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!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial