|
Learn Java Script Today | | | Over 5000 Free Fonts | | | Tutorials | | | Javascript Forum | | | Other Javascript Resources | | | Cheat Sheet |
This is one of the oldest dynamic script I know. It was first introduced in Netscape Navigator 3. Cross Browser VersionNN3 introduced the Sample: (works for allmost all javascript enabled browsers, but not IE3)Code:<a href="http://www.eae.net/webfx" onmouseover="pic1.src='images/openfoldericon.gif'" onmouseout="pic1.src='images/foldericon.gif'"> <img name="pic1" src="images/foldericon.gif" width="16" height="16" border="0" alt="Back to WebFX"> </a> IE4 version 1With Internet Explorer 4.0 all elements can be manipulated and the rendering of the page is dynamic allowing
changes after the page is loaded. This allowed the Sample: (Works in IE4 or better. Should work in Navigator 5, but we'll have to wait and see)Code:<img src="images/foldericon.gif" width="16" height="16" border="0" onmouseover="this.src='images/openfoldericon.gif'" onmouseout ="this.src='images/foldericon.gif'"> IE4 version 2Internet Explorer also introduced event bubbling. As soon as an image is entered it causes an onmouseover event to occur. This event bubbles
up to its container (usually a paragraph) and finally it comes to the document. When it comes to the document level
we catch it! Here we have to see what element caused the onmouseover (because all element cause one). The element
that caused it is called Explorer also allowed the developer to add custom attributes to the elements. (Navigator doesn't allow this. To bad!)
So lets say we added the custom attribute Code:This only needs to be written once! You can place it in an external javascript file! <script type="text/javascript"> <!-- document.onmouseover = handleOver; document.onmouseout = handleOut; function handleOver() { el = window.event.srcElement; if (el.tagName == "IMG") { //Check if over image if ((el.overSrc != null) && (el.overSrc != "")) { //check if valid overSrc el.srcBackup = el.src; //Back up the src el.src = el.overSrc; } } } function handleOut() { el = window.event.srcElement; if (el.tagName == "IMG") { //Check if over image if ((el.overSrc != null) && (el.overSrc != "") && (el.srcBackup != null)) { //Also check for valid backup el.src = el.srcBackup; } } } //--> </script> Now all images where you declare overSrc changes images dynamically <img src="images/foldericon.gif" overSrc="images/openfoldericon.gif" width="16" height="16" border="0"> Note! The way it is implemented now is case sensetive. It is really easy to fix this but the code gets a little bit
harder to read. You'll have to replace all IE5 behavior versionInternet Explorer 5.0 developer preview introduced behaviors, see the article where I explain how to make a blink behaviour. First you create a scriptlet file, over.sct This scriptlet is even easier than the one in the blink behavior article. The code is very similar to the one above. (I changed the name of overSrc to overSrc2 to distinguish). Then you set the behavior using style sheets. I did this with an inline style sheet but usually you would have it declared in the style tag in the head. Sample: (Only works in IE5)Code:<img style="behavior: url(over.sct);" src="images/foldericon.gif" overSrc2="/images/openfoldericon.gif"> Here I've made it case insensetive! See that wasn't so hard :-)
|
|