Ahh, JavaScript, such a rich, full-featured language. Since its inception,
it's allowed us to unleash the full power of the browser. Its easy-to-use scripting allows anyone to add an endless variety of rich interactive experiences to pages through the miracle of client-side scripting.
Yeah right ... unless you call that silly tickertape in your status bar
an innovation. I, for one, don't. Since its release with
Netscape 2.0, JavaScript has usually been less than impressive, and sometimes downright annoying. People used it to open up little windows, process things behind the scenes, or snoop on users in various ways. It
didn't deliver anything obviously cool until the release of Navigator 3.0.
One of the many additions to the latest version of JavaScript (1.1) is the ability to
both read and write to an Array object that contains images and links. In
layman's terms, that means you can change images and links on the fly. Let's get a quick example here so you can see what I'm talking about:
I didn't need any plug-ins or Java to do this just three lines of code:
<script language="Javascript1.1">
function yaImgChange(imgNum,imgSrc) {
document.images[imgNum].src = imgSrc;
}
</script>
That's what does all the work. To activate it, you need to use the
JavaScript hooks that are provided by the language. The source looks like this:
<a href="javascript:nothingMuch();"
onMouseOver="yaImgChange(11,'img1.gif');"
onMouseOut="yaImgChange(11,'img2.gif');">
<img src="img1.gif"></a>
What I've done here is set up a function called yaImgChange (YA stands for Yet Another.), which is passed two variables. The first one, which I named imgNum, tells the browser which image to alter on the page. It's represented by a number (in this case it's 11) that I arrived at by counting the images (beginning with zero and counting from the top). The second variable, which I named, appropriately, imgSrc, gives the location of the image that will be displayed.
The function then declares that the image array in the current document should change the current source of [imgNum] to whatever's in [imgSrc]. And there you go a
general-purpose image-changing function.
I like using it with the onMouseOver and onMouseOut actions, since they provide a good
way to activate the change. But it's important to remember that you can only place these in an anchor tag, so you need to use them around an image if you want it to roll over. (This isn't necessary if you trigger the change from somewhere else.)
You can alter the links on your page as well as the source of images. In fact, you can combine them to make complex interfaces, as I have on my homepage. (By mousing over an image, you can select one of my friends, click on the photo, and go to his or her homepage. The same link always takes you to the correct page.)
Changing the links works in much the same way. Here's an example. (Remember, this only works in Netscape 3.0 with JavaScript enabled.)
Here I've created a function called yaHrefChange. It
works exactly like yaImgChange, except that you pass along
the link <a href> instead of the <img src> with the number of the link on the page (again, starting with zero and counting from the top). The source looks something like this:
function yaHrefChange(hrefNum,hrefHref) {
document.links[hrefNum].href = hrefHref;
}
Instead of explaining everything again, I'll leave it up to you and your ability to hit View Source to figure out exactly what's going on here. Besides your own ingenuity, the single most valuable tool you have in your quest to learn JavaScript or HTML is View Source. STEAL, DAMN YOU! PILLAGE!
But what about Java? Shockwave?
So now that you know how to do this, you might be wondering how well this stacks up against Java
or Shockwave? Well, it all depends.
Speed-wise, JavaScript is lightning fast. The amount of code
you need to turn this on is less than a Kbyte. Plus, it uses Navigator 3.0 to manipulate the
page directly instead of passing the work off to either a plug-in or a byte code
compiler.
But, as I mentioned before, it only works in Navigator 3.0 (and
presumably beyond), so you'll be cutting out more than half your audience if you
use it. Java works in Navigator 2.0+ and Internet Explorer 3.0, so you'd have most of
your audience covered if you did it that way. Also, most people tend to leave
Java enabled, but many turn off JavaScript (one too many pop-up toolbars or
scrolling tickertapes), so your code may not even get executed if you use JavaScript.
If you're banking on it for an effect, be sure to fill out your <noscript> tags.
So there it is a few lines of code that can do a very cool thing. Just be
sure to think about why you're using something before you add it to your
page. I'm sure the first people who made a pop-up window or scrolled a
tickertape message in the status bar thought they were being pretty hip, but nothing
gets old like flash with no purpose. When used correctly, changing images and
links can produce some interesting and complex effects.
