View Full Version : link and display images from a dropdown list

07-22-2002, 03:27 AM
I am trying to create a Select (dropdown list) that will display images that are linked to each Select option. Furthermore, the images must have a mouseover that displays a message in the status bar and be clickable to an outside link.

When I load my script, the Select list displays and an image displays. But, when I mouseover the image, I get this message: window.document.picture has no property indexed by '4'.

Secondly, I can't seem to link the images to the dropdown list properly. Nothing happens when I choose an option. I think I'm calling the wrong function for the onChange. Or, I don't have the options named properly.

I have attached my script. I would appreciate it if you can offer some insight.


07-22-2002, 10:32 AM
I rewrote the script (attached). The images are now linked to the dropdown list.

However, I have two different sets of problems.

Netscape 3x:
1. When the option is changed, the image stacks on top of the previous one.
2. Status message doesn't display.
3. Clicking the link results in a "file not found; null" type of error.

IE 5.5:
1. Status message doesn't display.

see source of page at : http://www.geocities.com/bevcuria/342

07-22-2002, 10:33 AM
Sorry, the script is NOT attached. Please ignore the first file that I uploaded. It has been rewritten.

However, please view the source code at

07-22-2002, 10:47 AM
Try changing status to window.status

07-22-2002, 10:51 AM
I changed the status to window.status. No good. Still have same problems.

07-22-2002, 10:56 AM
Well, lets see here...

Yuo forgot to send the status changer the selectedIndex... You have to do that in every function, not just the images one.

This includes the link function.

Now as for your onmouseOut problem, I would probably just set a function...

function mout()
window.status=" "

and in your link area.....


Hope that helps :thumbsup:

07-23-2002, 02:27 AM
Hi Beverley...

All the errors I ran into were being generated by that geocities debris at the bottom. Cleaned that up & it worked wonders.

Netscape 3? My recommendation: faggedaboutit.
Navigator 4 is on its last legs - we hope. You have better ways to spend you time (DOM? XML?).

A few suggestions:

<TITLE>Assignment 3, Exercise 2</TITLE>
<base href="http://www.geocities.com/bevcuria/">
<script type="text/javascript">

if (document.images) {
var picture = new Array();
picture[0] = new Image();
picture[0].src = "images/me.gif";

picture[1] = new Image();
picture[1].src = "images/myaunt.gif";

picture[2] = new Image();
picture[2].src = "images/brother.gif";

var URL= new Array();
URL[0] = "http://www.stc-siliconvalley.org/";
URL[1] = "http://sislands.com/coin70/week3/crossword.htm";
URL[2] = "http://www.utah.com";

var Msg = new Array();
Msg[0] = "I am a member of STC. Click here to find out more about the Silicon Valley Chapter of STC.";
Msg[1] = "Auntie likes crossword puzzles, and Frank has a cool one here.";
Msg[2] = "My brother lives in Salt Lake City. Check it out!";

function rotate(which) {
if (document.images) document.pix.src = picture[which].src;

function jumpto() {
location.href = URL[document.mygallery.mySelect.selectedIndex];

function displayMsg() {
window.status = Msg[document.mygallery.mySelect.selectedIndex];

function mouseDone() {
window.status = "";

<BODY BGCOLOR="white" >
<H1>Beverley Curia</H1>
<H2>Assignment 3, Week 4, Exercise 2 (342.htm)</H2>
<BR>Send me an email: <A HREF="http://bevcuria@hotmail.com">bevcuria@hotmail.com</A></P>
<BR>Enable a drop down combo box that allows surfers to choose among many images to be shown.
<BR>For example, if the User chooses Picture of "My Aunt" in the Pull Down Menu, the picture of "Me" will be replaced by the picture of "My Aunt".
<LI>Each image is linked to a different URL and is clickable.
<LI>On a MouseOver, have a Status Bar Message appear for each individual Image.
<LI>Make sure that this exercise is "Browser Compatible".
<p align="center">
<form name="mygallery">
<select name="mySelect" onChange="rotate(this.selectedIndex)">
<option selected>Picture of me</option>
<option >Picture of my aunt</option>
<option >Picture of my brother</option>
<p align="center">
<A HREF="#"
onMouseOver="displayMsg();return true"
onclick="jumpto();return false;">
<img src="images/me.gif" name="pix" border="0" WIDTH="99" HEIGHT="100"></A>
<P><CENTER><A HREF="http://www.geocities.com/bevcuria/assign3.html">Return to my Assignment 3 List</A></CENTER></P>

Always nice to include a <base href when you're posting this sort of thing for analysis.

cheers ;)

07-23-2002, 04:16 AM
Thanks for your help. The only reason I'm testing Netscape 3 is for a class I'm taking. All of our scripts have to work in it so that we can see any tiny little coding error (that might otherwise slip through the cracks in newer browsers).

I would love to move on to XML. But for my current classwork, I need to understand JavaScript, Perl, and CGI with Perl.

Perhaps I can keep you in mind for future help?

By the way, I got the script to work. The problem: a misplaced " in the MouseOver code!