This Must be Do-able

[Ice3T]

How could I tell the browser that if a picture is not found where I told it to find it, then use another picture.

Does the browser even know it didn't find the picture.
example: I would use an image flip with two images that have been preloaded.


im1= new Image(x,y);
im1.src="someDirectory/somePic1.gif";
im2= new Image(x,y);
im2.src="someDirectory/somePic2.gif";

<img name="imA" src="someDirectory/somePic1.gif" onClick="this.src='im2.src'">

So what I want to do is if there is no "im2.src" because the image is not there, then display someother picture.

Thanks
(This is an important part I need to solve to be able to acheive a greater evil :-)

[havik]

I have code that works in something similar to yours, except if the other image isn't there, it simply won't "switch" the images.

there are a few functions:

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}

var preloadFlag = false;

function preloadImages(){
if (document.images){

// this is the image to change into
test_over = newImage("image changed to url");

preloadFlag = true;
}
}

then, for the image do this:

<a onmouseover="changeImages('test', 'image changed to url'); return true;" onmouseout="changeImages('test', 'default image url'); return true;" href="web page if any" ><IMG src="default image url" border=0 name=test></A>


Hope that helps,

Havik

[Ice3T]

Looks interesting but I fear I dont understant it could you please give a bit of details on what does what, here's what I understand:

the onMousse over part calls a function called changeImages() and passes on 'test' and 'image changed url' to that funtion. The first value ('test' that is) beeing the name given to the image in the <img> tag of html, the secound beeing the url of the image that 'test' will be flipped to (I think)

So my first problem is: if we are passing two values to the function why is there nothing in between the "()" of that function.

I usualy see stuff like:
<input type="text" value="somecrap" onClick="func01(this.value)">
function func01(abc){
window.status=abc
}
Where abc is a name used to passe the value of some crap to its commands.

Second problem I dont know what: if(document.images) means because I dont know what "document.images" IS.

Third I dont see where the first and third functions are called apon, is a part of the script missing.

Finally what is "document[]", is it a predefined Array? or do you use the [] symboles to denote an optional part of the code or a variable that I will need to replace.


As you can tell I am very screwed with this one please shed some light for a newbie like me.

Thanks a bunch.

[havik]

You have the idea down and I'll clue you into the code.

1) no parameters for changeImages(), meaning nothing between the parenthesis
- This is okay since within the changeImages function you have these two lines of code:
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];

The changeImages.arguments.length receives the number of arguments within the brackets, which in this case is two.
The changeImages.arguments[i] receives the value of the first parameter, which in the example is test.
So that line basically looks like:
document['test'].src

This goes on to explain your fourth question. document[] is not an array, it is a way of referencing your objects. The image, as you pointed out, is named 'test'. In order to access that image so that we may "flip" it to another, we must be able to reference it. document['test'].src does this.

if(document.images) is just an error checking code that checks if the browser supports document.images. If so, then the following code will work. Otherwise, the following code won't work properly on the browser.

The third function, preloadImages(), should be called in the body tag like so:
<body onload="preloadImages()">

The first function is called within the preloadImages function, when declaring new Images.

I think that's it. Hope this has been an enlightening experience for you.

Havik