Double-click your old image in Netscape Composer and then hit “Advanced Edit...”. Switch to the “JavaScript Events” tab. Pull down the “Attributes” menu in the lower left and choose “onmouseover”.JavaScript is a means of adding dynamic content to your web page without having to have access to the server. Your programs are embedded into your web page and stay there until they reach the client. The client’s web browser than runs the program and displays the dynamic content or does the action on the client’s end.
Go back to your web page where you created an image and placed it on the web page. Place another image in the same folder. This new image should have the same dimensions as the old one.
Double-click your old image in Netscape Composer and then hit “Advanced Edit...”. Switch to the “JavaScript Events” tab. Pull down the “Attributes” menu in the lower left and choose “onmouseover”.
For the “Value” type:
this.src="Cartoon.gif"
Replace “Cartoon.gif” with the filename for your image.
Click “OK” and then “OK” again, and then save your web page.
JavaScript works on what are called “events”. Clicking on something is an event. Moving the mouse over something is also an event. Events get sent to “objects”, which is just (in this case) another word for an HTML tag. Our HTML tag in this case is the IMG (image) tag. Whenever someone moves the mouse over an image, that image gets an “onmouseover” event. Normally it ignores it. We’ve just told it to do something with that event: set “this.src” to “Cartoon.gif”. The “src” option is the filename of the image. If you look at the HTML Source view for your IMG tag, you’ll see that “src” is normally:
src="Photo.jpg"
Instead of Photo.jpg, it will have your original image’s filename. When we set “this.src” to “Cartoon.gif” it is like replacing “Photo.jpg” with “Cartoon.gif”.
You cannot see dynamic actions in Composer. Pull down the “File” menu and choose “Browse Page”. Your web page should look exactly as it did the last time you looked at it, and exactly as it does in the HTML Preview view of Composer. Move the mouse over the image, however, and it should immediately change to your new image.
There’s a possible problem: in order to see the old image again, you have to reload the page. Once you move the mouse over the image, it changes to the new image and does not change back when you move the mouse away.
Go back to Netscape Composer, double-click the image, click on “Advanced Edit...”, move to the “JavaScript Events” tab, and add a new event. The Attribute should be “onmouseout” and the value should be:
this.src="Photo.jpg"
Replace “Photo.jpg” with the filename of your original image.
Okay everything, save, and browse your page. When you move the mouse over your image, it should switch to the new image, and when you move it away, it should switch back to the original.
For this example, you’ll need a bunch of related images all the same size, such as vacation photos. Let’s say you want to display twenty selected images from your last vacation, you would like them to be full-size, but you don’t want to make a really huge web page and you don’t want to make twenty reasonably-sized web pages. We can make a single page that uses JavaScript to switch to a new image when the viewer requests it.
As in the above example, the images need to be the same size. If they aren’t the behavior of the browser is not predictable. Some will try to redisplay the entire page to match the new size. Others will try to resize the image to match the size of the original image. And others will simply insert the new image into the space where the original image was. If it is too large the browser will crop it, and if the image is too small some of the original image will remain.
First, make a web page with one of the images on it. Align the image to the right so that the text you write will go to the left of the image. On the left, type a title for each of the images you want to display.
In the previous example, we used “this.src” to refer to the source of the IMG tag’s image. The word “this” meant that we meant this IMG tag. This time, we’re not going to put the JavaScript into the IMG tag but into a link around our text. Because of this, we need to give our image a name so that we can refer to it from elsewhere on the page.
Double-click the image and click on “Advanced Edit...”. This time, we need to add a “name” to the “HTML Attributes”. The attribute we need to choose is “name”, and the name we’re going to give it is “photoarea”. Okay everything.
These are going to be normal links at first: they will link directly to the image. When a viewer clicks on a link, it will take them directly to the image. This way we can verify that everything works before we add our JavaScript. It also means that our friends who have turned JavaScript off will still be able to see our images.
Highlight each image name and link to the appropriate image using “Choose File...” under “Link...” from the “Insert” menu. Save the file, browse it, and verify that all of your links work. You’ll need to use Netscape’s “Back” button to move back to your index page after clicking on an image link.
Go back to Composer and click on one of your links (preferably the one that does not link to your original image). Pull down the “Format” menu and choose “Link Properties...”. Click on “Advanced Edit...” and go to the “JavaScript Events” tab.
The attribute we need for this is the “onclick” attribute, so choose that. For the value, use:
photoarea.src=this.href;return false
We named our photo placeholder “photoarea”, so “photoarea.src” is the image source for that IMG tag. Since we’re now using a link, “this” refers to our link, and “href” is the HTML option for the link’s value. Since our link goes directly to our image, “this.href” is the image we want the placeholder to switch to.
The semicolon separates lines in JavaScripts. Our next line is “return false”. The onclick event expects the browser to follow through to the link. By returning “false”, we’ve told the browser that it doesn’t need to do anything else. We’ve handled the click and the browser can ignore it. (If you want to test this, change “return false” to “return true”. You’ll see the image placeholder change just before the browser takes us to the lone image.)
Save, and browse. When you click on the link you just added JavaScript to, the placeholder on the right should switch to that link’s image. If it does not, go back and fix it before you go any further.
Once you have the one link working, do the same to each of the other links. Give them an “onclick” attribute in “JavaScript Events” and make the attribute’s value “photoarea.src=this.href;return false”.
Different browsers can execute JavaScript functionality in different ways. Some viewers will turn off JavaScript for security reasons or to block JavaScript ad pop-ups. You should never rely on JavaScript for essential functionality. It is best used to enhance the viewer’s experience beyond the essential.
JavaScripts are run on the client. This means that the client has full control over what the scripts do. The client can completely turn off your web page’s ability to run scripts, or it can selectively turn off certain features (such as the ability to pop up new windows or leave cookies).
It also means that the client can re-write your JavaScripts. You should never use JavaScripts to verify or create data which you then trust on the server end. You can use JavaScript to verify and create data to assist the viewer, but you must always verify on the server or by hand any data that the client sends you. You cannot trust JavaScript to give you valid data.