A Nifty Trick: JavaScript and Image Swapping© Tony Sprinkle
Nov 10, 1999
Getting bored with plain old images? Have you tried everything you can, and still can't jazz them up? Well, I'm about to show you a little trick to spice up your web pages...
It's called image swapping, and it requires a little JavaScript to get it off the ground. Don't worry if you've never used JavaScript before; I'll explain everything, and show you how to use it step-by-step.
First of all, you need images. And for this to work well, you need images with the same dimensions to swap out. Then, make your web page like you normally would, putting the images that you want to be seen when the mouse ISN'T over them. Like so:
<html>
<head>
<title>Fun with JavaScript</title>
</head>
<body>
<img src="alternative.gif" border=0><img src="webdesign.gif" border=0>
</body>
</html>
OK, so it's a little oversimplified, but it'll do for our purposes. Now, we add a little JavaScript section in the header portion of the page. This goes somewhere between the <head> and </head> tags:
<script language="JavaScript1.2">
<!--
image1 = new Image();
image1.src = "alternative1.gif"
image2 = new Image();
image2.src = "webdesign1.gif"
function swap(image, changeto)
{ document.images[image].src = changeto;}
//-->
</script>
Whoa. That's a lot of unfamiliar stuff, huh? Well, I'm going to explain it.
The <script> and </script> tags are self-explanatory. Everything that's JavaScript goes between them. The <!-- and --> tags hide the JavaScript from non-JavaScript-enabled browsers (if any still exist!). Make sure you put the // before the --> or JavaScript will trip up on it. The // tells the browser that anything to the right of it on that line isn't JavaScript, and not to read it. This is pretty much the same for any JavaScript code you'll ever use.
Now for the meat. image1 = new Image(); tells the browser that it's going to preload an image. image1.src = "alternative1.gif" tells it that the image it's going to preload is "alternative1.gif". We preload the images so that the image swapping goes smoothly. You can do that for as many images as you want, as long as you use a different number for each preloaded image.
The function swap is just a shorthand way to tell the browser what to do in the brackets. That way, if you're swapping 15 images, you can just type the function 15 times, instead of the long thing in brackets 15 times. As you'll see, the function has two parameters: image, the name of the image; and changeto, or the URL of the image being swapped into the document. The actual JavaScript statement document.image[image].src = changeto; tells the browser that in this document, there's an image named "image", and that we want to change this image's source to "changeto". Now for implementation...
Go To Page:
1
2
The copyright of the article A Nifty Trick: JavaScript and Image Swapping in Web Graphic Design is owned by . Permission to republish A Nifty Trick: JavaScript and Image Swapping in print or online must be granted by the author in writing.
Java and JavaScript are two separate things. JavaScript is intended to run smoothly with HTML... kinda like a light version of Java. Java applets and programs are more complex, and require separate
...
|
I hate Java. I am using a Mac (Performa 637) and Internet Explorer 4.01. My browser doesn't work very well with Java and the newer browsers all seem to be designed for PowerMacs. I like Web TV, it has
...
-- posted by Kirk_Johnson
|
For a complete listing of article comments, questions, and other discussions related to
Tony Sprinkle's
Web Graphic Design topic, please visit the Discussions page.
|
