https://writingmotherhood.com/js/rollover.js

1// Rollover  v2.0.1
2// documentation: http://www.dithered.com/javascript/rollover/index.html
3// license: http://creativecommons.org/licenses/by/1.0/
4// code by Chris Nott (chris[at]dithered[dot]com)
5
6
7function isDefined(property) {
8  return (typeof property != 'undefined');
9}
10
11var rolloverInitialized = false;
12function rolloverInit() {
13   if (!rolloverInitialized && isDefined(document.images)) {
14      
15      // get all images (including all <input type="image">s)
16      // use getElementsByTagName() if supported
17      var images = new Array();
18      if (isDefined(document.getElementsByTagName)) {
19         images = document.getElementsByTagName('img');
20         var inputs = document.getElementsByTagName('input');
21         for (var i = 0; i < inputs.length; i++) {
22            if (inputs[i].type == 'image') {
23               images[images.length] = inputs[i];
24            }
25         }
26      }
27      
28      // otherwise, use document.images and document.forms collections
29      // remove if not supporting IE4, Opera 4-5
30      else {
31         images = document.images;
32         inputs = new Array();
33         for (var formIndex = 0; formIndex < document.forms.length; formIndex++) {
34            for (var elementIndex = 0; elementIndex < document.forms.elements.length; elementIndex++) {
35               if (isDefined(document.forms.elements[i].src)) {
36                  inputs[inputs.length] = document.forms.elements[i];
37               }
38            }
39         }
40      }
41      
42      // get all images with '_off.' in src value
43      for (var i = 0; i < images.length; i++) {
44         if (images[i].src.indexOf('_off.') != -1) {
45            var image = images[i];
46            
47            // store the off state filename in a property of the image object
48            image.offImage = new Image();
49            image.offImage.src = image.src;
50            
51            // store the on state filename in a property of the image object
52            // (also preloads the on state image)
53            image.onImage = new Image();
54            image.onImage.imageElement = image;
55            
56            // add onmouseover and onmouseout event handlers once the on state image has loaded
57            // Safari's onload is screwed up for off-screen images; temporary fix
58            if (navigator.userAgent.toLowerCase().indexOf('safari') != - 1) {
59               image.onmouseover = function() {
60                  this.src = this.onImage.src;
61               };
62               image.onmouseout = function() {
63                  this.src = this.offImage.src;
64               };
65            }
66            else {
67               image.onImage.onload = function() {
68                  this.imageElement.onmouseover = function() {
69                     this.src = this.onImage.src;
70                  };
71                  this.imageElement.onmouseout = function() {
72                     this.src = this.offImage.src;
73                  };
74               };
75            }
76            
77            // set src of on state image after defining onload event handler
78            // so cached images (that load instantly in IE) will trigger onload
79            image.onImage.src = image.src.replace(/_off\./, '_on.');
80         }
81      }
82   }
83   rolloverInitialized = true;
84}
85
86// call rolloverInit when document finishes loading
87if (isDefined(window.addEventListener)) {
88   window.addEventListener('load', rolloverInit, false);
89}
90else if (isDefined(window.attachEvent)) {
91   window.attachEvent('onload', rolloverInit);
92}