/** * rollover.js functions for Planksters * @requires - utilities.js * @author mitchell amihod * * How To: * Include this on the page. You should also have included the utilities.js file. * see rollover.html for an example. * Basically, any image with a class = rollover will swap 2 images: * original.jpg * original_o.jpg for the hover state * * Also, entire page should be wrapped in a div, or something. * ie:

....

* **/ var $rollover = YAHOO.namespace('Plank.Base.Rollover'); $rollover = function () { var $D = YAHOO.util.Dom; var $E = YAHOO.util.Event; //Collect object. We return it after the onContentReady var publicMethods = { init: function () { var containerId = $D.generateId( document.body, 'genbodyid' ); $E.on(containerId, "mouseover", publicMethods.rollover); $E.on(containerId, "mouseout", publicMethods.rollover); }, /* * Handles rollovers on images * Currently targeted to element having class=rollover * original_file.xyz * rolloverfile == original_file_o.xyz * * @TODO: Q: Is it better to just attach a few listeners to the els with * rollover class as oppossed to capturing and analyzing every mouseover? * */ rollover : function(e) { var el = $E.getTarget(e); if( false === $D.hasClass(el, 'rollover') ) { return; } var filetype = el.src.substring(el.src.lastIndexOf('.'), el.src.length); switch(e.type){ case 'mouseover': el.src = el.src.replace(filetype, '_o'+filetype); break; case 'mouseout': el.src = el.src.replace("_o"+filetype, filetype); break; default: throw('Unexpected e.type in rollover handler'); } } }; //End Closure Wrapper $E.onDOMReady(publicMethods.init); return publicMethods; } ();