johnlod
01-03-2004, 11:30 PM
Hi folks
Based on the fact I cannot find an example of this anywhere, I suspect I am trying to do something unusual. However I cannot believe it is not possible.
Essentially I have a html file with a table. In one table element, the user selects from a list of pictures they would like to see. What I want to do is that their selected picture appear in the next table element.
I have included the html and javascript files below. I have tried for several hours to get it going but to no avail.
Essentially I have 2 problems. My first problem is how to get anything to appear in the 2nd table element based on the user's interaction with the select menu housed in the first table element. At present I cannot even get text to appear in the 2nd table element.
My second problem is how to get this 2nd table element to show an image. Is "document.write" the best way to do this. I need to be able to control the image size so that it fits neatly in the element window.
Thanks in advance for any help.
John
html file
======
<script type="text/javascript"
language="javascript"
src="test.js">
</script>
<!-- This is the text of the page -->
<body>
<div id="cust-details">
<form method="print"
name="cust_selection"
>
<fieldset>
<legend>Step 1: Please select a picture.
</legend>
<table>
<tr>
<td><p> Select your choice from the following menu </p>
<select name="painting">
<option value="None">
Select a Painting
<option value="Dancers">
Dancers
</option>
<option value="Fathers Blessings">
Fathers Blessings
</option>
</select>
</td>
<td> ** I WANT THE IMAGE TO APPEAR HERE **
</td>
</tr>
</table>
</fieldset>
</form>
</div>
</body>
Javascript file
---------------
function showPic(frm)
{
var selection = frm.options[frm.selectedIndex].value
if(selection == "None")
{ document.write("<img src='Dancers-New.jpg'
alt='Dancers'
width='75'
heigth='50' \/>")
}
else if(selection == "Dancers")
{ document.write("<img src='Dancers-New.jpg'
alt='Dancers'
width='75'
heigth='50' \/>")
}
else if(selection == "Fathers Blessings")
{ document.write("<img src='Fathers Blessings.jpg'
alt='Fathers Blessings'
width='75'
heigth='50' \/>")
}
}
Based on the fact I cannot find an example of this anywhere, I suspect I am trying to do something unusual. However I cannot believe it is not possible.
Essentially I have a html file with a table. In one table element, the user selects from a list of pictures they would like to see. What I want to do is that their selected picture appear in the next table element.
I have included the html and javascript files below. I have tried for several hours to get it going but to no avail.
Essentially I have 2 problems. My first problem is how to get anything to appear in the 2nd table element based on the user's interaction with the select menu housed in the first table element. At present I cannot even get text to appear in the 2nd table element.
My second problem is how to get this 2nd table element to show an image. Is "document.write" the best way to do this. I need to be able to control the image size so that it fits neatly in the element window.
Thanks in advance for any help.
John
html file
======
<script type="text/javascript"
language="javascript"
src="test.js">
</script>
<!-- This is the text of the page -->
<body>
<div id="cust-details">
<form method="print"
name="cust_selection"
>
<fieldset>
<legend>Step 1: Please select a picture.
</legend>
<table>
<tr>
<td><p> Select your choice from the following menu </p>
<select name="painting">
<option value="None">
Select a Painting
<option value="Dancers">
Dancers
</option>
<option value="Fathers Blessings">
Fathers Blessings
</option>
</select>
</td>
<td> ** I WANT THE IMAGE TO APPEAR HERE **
</td>
</tr>
</table>
</fieldset>
</form>
</div>
</body>
Javascript file
---------------
function showPic(frm)
{
var selection = frm.options[frm.selectedIndex].value
if(selection == "None")
{ document.write("<img src='Dancers-New.jpg'
alt='Dancers'
width='75'
heigth='50' \/>")
}
else if(selection == "Dancers")
{ document.write("<img src='Dancers-New.jpg'
alt='Dancers'
width='75'
heigth='50' \/>")
}
else if(selection == "Fathers Blessings")
{ document.write("<img src='Fathers Blessings.jpg'
alt='Fathers Blessings'
width='75'
heigth='50' \/>")
}
}