Hi -
Once again I hope someone can help me with a very simple problem in javascript.
I've written a simple program for children (I am not a programmer), which
displays a larger sub-window and the sound an animal or a bird (yes, I know
birds are also animals) makes when the child clicks on a thumbnail of that
animal or that bird in the main window. However; children tend to just press
the mouse anxious to see and hear the larger image in the sub-window, and
when they do so for the first time, you can see from the small snip of code
I've included, the image appears on the top left of the main window, positioned
on TOP of the main window. Which is what I want it to always do.
The problem is that when they then click again, on either another thumbnail or
anywhere on the main window BEFORE closing the sub-window brought up by the
javascript using the "x" close in the upper right of the sub-window, the sub-window
goes behind the larger main window and the kids can't see that it's NOT closed,
and they then try to look at another picture and can't find it because it has
overwritten the image in the sub-window, but that sub-window is now hidden
behind the main window. I've taught them to move the main window, but I
want it to be automatic that the sub-window always remains on top of the main
window.
So I'm looking for two things. 1) When a new thumbnail is clicked in the
main window the new image should overwrite the old image in the sub-window
(this it already does) BUT the new sub-window remains on top of the main
window, rather than going behind the main window, and 2) when the
main screen is clicked without clicking on a thumbnail (as kids tend to do),
the sub-window automatically closes, making visible all the thumbnails in the
main window that were hidden behind the sub-window. I suppose that this
has something to do with blur and focus and window.close, but I haven't a
clue how to apply them to my very small snippet of javascript code. The
larger images and sound that are in the sub-window were created in "flash,"
and work quite well for the purpose intended.
Of course I also don't want to use any <a href....>click here<./a> type input, requiring
them to do more than either close the sub-window or if they forget and click
inside the main window have the sub-window either remain on top if another
thumbnail is clicked or have the sub-window close if the main window receives
a click anywhere other than a thumbnail, unless physically closed using the "x"
close in the sub-window. I'm trying to keep this as simple as possible for these
very young children, since they often just click and expect it to work, and since
they are not sufficiently developed to grasp the different types and vast varieties
of animals within all of the complex subject of the taxonomy of eukaryotes.
I hope only to generate their interest in finding out more about the animals by
themselves.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>Animals of the World</title>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<script type="text/javascript">
function newWindow(newUrl) {
newWind = window.open(newUrl,"picture","location=1,status=1,scrollbars=1,width=650,height=650");
}
</script>
</head>
<body BGCOLOR="#FFEBCD">
<P align="justify"><a name="Birds">
<B>Birds</B><I> n.</I> ---
<img src=ostrich.jpg height="50" width="50" hspace="30" onMouseDown = newWindow('ostrich.html')>
<img src=robin.jpg height="50" width="50" hspace="30" onMouseDown = newWindow('robin.html')>
<img src=bluebird.jpg height="50" width="50" hspace="30" onMouseDown = newWindow('bluebird.html')>
</body>
</html>