Domain Registration as low as $14.95

McWebber 1998

McWebber Free HTML Help - Find the help you need to make your web site look great!
BACK TO HOME PAGE
Advanced Tutorials
Frequently Asked Questions
McWebber Favorite Links

 

 

 

JavaScript

JavaScript Window/Random Midi

This script can be used to display anything in a popup window, in this case it's used for the jukebox,, but all you have to do is change the height and width of the window and the URL of the file, and you can display anything in it.

To get a button like the one on the left side of this page you'll need to follow a couple of simple steps.

First, you're going to a page that is the "jukebox". You're going to just save that page as "jukebox.html" so now Click Here. Then come back here.

Click Here and in the window that opens, highlight and copy the code that appears. That code should be pasted into your page to appear just as it is in the window.  Be sure the line that begins ('jukebox.html', is all on one line when you paste it into your page.  If you're using a program like FrontPage, you'll have to insert it using the "Insert" menu or paste it into the HTML tab.

On the page you want the button to appear, copy and paste the following code where you want the button:
<FORM><INPUT type="button" name="button_one" value="MUSIC" onclick="popwindow2()"></FORM>

Now you'll have to upload 5 MIDI files to the same directory as the pages. The "jukebox.html" page calls for the files to be named "midi1.mid" "midi2.mid" "midi3.mid" "midi4.mid" and "midi5.mid". You can rename the files either before or after you upload them.

You're all set.  The file "jukebox.html" has a tag in it that causes the page to "refresh" every 300 seconds. If you like, you can change that if your MIDI files are longer.

TOP

Simple Image Rollover Script
(works for Netscape and IE 4.0)

This is the same script used on this site, of course you can just view the source of the page to get the code, but here it is anyway.  Keep in mind that McWebber isn't a programmer, but I'll do my best to explain how I think this works in layperson terms.

First the basic JavaScript you will need.  This is for a single image. In this example the image filenames are image1.gif and image2.gif but your images can be named anything as long as they have a 1 and a 2 as part of their name. In this case, image1.gif is the image you want to be seen when the page loads and image2.gif is the image to be seen when the mouse is moved over the image.  It certainly helps if both images are the same size. For more images, copy and repeat the red part of the script and add new images to it.

<script LANGUAGE="JavaScript">
<!--
if (document.images) {
  var image2 = new Image()
  image2.src = "images/image2.gif"
  var image1 = new Image()
  image1.src = "images/image1.gif"

}
function act(imgName) {
  if (document.images)
    document[imgName].src = eval

(imgName + '2.src')
}
function inact(imgName) {
  if (document.images)
    document[imgName].src = eval

(imgName + '1.src')
}
// -->
</script>

This script will, when used with the following code, replace one image in your page with another on mouseover, and then switch back to the original image when the mouse is moved out.  You can see how it works with the links in the left column of this page if you have the proper Java enabled browser.

Copy the code above and paste into the HTML of your page. Don't try to copy that code from the source of this page since I use the &gt; and the &lt; to show the < and the > symbols.

Now, here's the code you put where you want the mouseover to occur.

<a HREF="http://anydomain.com/" onMouseOver="act('image')" onMouseOut="inact('image')"><img
SRC="images/image1.gif" HEIGHT="24" WIDTH="96" NAME="image" BORDER="0" ALT="ALT TEXT"></a>

This code tells the browser to change the active image from image1.gif to image2.gif and back to image1.gif when the mouse is moved out. You see in the main JavaScript where the functions for "inact" and "act" are set and why each image name has to end in 1 or 2.

In the above code you see the word "image" several times. If your file is a different name, put it there but make sure they all are the same or you'll get JavaScript error messages, and we know what a pain in the butt they are.

If you want to have more than one image as I do on this page, then you just repeat the first four lines of the main JavaScript.  View the source of this page and you'll see it. Those four lines occur after: "if   (document.images)  {"
Then you just put in your next image name and filename in, again making sure they end in 1 and 2 to match the script.

TOP

Status Bar Message Script

Rather than display the entire script here, it's pretty long.   View the source of this page and copy the script.  You can identify it by:
// This JavaScript is in the Public Domain.

Copy everything until the closing </script> tag and paste it into your HTML just before the </HEAD> tag.

Then you'll also need the tag that goes inside your <BODY> tag:
ONLOAD="window.config.timer=window.setTimeout
('sbprint()',window.config.delay)"

TOP

Automatic Frames Break

If you don't want your page to show up in the frame of someone else's page, just add this JavaScript to your page:

Now when your page loads in someone else's frame, it will break out.

For more information on JavaScript, see my LINKS page.

Search McWebber

powered by FreeFind

Search Now:
In Association with Amazon.com

HOME | ADVANCED| FAQ | LINKS

Copyright 1998 McWebber.Com All Rights Reserved.