Member Avatar for JimN

I am teaching an elementary school this coming semester, and have created an explorer of animals and birds using javascript, and also using a flash created html code that shows a small picture of various animals and when they go onMouseOver it opens a new window with a larger picture that also makes the sound the animal or bird makes, and
when they move their mouse off, the sound stops and the larger picture goes away. I'm hardly an expert at this but it is really working exactly as I want it to but the entire code is quite lengthy because I do not know how to pass the flash created HTML to javascript as a parameter, and thus must have a javascript containing the HTML for each and every object. In this small example you will see that I have to create each of these javascripts for each animal or bird and then individually number the functions MakeNewWindow and CloseNew Window for each object. It would be nice if I knew how to pass the flash code as a parameter, rather than have to create a new javascript code for each object. I could then just have one javacode in the head and pass the flash created HTML to it, and not have to bother with a huge number of javascripts, each having to have separately numbered makeNewWindow and closeNewWindow functions.

This is the javascript and HTML which calls that javascript for the two objects "cow" and "duck" for example. Obviously it won't work as shown, but it clearly demonstrates my problem and why I would want to pass the flash HTML as a parameter rather than have a javascript for each object.

Please understand I am not a professional in this, but I am sure even if I can't reduce the code, the kids will love it. Hope someone can help... in any case... thanks for looking...

---------------------------------------------------------

<html>
<head>
</head>
<body>

<div align="justify"><B>duck</B> <I>n.</I> ---
<script type="text/javascript">
var newWindow;
function makeNewWindow ( ) {
newWindow=window.open("","","height=500,width=600,left=0");
newWindow.location.href="duck.html";
}
function closeNewWindow( ) {
if (newWindow) {
newWindow.close();
newWindow = null;
}
}

</script>

<img src=duck.jpg "height=80 width=80" onMouseOver="makeNewWindow()"
onMouseOut="closeNewWindow()"/><br>


<div align="justify"><B>cow</B> <I>n.</I> ---
<script type="text/javascript">
var newWindow;
function makeNewWindow1 ( ) {
newWindow=window.open("","","height=500,width=600,left=0");
newWindow.location.href="cow.html";
}
function closeNewWindow1( ) {
if (newWindow) {
newWindow.close();
newWindow = null;
}
}

</script>

<img src=cow.jpg "height=80 width=80" onMouseOver="makeNewWindow1()"
onMouseOut="closeNewWindow1()"/><br>


</body>
</head>

--------------------------------------------------
You see that the first half is for a duck and the second half is for a cow.

  • 2 Contributors
  • 2 Replies
  • 590 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by JimN
Member Avatar for digital-ether

Hi,

Here is an example of how to pass a parameter to a javascript function.

function myfunction(param1) {

alert(param1);

}

myfunction('hello');
myfunction('bye');

If you run that piece of JS, you'll get an alert window with the string "hello", then another alert window with "bye". However both alert windows are called in the same function. The value of the parameter, param1, however, is controlled by the function callers. (myfunction('hello') and myfunction('bye'))

For you case you'd want just one function with the url passed to the function as a (string) parameter:

var newWindow;
function makeNewWindow ( url ) {
newWindow=window.open("","","height=500,width=600,left=0");
newWindow.location.href= url;
}

Then you can call the function with:

makeNewWindow("duck.html");

or

makeNewWindow("cow.html");

etc.

Note: whatever string you pass to the function from the function caller becomes the value of the parameter url inside the function declaration.

You can implement the closeNewWindow( ) function in the new window instead of the window opener.

a link such as:

<a href="window.close();">Close This window</a>

In the new window will all it to close itself.

If you are to put it in the opener (parent window) you'll want to keep track of multiple open windows.

Member Avatar for JimN

Thanks a lot. That was exactly what I was looking for. I passed the URLs I created with Flash as a string, and now I only need one copy of the javascript placed in the head of my entire product. Can't thank you enough.


JimN

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.