Phiên bản đầy đủ: jsB@nk » Trình đơn » Menu đổi ảnh
URL: https://www.javascriptbank.com/unobtrusive-javascript-image-rollovers-index.html
Hiệu ứng dùng hình ảnh để tạo các tùy chọn cho trình đơn đồng thời các mục chọn sẽ đổi ảnh khi người dùng rê con trỏ chuột đến.
Phiên bản đầy đủ: jsB@nk » Trình đơn » Menu đổi ảnh
URL: https://www.javascriptbank.com/unobtrusive-javascript-image-rollovers-index.html
<style type="text/css">img {border: none;}ul {list-style-type:none;}ul li {display:inline;}</style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script language="javascript">/* This script and many more are available free online atThe JavaScript Source :: http://javascript.internet.comBy: Christian Watson :: http://www.smileycat.comBased on a script by Chris Nott: http://www.dithered.com/javascript/rollovers/index.htmlLicense: http://creativecommons.org/licenses/by/1.0/Futher info: http://www.smileycat.com/miaow/archives/000224.html */function isDefined(property) { return (typeof property != 'undefined');}var rolloverInitialized = false;function rolloverInit() { if (!rolloverInitialized && isDefined(document.images)) { var bodyId = document.body.id; // ID of the BODY tag // get all images (including all <input type="image">s) // use getElementsByTagName() if supported var images = new Array(); if (isDefined(document.getElementsByTagName)) { images = document.getElementsByTagName('img'); var inputs = document.getElementsByTagName('input'); for (var i = 0; i < inputs.length; i++) { if (inputs[i].type == 'image') { images[images.length] = inputs[i]; } } } // otherwise, use document.images and document.forms collections // remove if not supporting IE4, Opera 4-5 else { images = document.images; inputs = new Array(); for (var formIndex = 0; formIndex < document.forms.length; formIndex++) { for (var elementIndex = 0; elementIndex < document.forms.elements.length; elementIndex++) { if (isDefined(document.forms.elements[i].src)) { inputs[inputs.length] = document.forms.elements[i]; } } } } // get all images with '_off.' in src value excepting the one that is for the BODY for (var i = 0; i < images.length; i++) { if (images[i].src.indexOf('_off.') != -1) { // check for BODY image, and turn it 'on' if found if (images[i].src.indexOf(bodyId) != -1) images[i].src = images[i].src.replace(/_off\./, '_on.'); else { var image = images[i]; // store the off state filename in a property of the image object image.offImage = new Image(); image.offImage.src = image.src; // store the on state filename in a property of the image object // (also preloads the on state image) image.onImage = new Image(); image.onImage.imageElement = image; // add onmouseover and onmouseout event handlers once the on state image has loaded // Safari's onload is screwed up for off-screen images; temporary fix if (navigator.userAgent.toLowerCase().indexOf('safari') != - 1) { image.onmouseover = function() { this.src = this.onImage.src; }; image.onmouseout = function() { this.src = this.offImage.src; }; } else { image.onImage.onload = function() { this.imageElement.onmouseover = function() { this.src = this.onImage.src; }; this.imageElement.onmouseout = function() { this.src = this.offImage.src; }; }; } // set src of on state image after defining onload event handler // so cached images (that load instantly in IE) will trigger onload image.onImage.src = image.src.replace(/_off\./, '_on.'); } } } } rolloverInitialized = true;}// call rolloverInit when document finishes loadingif (isDefined(window.addEventListener)) { window.addEventListener('load', rolloverInit, false);}else if (isDefined(window.attachEvent)) { window.attachEvent('onload', rolloverInit);}function test(){alert('This is test only');}</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><div id="navbar" align="center"><ul> <li><a href="javascript:onclick=test();"><img src="home_off.gif" alt="Home" /></a></li> <li><a href="javascript:onclick=test();"><img src="about_off.gif" alt="About" /></a></li> <li><a href="javascript:onclick=test();"><img src="donate_off.gif" alt="Donate" /></a></li></ul></div><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->