Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 164
  • 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

Featured Post

Become an Android App Developer

Ready to kick start your career in 2018? Learn how to build an Android app in January’s Course of the Month and open the door to new opportunities.

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