Solved

javascript, querystring

Posted on 2014-02-25
3
160 Views
Last Modified: 2014-03-12
<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
Comment
Question by:CoolDev2014
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 14

Accepted Solution

by:
quizwedge earned 500 total points
ID: 39887546
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
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39887551
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

Transaction Monitoring Vs. Real User Monitoring

Synthetic Transaction Monitoring Vs. Real User Monitoring: When To Use Each Approach? In this article, we will discuss two major monitoring approaches: Synthetic Transaction and Real User Monitoring.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
The most up-to-date version of this article is on my Blog https://iconoun.com/blog/
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

687 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question