image syntax help

[habib]

Hi All!

I want to check if an image already exists in a certain directory (../images/eu/image_name.jpg, eu = cookie value), and if it doesn't exist then use a default image from another directory (../images/image_name.jpg)

I have created the function below and this works fine.

function f_change_image(image_name) {
var picture="";
var cookieVal=getCookie('home_location');
picture = "../images/" + cookieVal + "/" + image_name;
return "<img src=" + picture + ">";
}

I now want to check for the image if it exists but I'm not sure if this is the right syntax

if (!picture="") {
picture = "../images/" + image_name;
}

If anyone knows of the correct syntax that would be great!

Thanks
HR

[beetle]

You have to create a new image object, and then check the onerror event of that image, this is the only way that I know of to test for it's existence.

function f_change_image(image_name) {
var picture= new Image();
var cookieVal=getCookie('home_location');
picture.src = "../images/" + cookieVal + "/" + image_name;
picture.onerror = function() { this.src = "../images/" + image_name; }
return "<img src=" + picture.src + ">";
}

That *should* work, plus has the added benfit of loading the image before you use it. Question, how come you are returning the image as HTML?

[habib]

Hey Beetle,

Thanks for the reply, it sort of works. Where there is an image available it displays the image, but when there is no image found and the default image should be displayed, i get an error - the image is not shown, when i right-click and check properties it points to the cookieVal path, path is:

../images/UK/image_name.jpg

instead of

../images/image_name.jpg

I'm confused!

[beetle]

Stick these alerts in and tell me what they yield...

function f_change_image(image_name) {
var picture= new Image();
var cookieVal=getCookie('home_location');
picture.src = "../images/" + cookieVal + "/" + image_name;
picture.onerror = function() { this.src = "../images/" + image_name; alert(this.src);}
alert(picture.src);
return "<img src=" + picture.src + ">";
}

[habib]

When cookieVal is UK and an image exists in ../images/uk/image1.jpg
the error message is:
file:///web/images/uk/image1.jpg

When cookieVal is EU and an image exists in ../images/EU/image1.jpg
the error message is:
file:///web/images/eu/image1.jpg

But when cookieVal is US and no image exists in
../images/US/image1.jpg
the error message is:
file:///web/images/us/image1.jpg

[beetle]

file:/// ???

Do you have a host setup on your machine? Coz this doesn't look right. You need to be running PWS or IIS or Apache or something to do properly....I'm not real experienced in this area but I know enough to say that doesn't look right...I would expect something like: http://localhost/images....

[habib]

sorry!

typo error should be //

[beetle]

Hmm, so you aren't getting the alert from within the onerror function?

you may need to use the onload event for the picture to send the return value...

What exactly is this function doing? It's labeled 'change_image' but that doesn't look like what it's doing...it looks instead like it's creating HTML for a new image....

[habib]

I have just uploaded it to the web server and where there is an image available it alerts the path of the image and displays the image, but where an image is not available, it outputs two alerts:

first alert:

http://wwwroot/images/uk/image_name.jpg

and the second alert:

http://wwwroot/images/image_name.jpg

but it doesnt display the image

[beetle]

I'd really like to know exactly what this function is supposed to be doing...is it really for an image swap of some sort?

[habib]

yes it is. The function retrieves a cookie value, then depending on the cookie value it displays an image. What I am trying to achieve is when a user enters a site, if they enter for the first time, there is no cookie set so a default image is used. This image will be stored as default.jpeg in the images folder. When the user comes back to the site again, the cookie is retrieved and depending on the cookie value a different image is used.

For example:

User enters site first time, default settings are English (UK), Currency = GBP, Images are UK specific. User selects country of residence as France, cookie value is set to FR, settings change accordingly - Language French, Currency - Euros, Images will now be FR specific. User leaves site and then comes back to site a week later and sees the site in FR settings.

Am I still confusing you or does it make a bit more sense?

Going back to your question on why it is output as HTML, when I was creating and testing the function HTML output worked so I left it as HTML. If you can suggest a much better and simpler method this would be great - Im open to suggestions.

[beetle]

Ya, I do have a better idea. First..make a small transparent gif to use as a placeholder until the cookie can be read and the script determines which image is appropriate...

function f_change_image(img) {
var pic = new Image();
var cookieVal=getCookie('home_location');
pic.src = "../images/" + cookieVal + "/" + img.name;
pic.onerror = function() { this.src = "../images/" + image_name; }
pic.onload = function() { img.src = this.src; }
}

<img name="whatever.jpg" src="trasnparent.gif" onLoad="f_change_image(this);">