Free JavaScripts and DHTM script: Basic Fading Image Script

» home
» contact
» terms of use

FREE SCRIPTS

» new
» text
» image
» utility
» background
» animation
» date/time

FREE ONLINE TOOLS

» code generators
» text animator
» drawing animator
» color animator
» slideshow factory
» javascript speed test

FREE BASIC SNIPLETS

» alert box
» image: multi-rollover
» pop-up: centering
» more

FREE'N'CRAZY

» realtime death counter
» eyeQ
» fun ticker

RECOMMENDED LINKS

» www.dynamicdrive.com
» www.hotscripts.com

Free JavaScript: Basic Fading Image Script
This free JavaScript creates a very smooth image fade in and fade out effect on mouseover. Crossbrowser: Internet Explorer 6x/7x/8x, Firefox 2x/3x, Opera 7x/8x/9x/10x, Google Chrome 3x/4x/5x.

Configuration:

Step 1: Open the webpage that will display your image(s). Put the following code between the <head>-tag and </head>-tag:

// IMPORTANT:
// If you add this script to a script-library or script-archive
// you have to add a highly visible link to
// http://www.fabulant.com on the webpage
// where this script will be featured

// Set the start opacity. A low value means a high opacity
var op_start=30

// Set the speed of tranpraeny change. The value my reange from 1 to 10
var op_speed=4

// Do not edit below this line
var op=op_start
var obj
var flag=true

var timershow
function showinit(thisimg){
	obj=thisimg;
	flag=true
	showimg()
}

function showimg(){
	if (op<100 && flag) {
		if (document.all) {
    		obj.filters.alpha.opacity=op
		}
		else {
			obj.style.opacity=op/100
		}
		op+=op_speed;
		var timershow=setTimeout("showimg()",30)
	}
	else {
		clearTimeout(timershow);
		op=op_start
	}
}

function hideimg(thisimg){
	clearTimeout(timershow);
	flag=false
	if (document.all) {
    	thisimg.filters.alpha.opacity=op_start
	}
	else {
		thisimg.style.opacity=op_start/100
	}
}
</script>

Step 2: Open your webpage. Configure the code for your image according to the colorized explanations below.

The red code is the path and name of your image.
The blue code must be placed inside the <img>-tag. Do not change the blue code.
The green number sets the starting opacity effect.
0.2 is for Firefox, Opera and Chrome. Set the value between 0.1 to 1.
20 is for Internet Explorer. Set a value between 1 to 100.