Rollover exercise

This is a basic rollover example. The buttons will change when the mouse moves over them, and clicking will call up and alert box simulating taking the required action—changing the page.

The images are preloaded for performance and the event handlers are attached through script run from the window onload event.

Code

        //preload images for roll on
        imgHome = new Image();
        imgHome.src = "images/homey.gif";
        imgEmail = new Image();
        imgEmail.src = "images/emaily.gif";
        imgJava = new Image();
        imgJava.src = "images/javay.gif";
        imgLink= new Image();
        imgLink.src = "images/linky.gif";
        imgProject = new Image();
        imgProject.src = "images/projecty.gif";
        imgOld = new Image()

        function rollon(evt) {
            var obj;
            if (!evt) obj = window.event.srcElement;
            else obj = evt.target;

            imgOld.src = obj.src;

            switch (obj.name){
                case "home":
                    obj.src = imgHome.src;
                    break;
                case "java":
                    obj.src = imgJava.src;
                    break;
                case "email":
                    obj.src = imgEmail.src;
                    break;
                case "link":
                    obj.src = imgLink.src;
                    break;
                case "project":
                    obj.src = imgProject.src;
                    break;
            }
        }

        function rollout(evt){
            var obj;
            if (!evt) obj = window.event.srcElement;
            else obj = evt.target;

            obj.src = imgOld.src;
        }

        function clicked(evt) {
            if (!evt) evt = window.event;
            var tname;
            var txt = null;

            if (evt.target)
                tname = evt.target.name;
            else
                tname = evt.srcElement.name;

            switch (tname) {
                case "home":
                    txt = 'This could go to the home page';
                    break;
                case "java":
                    txt = 'This could go to a java page';
                    break;
                case "email":
                    txt = 'This could send an email';
                    break;
                case "link":
                    txt = 'This could go to a link page';
                    break;
                case "project":
                    txt = 'This could go to a projects page';
                    break;
            }
            if (txt) alert(txt);
        }//eof

        window.onload = function () {
                var l = document.getElementsByTagName("img");
                for ( i = 0; i < l.length; i++) {
                    l[i].onclick = clicked;
                    l[i].onmouseover = rollon;
                    l[i].onmouseout =  rollout;
                }
            };