![]() |
![]() |
|
||||
|
Usefull JavaScripts
JavaScript Collector Unobtrusive JavaScript Image Rollovers Create Domain Name Registration, E-mail, Web Hosting rollovers for your JavaScript navigation without hardcoding any JavaScript into the ... detail How to setup Step 1: CSS below for styling thescript, place it into HEAD section CSS Code:
<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 Code:
<script language="javascript">
/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
By: Christian Watson :: http://www.smileycat.com
Based on a script by Chris Nott: http://www.dithered.com/javascript/rollovers/index.html
License: 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 loading
if (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 Code:
<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
-->
JavaScript Bookmark Page script - JavaScript Color Wheel - JavaScript Image slideshow
Quote:
|
|
||||
|
Many thank's for your attention or thread.
|
|
||||
|
Last edited by arbaba; 10-26-2009 at 09:44 AM. |
|
||||
|
Many thanks for sharing java codes with us. this was of gr8 use for me.
keep posting such new codes. |
![]() |
| Thread Tools | |
| Display Modes | |
|
|
![]() |
![]() |
![]() |