Loading Image without refreshing

[BN]

Hello..

Is it possible to load and show a JPG file using Javascript...?

I have a HTML document, and want to load a new image when the user pushes a
button.

Thanx..

--


Best Regards,

BN - [E A Rosengrens AS]

 

[Michael Winter]

Is it possible to load and show a JPG file using Javascript...?

I have a HTML document, and want to load a new image when the user
pushes a button.

Do you mean you want to change the source (src attribute) of an existing
IMG element when a user presses a button? If so, then yes, it can be done
as long as you accept the fact that a user with JavaScript disabled cannot
use this feature in your page.

Place this somewhere before the button below (HEAD or BODY):

<SCRIPT type="text/javascript">
function changeImage( element, URI ) {
var img = null;

if( document.getElementById ) {
img = document.getElementById( element );
} else if( document.all ) {
img = document.all[ element ];
}
if( img ) {
img.src = URI;
}
}
</SCRIPT>

In the BODY of your document:

<IMG id="giveMeAUniqueID" src="initialImage.jpg">
...
<BUTTON type="button"
onclick="changeImage('giveMeAUniqueID','newImage.jpg')"

Change image</BUTTON>

replacing the two filenames and the ID name with your own values.

This will only allow the image to be changed once. Cycling between two or
more images, in sequential or random order, is equally possible, but as
you didn't ask for it, you're not getting it[1].

Mike


[1] Obviously, ask if you do need such a feature.

 

[BN]

Thanx, I will try this..

Is there also a way of handeling if the file does not excist...?

or to be exact:

My filenames consist of 2 or 4 characters. If a button loads the picture
2341.jpg and that image does not excist at the moment, I want 2300.jpg to be
loaded. And if 4356.jpg does not excist, I want to load 4300.jpg. ( The
first two bytes of the name + 00 )

--


Best Regards,

BN - [E A Rosengrens AS]

Is it possible to load and show a JPG file using Javascript...?

I have a HTML document, and want to load a new image when the user
pushes a button.

Do you mean you want to change the source (src attribute) of an existing
IMG element when a user presses a button? If so, then yes, it can be done
as long as you accept the fact that a user with JavaScript disabled cannot
use this feature in your page.

Place this somewhere before the button below (HEAD or BODY):

<SCRIPT type="text/javascript">
function changeImage( element, URI ) {
var img = null;

if( document.getElementById ) {
img = document.getElementById( element );
} else if( document.all ) {
img = document.all[ element ];
}
if( img ) {
img.src = URI;
}
}
</SCRIPT>

In the BODY of your document:

<IMG id="giveMeAUniqueID" src="initialImage.jpg">
...
<BUTTON type="button"
onclick="changeImage('giveMeAUniqueID','newImage.jpg')"

Change image</BUTTON>

replacing the two filenames and the ID name with your own values.

This will only allow the image to be changed once. Cycling between two or
more images, in sequential or random order, is equally possible, but as
you didn't ask for it, you're not getting it[1].

Mike


[1] Obviously, ask if you do need such a feature.

 

[Michael Winter]

Is there also a way of handeling if the file does not excist...?

Not that I know of[1].

Mike


[1] That doesn't necessarily mean there isn't a way.

 

[Brynn]

You would have to use server side coding to do this .. like asp.

Thanx, I will try this..

Is there also a way of handeling if the file does not excist...?

or to be exact:

My filenames consist of 2 or 4 characters. If a button loads the picture
2341.jpg and that image does not excist at the moment, I want 2300.jpg to be
loaded. And if 4356.jpg does not excist, I want to load 4300.jpg. ( The
first two bytes of the name + 00 )

--


Best Regards,

BN - [E A Rosengrens AS]

Is it possible to load and show a JPG file using Javascript...?

I have a HTML document, and want to load a new image when the user
pushes a button.

Do you mean you want to change the source (src attribute) of an existing
IMG element when a user presses a button? If so, then yes, it can be done
as long as you accept the fact that a user with JavaScript disabled cannot
use this feature in your page.

Place this somewhere before the button below (HEAD or BODY):

<SCRIPT type="text/javascript">
function changeImage( element, URI ) {
var img = null;

if( document.getElementById ) {
img = document.getElementById( element );
} else if( document.all ) {
img = document.all[ element ];
}
if( img ) {
img.src = URI;
}
}
</SCRIPT>

In the BODY of your document:

<IMG id="giveMeAUniqueID" src="initialImage.jpg">
...
<BUTTON type="button"
onclick="changeImage('giveMeAUniqueID','newImage.jpg')"

Change image</BUTTON>

replacing the two filenames and the ID name with your own values.

This will only allow the image to be changed once. Cycling between two or
more images, in sequential or random order, is equally possible, but as
you didn't ask for it, you're not getting it[1].

Mike


[1] Obviously, ask if you do need such a feature.

I participate in the group to help give examples of code. I do not guarantee the effects of any code posted. Test all code before use!

Brynn
www.coolpier.com