Solved

javascript, querystring

Posted on 2014-02-25
3
155 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
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 82

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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
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…

746 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now