»
AnglaisFrançaisVietnamien

Imprimer - Discrète JavaScript Image roulements - JavaScriptBank.com

Version complète: jsB@nk » Menu » Discrète JavaScript Image roulements
URL: https://www.javascriptbank.com/unobtrusive-javascript-image-rollovers-index.html

Discrète JavaScript Image roulements © JavaScriptBank.comCréer image roulements pour votre JavaScript navigation sans aucune hardcoding JavaScript dans le code HTML de vos pages Web. Facile à mettre en oeuvre, même pour les débutants, et travaille dans tous les navigateurs. Dégrade bien pour les visiteurs avec JavaScript éteint.

Version complète: jsB@nk » Menu » Discrète JavaScript Image roulements
URL: https://www.javascriptbank.com/unobtrusive-javascript-image-rollovers-index.html



CSS
<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-->


JavaScript
<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-->


HTML
<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-->