PDA

View Full Version : isplaying pictures with three buttons to select the one visible.

ssffcc
03-12-2006, 05:44 PM
hi I want to have a page that contains 3 buttons, each button's onclick event displays a different picture

plz help
ssffcc
03-12-2006, 05:52 PM
I have this line, it works as expected, but its width is minimized automatically at runtime, plz help
<button name="fish1" value="fish1" onclick="displayfish1()" type="button" style="width:20" />
ssffcc
03-12-2006, 05:56 PM
oh no, when i click on a button it displays a picture, the picture shows, but the buttons are disappeared, if I want to click on another button, I have to hit return button on IE to show the buttons again, why?
arnyinc
03-12-2006, 06:12 PM
It could be a lot of things depending on your code. Are you using document.write?
Lerura
03-12-2006, 06:13 PM
you do not have a valid button.
it must be like this:
<button type="button" name="something" value="something" onclick="doSomething()" style="something">Text or image to been shown on button</button>
ssffcc
03-12-2006, 06:14 PM
yes, I use:

function displayfish1()
{
document.write('<p><img src="pics/image0011113.gif" width="250" height="270"></p>')
}

functions for 2 other buttons are the same, only the picture source different.
ssffcc
03-12-2006, 06:17 PM
ok, post #2 problem solved by this:

<button name="fish1" value="fish1" onclick="displayfish1()" type="button" style="width:20"> fish1 </button>
now only post #3 problem still there, plz help
ssffcc
03-12-2006, 06:27 PM
well, problem solved by using HTML only:

<button name="fish1" value="fish1" onclick="img1.src='pics/image0011113.gif'" type="button" style="width:20"> fish1 </button>
<button name="fish2" value="fish2" onclick="img1.src='pics/7.bmp'" type="button" style="width:20"> fish2 </button>
<button name="fish3" value="fish3" onclick="img1.src='pics/8.bmp'" type="button" style="width:20"> fish3 </button>

<p><img name="img1" src="pics/ab1.jpg" width="73" height="68" /></p>

is it possible to do this in JS anyway?
Lerura
03-12-2006, 06:29 PM
the problem is that if you use document.write clears the page if use after the page has loaded.
clears the page.

you can hardcode the paragraph and image tags like this:

<p><img id="Picture" src="default.jpg" width="250" height="270"></p>

and then change displayfish() to:function displayfish1()
{
document.getElementById('Picture').src="pics/image0011113.gif";
}
ssffcc
03-13-2006, 08:19 AM
thx for the help, I rewrite the code, but now nothing happens when button is clicked, whats wrong with my code?

the JS:

<script type="text/javascript">
function displayfish1()
{
document.getElementById('fish1').src="pics/image0011113.gif"
}

function displayfish2()
{
document.getElementById('fish2').src="pics/7.bmp"
}

function displayfish3()
{
document.getElementById('fish3').src="pics/8.bmp"
}


</script>

the HTML:

<p><img name="img1" id="fish" src="pics/ab1.jpg" width="73" height="68" /></p>
<button name="fish1" onclick="displayfish1()"> fish1 </button> &nbsp;
<button name="fish2" onclick="displayfish2()"> fish2 </button> &nbsp;
<button name="fish3" onclick="displayfish3()"> fish3 </button> &nbsp;