This page shows pointers to functions in action. If you're viewing it in Internet Explorer 4.0 or later, clicking on a button will change the image via a 1-second dissolve. If you're using any other browser, the picture will change via a simple cut.
The page contains separate functions for the dissolve and cut processes. Here they are:
function dissolvePix(picObj, imgfile){
// This is for IE4 or later, and dissolves the images together using a
visual filter.
picObj.filters.revealTrans.Apply();
picObj.src = imgfile
picObj.filters.revealTrans.Play()
} // end of function
function switchPic(picObj, newSrc) {
// simple image-cut
picObj.src = newSrc}
At the start of the <head> section is this inline script code, executed when the page loads:
if (RunningIE4) {
changePic = dissolvePix
} else {
changePic = switchPic}
(note - 'RunningIE4' is set by the browser-checking function msieversion() - see page source for details).
changePic is now a pointer to one of the two image-changing functions. Code elsewhere in the page can "call" it without knowing which of the actual functions is going to be executed. Here's an example:
<input type="button" value="Picture 1" onclick='changePic(document.images["image1"], "pic1.jpg")'>
The decision of which browser to support has been isolated in a single location in the <head> section, and code elsewhere in the page can be either browser-specific (the image-changer functions) or browser-neutral.