Need help to display an image when button is clicked

by **Morta** on Wed Apr 23, 2008 1:43 am

Hi-
I want my image to display when the button is clicked. When I put the image source in the HTML portion of the code, it always displays.
When I try to access it from the JS portion of the code, I can't.
Can someone please rewrite this code so that it will work and I will then know how to do it?
Thank you.....

Code: Select all: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1 transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Myimage</title> <script type = "text/javascript"> function showImg() { var myimg = document.images["image01"] //first image } </script> </head> <html> <body> <img name="image01" src="9.jpg" width="200" height="128" border="0" value= "Show image"> <input type="button" onclick = "showImg()" > </html> </body> </html>

by **rangana** on Wed Apr 23, 2008 4:27 am

First of all, you had a number of deprecated attributes

Secondly, you are using XHTML...which means name is deprecated too

Third, img has no value attribute

This fix also includes your JS...See if it helps

Code: Select all: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1 transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Myimage</title> <style type="text/css"> img{width:200px;height:128px;border:0;} </style> <script type = "text/javascript"> function showImg() { var image = document.getElementById('image01'); image.src='newImage.jpg'; //first image } </script> </head> <html> <body> <img id="image01" src="9.jpg"> <br/> <input type="button" onclick = "showImg()" value= "Show image"> </html> </body> </html>

by **Morta** on Wed Apr 23, 2008 10:01 am

Hi- thanks for the reply.
What does deprecated mean?

Your code has the same problem that mine does, that the image is displayed before the button is clicked.

There must be a way to define were the src of the image is in the JS portion of the code, because when it is defined in the HTML, it always shows.

Thanks-
M

by **rangana** on Wed Apr 23, 2008 10:09 am

...So you want the image to show just right after the button is pressed?..

If so, then this script will do it for you

Code: Select all: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1 transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Myimage</title> <style type="text/css"> img{width:200px;height:128px;border:0;} .show{display:block;} .hide{display:none;} </style> <script type="text/javascript"> function showImg() { var obj=document.getElementById('image01'); obj.className = 'show'; } </script> </head> <html> <body> <img id="image01" src="9.jpg" class="hide"> <br/> <input type="button" onclick = "showImg()" value= "Show image"> </html> </body> </html>

...When I say deprecated, it means that you had been using attributes that is outdated and which doesn't conform witht the w3's standard

...No worries, the script above does'nt have deprecated attributes

See if it helps

by **Morta** on Wed Apr 23, 2008 5:45 pm

I've set up an image preload function.
I've also set up an image array, but am not sure that I did it right.

I don't know how to access the specific images, can you help me?

Code: Select all: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1 transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>array2</title> <style type="text/css"> img{width:200px;height:128px;border:0;} </style> <script type = "text/javascript"> function preloader() { imageObj = new Image(); // create object images = new Array(); { // create array images[i] = ["9.jpg" ,"10.jpg" ,"8.jpg" ,"7.jpg"] // set image array } // start preloading for(var i=0; i<=3; i++) { imageObj.src=images[i]; } } function showImg() { var myimg = document.getElementById("image01").src document.getElementById("image01").style.display="block"; } preloader() </script> </head> <html> <body> <img id="image01" src="10.jpg" style="display:none" > <br/> <input type="button" onclick = "showImg()" value= "Show image"> </html> </body> </html>

by **rangana** on Thu Apr 24, 2008 12:35 am

So...what do you want to achieve (really)..I'm totally confused

...You want three different image to show every onclick?....do you want random?...or just basing on the arrangement of the images in the array?

by **Morta** on Thu Apr 24, 2008 11:58 pm

I got it.
Thanks for your help!!

Need help to display an image when button is clicked

Need help to display an image when button is clicked

Now to do it in an array...

Who is online