| View previous topic :: View next topic |
| Author |
Message |
Morta
Joined: 23 Apr 2008
Posts: 4
|
 Posted: Wed Apr 23, 2008 2:43 am Post subject: Need help to display an image when button is clicked |
 |
|
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: |
<!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> |
|
|
| Back to top |
|
 |
|
|
rangana
500+ Club
Joined: 27 Feb 2008
Posts: 614
Location: Cebu City Philippines
|
| Posted: Wed Apr 23, 2008 5:27 am Post subject: Re: Need help to display an image when button is clicked |
|
|
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: |
<!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>
|
|
|
| Back to top |
|
|
Morta
Joined: 23 Apr 2008
Posts: 4
|
| Posted: Wed Apr 23, 2008 11:01 am Post subject: Re: Need help to display an image when button is clicked |
|
|
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 |
|
| Back to top |
|
|
rangana
500+ Club
Joined: 27 Feb 2008
Posts: 614
Location: Cebu City Philippines
|
| Posted: Wed Apr 23, 2008 11:09 am Post subject: Re: Need help to display an image when button is clicked |
|
|
...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: |
<!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 |
|
| Back to top |
|
|
Morta
Joined: 23 Apr 2008
Posts: 4
|
| Posted: Wed Apr 23, 2008 6:45 pm Post subject: Now to do it in an array... |
|
|
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: |
<!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> |
|
|
| Back to top |
|
|
rangana
500+ Club
Joined: 27 Feb 2008
Posts: 614
Location: Cebu City Philippines
|
| Posted: Thu Apr 24, 2008 1:35 am Post subject: Re: Need help to display an image when button is clicked |
|
|
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? |
|
| Back to top |
|
|
Morta
Joined: 23 Apr 2008
Posts: 4
|
| Posted: Fri Apr 25, 2008 12:58 am Post subject: Re: Need help to display an image when button is clicked |
|
|
I got it.
Thanks for your help!!  |
|
| Back to top |
|
|
|
