Dynamic image based on url

JavaScript
1

heyyyy, i use to have a code that could basically display a certain image based on the end of the url, does anyone have a code for that? like if the url ends with ?idProduct=255 display image 4 if it ends with ?idProduct=285 display image 2.

2

See what this does for you

function loadBackground() {
    // Split the param var using "=" as the indentifier
    var param = window.location.search, string = param.split('=');
    
    alert(string[1]);
}

window.onload = loadBackground();
3

I need a little more than that can you give me an example that refences two or three images?

4

You have to get the query string and process it manually, or use some kind of querystring library to automate that part for you.

location.search might contain the querystring “?idProduct=255&color=mauve” and it might also contain other things separated by the ampersand. Commonly they are separated by splitting the string in to different parts.

First, we remove the starting question mark


qs = location.search.substring(1),

Then we break it up in to a series of name/value keyword pairs


qsPairs = qs.split('&');

Those pairs will now be as an array:

['idProduct=255', 'color=mauve']

Then you loop through those pairs, breaking them apart again so that you can check for the keyword that you’re interested in.


for (i = 0; i < qsPairs.length; i += 1) {
    split = qsPairs[i].split('=');
    key = split[0];
    value = split[1];
    if (key === 'someKeyName') {
        ...
    }
}

Here it is all put together in a function for you:


function querystringValue(name) {
    var qs = location.search.substring(1),
        qsPairs = qs.split('&'),
        i, split,
        name, value;
    for (i = 0; i < qsPairs.length; i += 1) {
        split = qsPairs[i].split('=');
        key = split[0];
        value = split[1];
        if (name === key) {
            return value;
        }
    }
}

which you can use with:


var productId = querystringValue('idProduct');
5

Once you have the productId, you can use that to reference different values from an array


var productId = querystringValue('idProduct');
products = [];
products[255] = 'image4.png';
products[285] = 'image2.png';

alert('Product ' + productId + ' is image ' + products[productId]);
6

how did you possibly write that reply in less than 4 minutes? lol, anyway the old js code I used did use teh & at the end of the url like… but is there a way to switch images based on the end of the url without the & added on to the end?

7

do I put this in an external file:

function querystringValue(name) {
var qs = location.search.substring(1),
qsPairs = qs.split(‘&’),
i, split,
name, value;
for (i = 0; i < qsPairs.length; i += 1) {
split = qsPairs[i].split(‘=’);
key = split[0];
value = split[1];
if (name === key) {
return value;
}
}
}

and then this in the header?

var productId = querystringValue(‘idProduct’);
products = ;
products[255] = ‘image4.png’;
products[285] = ‘image2.png’;
alert('Product ’ + productId + ’ is image ’ + products[productId]);

8

All of your scripting code should be in an external file.

9

when the page loaded I just got a popup notification saying something like: 255 is image 6.jpg and no image was to be found, how do I place the images in a certain part of the page?

10

One way is to place an empty image placeholder on the page with a id attribute, so that when the page has loaded, you can access that image from javascript by using getElementById and set its src attribute to the image that you need to be shown.

11

exmple code?

12

An example of an image placeholder that’s updated by scripting, is:


<img id="cat" src="">



var catImage = document.getElementById('cat');
catImage.src = 'lolcat.png';
13

ok but how do you implement that with your other code?

14

That entirely depends in the environment in which it will be used.
The examples have been left as generic pieces of code so that you and anyone else can take those examples, and extend them to fit in the specific circumstances in which they will be used.

15

OK I have a DIV element in the header of a website… and I want an image in this div to change based on the url as discussed… so can you give an exmple of code that will do that? I want the header image to change based on the number at the end 255, 285 etc. thanks.

16

Is there a certain relationship between the number at the end and the image?

17

each number i.e. 255 in the url will point to a specific image i.e. image4.jpg is that what you mean? so that on the webpage ending with 255, image4.jpg will be in the header… and when someone clicks on page ending with 285 image54.jpg will be the image displayed in the header

18

Kind of. What I mean is, when the script see you using number 255, how is the script to know to use image4. Or with number 20, or 50, or 54, or 285, or 1024, or 386.

How is the script to know, from any of those numbers, which image to show?

19

I thought this is how it knows,

products[255] = ‘image4.png’;
products[285] = ‘image2.png’;

don’t you specify this in the .js?

20

No, that’s one of the worst places to specify it, because then you will always need to update the script whenever another product comes out.

Why don’t you use image255.png or image285.png, so that you can automatically retrieve that appropriate image whenever another new product is added.