Welcome Guest ( Log In | Register )



 
 Reply to this topicStart new topic
> Unobtrusive Javascript Image Rollovers, really cool & useful..
shiv
post Mar 21 2006, 11:54 AM
Post #1


Member [ Level 2 ]
Group Icon

Group: Members
Posts: 53
Joined: 20-March 06
Member No.: 12,139
i find this really cool..gr8 piece of code.

image rollovers

Create image rollovers for your navigation without hardcoding any JavaScript into the HTML code on your Web pages. Easy to implement, even for beginners, and works across all browsers. Degrades nicely for visitors with JavaScript turned off.

CODE

<!-- Paste this code into the CSS section of your HTML document  -->

img {border: none;}
ul {list-style-type:none;}
ul li {display:inline;}



<!-- Paste this code into an external JavaScript file named: rollover.js  -->


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 loading
if (isDefined(window.addEventListener)) {
   window.addEventListener('load', rolloverInit, false);
}
else if (isDefined(window.attachEvent)) {
   window.attachEvent('onload', rolloverInit);
}



<!-- Paste this code into the HEAD section of your HTML document.
     You may need to change the path of the file.  -->

<script type="text/javascript" src="rollover.js.js"></script>



<!-- Paste this code into the BODY tag -->

<body id="home">



<!-- Paste this code into the BODY section of your HTML document  -->

<div id="navb script:onclick=test();"><img src="home_off.gif" alt="Home" /></a></li>
  <li><a href="java script:onclick=test();"><img src="about_off.gif" alt="About" /></a></li>
  <li><a href="java script:onclick=test();"><img src="donate_off.gif" alt="Donate" /></a></li>
</ul>
</div>
<p><div align="center">
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</div><p>




cheerz!

shiv
Go to the top of the page
 
+Quote Post
« Next Oldest · JavaScript · Next Newest »
 

Reply to this topicStart new topic

Collapse

> Similar Topics

Topics Topics
  1. Getting Screen Resolution using Javascript.(8)
  2. How To Create A Popup Window With Javascript?(19)
  3. javascript vs java(12)
  4. Javascript: Disable Mouse Right-click In Browser(16)
  5. Best Way To Learn Javascript(9)
  6. Javascript: Text To Texbox And Back To Text(2)
  7. Dynamically Change The Background Image On Mouse Effects!(3)
  8. Dynamicdrive: Good Site For JavaScript Codes(5)
  9. Javascript: Simple Slidedown Menu(2)
  10. JavaScript: Simple Dropdown Menu(1)
  11. JavaScript: Hide And Show Any Element With CSS(5)
  12. Ever Needs To Find Out A Table Height Or With With JavaScript(2)
  13. Create And Import JavaScript Modules For A Large Script(2)
  14. Vertical Marquee Using JavaScript(0)
  15. JavaScript Frames & Querystring(4)
  1. JavaScript Off Redirect Script(2)
  2. Enlarge Image Script(19)
  3. Google Map Like Pins On Image(4)
  4. I Need Help With Javascript.(7)
  5. Problems With Dynamically Loading Javascript(2)
  6. Add Text To Textarea(6)
  7. Javascript Question(4)
  8. Javascript: How Do I Create Embedded Pop-up Windows?(7)
  9. Problem With Javascript Alert();(9)
  10. Include Function For Javascript(7)
  11. Fun With Javascript And Forms(2)
  12. Javascript Help Needed : Alert(z) Works Fine But Document.write Not(2)
  13. Javascript Changes Aren't Working.(6)


 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 20th August 2008 - 12:22 PM
Powered By IP.Board 2.2.1 © 2008  IPS, Inc.
Licensed to: Xisto Corporation