JavaScript and Images 1

JaneB19 · Jul 23, 2003

Hi,

I'm relatively new to JavaScript, and I don't have a clue how to do the following. Surprisingly enough, otherwise I wouldn't be writing this!

What I'm wanting to do, is show an image when a product name is selected from a comboBox. The images are saved in a file, so even just referencing the file is causing me problems. %-)

Can anybody help me out with this?

Thanks for your time

[PC2]

vbkris · Jul 23, 2003

do this:

at loading time set a default image.
<image name="dr" src="...">
then do this:
document.dr.src="PATH AS PER SELECTION"

if the image tag is within a form tag then:
document.FormName.dr.src="PATH AS PER SELECTION"

Known is handfull, Unknown is worldfull

lillu · Jul 23, 2003

Hi,

This is a nice little script in full.

<html>
<head>
<title>Show image selected in a dropdown box</title>
<script language="javascript">

var Products = new Array('a.gif','b.gif','c.gif','d.gif','e.gif'); //you create an array of images using their name (or path if in different directory)

var preload_Images = new Array(Products.length); // variable that counts how many elements are in the array of 5 images (0 - 4)

for (var i = 0; i < Products.length; i++) // loop through all the elements (0 - 4)
{
preload_Images = new Image(); // creat a new image in each turn, so that each object will hold its specific index number
preload_Images.src = Products; // load the image of the src specified from the Products array
}

</script>
</head>
<body>

<select name="choose_product" onchange="document.images['product'].src=this[this.selectedIndex].value">
<option value="a.gif" selected>Product A</option>
<option value="b.gif">Product B</option>
<option value="c.gif">Product C</option>
<option value="d.gif">Product D</option>
<option value="e.gif">Product E</option>
</select>

<img name="product" src="a.gif">

</body>
</html>

Lillu

If you want to get a job done, ask a busy person. (Sherry Conway Appel - American writer)

http://www.geocities.com/lillamarta

lillu · Jul 23, 2003

Sorry, something went wrong while posting...

Here's the full page.

<html>
<head>
<title>Show image selected in a dropdown box</title>
<script language="javascript">

var Products = new Array('a.gif','b.gif','c.gif','d.gif','e.gif');

var preload_Images = new Array(Products.length);

for (var i = 0; i < Products.length; i++)
{
preload_Images = new Image();
preload_Images.src = Products;
}

</script>
</head>
<body>

<select name="choose_product" onchange="document.images['product'].src=this[this.selectedIndex].value">
<option value="a.gif" selected>Product A</option>
<option value="b.gif">Product B</option>
<option value="c.gif">Product C</option>
<option value="d.gif">Product D</option>
<option value="e.gif">Product E</option>
</select>

<img name="product" src="a.gif">

</body>
</html>

If you want to get a job done, ask a busy person. (Sherry Conway Appel - American writer)

http://www.geocities.com/lillamarta

lillu · Jul 23, 2003

Hi again,

Actually, you don't have to go to such length as to create a new array with indexes.

This will perfectly do:

<html>
<head>
<title>Show image selected in a dropdown box</title>
<script language="javascript">

var Products = new Array('a.gif','b.gif','c.gif','d.gif','e.gif');

for (var i = 0; i < Products.length; i++)
{
document.images['product'].src = Products;
}
</script>
</head>
<body>

<select name="choose_product" onchange="document.images['product'].src=this[this.selectedIndex].value">
<option value="a.gif" selected>Product A</option>
<option value="b.gif">Product B</option>
<option value="c.gif">Product C</option>
<option value="d.gif">Product D</option>
<option value="e.gif">Product E</option>
</select>

<img name="product" src="a.gif">

</body>
</html>

If you want to get a job done, ask a busy person. (Sherry Conway Appel - American writer)

http://www.geocities.com/lillamarta

JaneB19 · Jul 24, 2003

I've had to alter your coding slightly because I'm using it in an ASP.

I've tried using the following code

<html>

<% database connection . . . %>
<script language = "JavaScript">
function changeImage() {

var txtImages = new Array('/ServiceAwards\Images\Misc\Dubarry.jpg','/ServiceAwards\Images\Misc\Bead.jpg','/ServiceAwards\Images\Misc\Kings.jpg');

var preload_Images = new Array(txtImages.length);

for (var i = 0; i < txtImages.length; i++)
preload_Images = new Image();
</script>
<body>
<%do while not rstOption.EOF
If strOptionImage = "" Then strOptionImage = rstOption.Fields("Image&quot

%>
<option value="<%Response.write rstOption.Fields("OptionName&quot

%>"><%Response.write rstOption.Fields("OptionName&quot

%>

<td><img name=txtImages" src="<%=Request.ServerVariables("SERVER_NAME&quot

%><%=strOptionImage%>">
<%
'i = i + 1
rstOption.close
End If
%>
</td>
</body>
</html>

I'm not getting any errors, but it's not showing the images either! Are there any reasons you know of why this would happen? Probably my bad coding!

Thanks
Jane

[PC2]

vbkris · Jul 24, 2003

try this:
<img name=txtImages" src="<%=server.mappath(strOptionImage)%>">

Known is handfull, Unknown is worldfull

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

JavaScript and Images 1

JaneB19

Technical User

vbkris

Programmer

lillu

Technical User

lillu

Technical User

lillu

Technical User

JaneB19

Technical User

vbkris

Programmer

Similar threads

Part and Inventory Search

Sponsor