Lesson 10-More on image effects
Ok, continuing with our onMouseover/out example, in this section, we will look at:
Presenting
the final version of the onMouseover effects with the filter added in.
In order to add a filter to distinguish between the different versions of Netscape/IE, we need to look at a prebuilt object that helps us do that:
| appName | This will provide you with the browser name of your browser: "Netscape" or "Microsoft Internet Explorer", for example. |
| appversion | This will give you the version number of a browser. To make it harder on you, it doesnt return only the version number, but also the platform and country (U/I). ie: "3.01 (Win95;I)." |
<html>
<head>
<script>
<!--
image01= new Image(42,42)
image01.src="1.gif"
image02= new Image(42,42)
image02.src="3.gif"
//-->
</script>
<script
language="javascript">
<!--
function filter(imagename,objectsrc)
{
if ((navigator.appName=="Netscape")&&
(parseInt(navigator.appVersion)>=3))
document.images[imagename].src=eval(objectsrc+".src")
}
//-->
</script>
</head>
<body>
<a href="whatever.htm"
onmouseover="filter('example','image02')"
onmouseout="filter('example','image01')">
<img src="1.gif" name="example"></a>
</body>
</html>
Ok, by adding the filter, we have successfully prevented MS IE users from receiving error messages when surfing to your page. Lets discuss the details here:
Lets take a look at "function filter(imagename,objectsrc)" This is the actual filter that will help filter out those IE browsers that will generate errors. Notice that this function will accept two parameters-the name of the image that is inside the <img> tag, and the src of the image object that will be used to replace that one. We tested not only for the browser type, but the browser version. (parseInt(navigator.appVersion)>=3))basically says: if the version is greater than "3". Look at "parseInt(.....)" This is a function that will attempt to extract a number from a string. For example, parseInt(23jhhkku) will give back "23" We need this to extract the "number" part of the version of your browser.
Now the following line is what will actually assign a new path to the
image, changing the image if it passes the browser test: document.images[imagename].src=eval(objectsrc+".src")
Notice that when assigning the new image path to the image, eval(objectsrc+".src")was used instead of
simply objectsrc+".src" Remember
I mentioned the eval() function a few pages back? We need to use this function, because if
we didn't, it will not work. Let's see why. Lets say we have something like this:
x="2+6+9"
alert(x)
After defining this function, we could use it over and over again with different images, by simply passing in a different image name and object path. This is where we should begin to realize that a little careful thought in programming can save us a lot of time afterwards. If we were to use the original coding for many images, even, assuming it is compatible with IE browsers, we would still be doing a lot more work than using a function, like above.
Presenting an improved filter that is friendly to IE4.0 too
Now, the filter above screens out all IE browsers, which was how most filters did-however, that was because, until IE4.0, no IE browsers supported onMouseover effects. Now, with the advent of IE4.0, which happens to support onMouseover effects using the image object, we should update our filter to support it too! (Again, the reason why I didn't simply include that in the first filter was so that you could more clearly see how a filter works). The below filter, which should be used instead of the above, is IE4.0 friendly: The below onMouseover image works with IE4.0 too:
Here is the filter code:
<script>
<!--
function filter(imagename,objectsrc)
{
var n=navigator.appName
var v=parseInt(navigator.appVersion)
var
browsok=((n=="Netscape")&&(v>=3))
var browsok2=((n=="Microsoft
Internet Explorer")&&(v>=4))
if ((browsok)||(browsok2))
document.images[imagename].src=eval(objectsrc+".src")
}
//-->
</script>
Notice how we "shorted-handed" the browser name and version by assigning it to a alternative shorter variable-"n" and "v"
Now, you may ask, what kind of variables are browsok and browsok2? Well, they are boolean variables, which can contain only two values-either true or false, depending on whether or not the statement on the right is right, or wrong. JavaScript supports boolean variables, which can be real handy sometimes.
The above script will now be good to IE4.0 too, and only harass those lower level IE and NS browsers...
Like always, here is the complete image object:
| properties | methods |
| border complete height hspace lowsrc name prototype src vspace width |
onAbort onError onLoad |
And here's the complete navigator object:
| properties | methods |
| appCodeName appName appVersion mimeTypes plugins userAgent |
no methods |
