HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Fade-In (onmouseover of text) - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type = "text/css">
a {cursor:pointer; text-decoration:none}
#base {position:absolute; left:600px; top:550px;}
#text {position:absolute; left:500px; top:550px;}
#text1 {position:absolute; left:500px; top:650px;}
#text2 {position:absolute; left:500px; top:700px;}
#text3 {position:absolute; left:500px; top:750px;}
</style>
<script type="text/javascript">
/***********************************************
* Fade-In Images loosely adapted from:
* Ultimate Fade-In Slideshow (v1.5): © Dynamic Drive (http://www.dynamicdrive.com)
* by John Davenport Scheuer (jscheuer1) in http://www.dynamicdrive.com/forums
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
////NO need to Edit /////////////
var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers
var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all
var about=new Image();
var services=new Image();
var baseimg=new Image();
var experience= new Image();
var contact= new Image();
about.src="indexfiles/images/about2.gif";
services.src="indexfiles/images/services2.gif";
baseimg.src="indexfiles/images/base.gif";
experience.src="indexfiles/images/experience2.gif";
contact.src="indexfiles/images/contact2.gif";
if (iebrowser&&dom||dom){
document.write('<style type="text/css">')
document.write('.fadeImg { visibility: hidden; }<\/style>')
}
function fadeshow(speed, opstart, initial_delay, increment, obj, image){
this.increment=increment
this.initial_delay=initial_delay
this.opDegree=opstart<100&&opstart>=0? opstart : opstart>99? 99 : 0 //initial opacity degree
this.counter=0
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.curcanvas=obj
this.speed=speed
eval("this.curcanvas.src="+image+".src");
with (this.curcanvas.style){
filter='alpha(opacity='+this.opDegree+')'
MozOpacity=this.opDegree<100? this.opDegree/100 : 99/100
KhtmlOpacity=this.opDegree<100? this.opDegree/100 : 99/100
opacity=this.opDegree<100? this.opDegree/100 : 99/100
visibility='visible'
}
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",this.speed)
}
function fadepic(obj){
if (obj.opDegree<=100&&obj.opDegree>=0&&obj.counter>obj.initial_delay){
obj.opDegree+=obj.increment
if (obj.curcanvas.filters&&obj.curcanvas.filters[0]){
if (typeof obj.curcanvas.filters[0].opacity=="number") //if IE6+
obj.curcanvas.filters[0].opacity=obj.opDegree
else //else if IE5.5-
obj.curcanvas.style.filter="alpha(opacity="+obj.opDegree+")"
}
else if (obj.curcanvas.style.MozOpacity)
obj.curcanvas.style.MozOpacity=obj.opDegree<100? obj.opDegree/100 : 99/100
else if (obj.curcanvas.style.KhtmlOpacity)
obj.curcanvas.style.KhtmlOpacity=obj.opDegree<100? obj.opDegree/100 : 99/100
else if (obj.curcanvas.style.opacity&&!obj.curcanvas.filters)
obj.curcanvas.style.opacity=obj.opDegree<100? obj.opDegree/100 : 99/100
}
else if (obj.opDegree>=100||obj.opDegree<0){
clearInterval(fadeclear[obj.slideshowid])
return;
}
else
obj.counter++
}
function initFade(obj, speed, initial_opacity, initial_delay, increment, image){
if (iebrowser&&dom||dom){
new fadeshow (speed, initial_opacity, initial_delay, increment, obj, image)
}
}
</script>
</head>
<body bgcolor="black"; text="white">
<!-- Usage: initFade(imageObject, speed, initial_opacity, initial_delay, opacity_increment) -->
<div id="base"><a href=""><img src="indexfiles/images/base.gif" width="345" height="230" border="0"></a></div>
<div id="text" onmouseover="if(typeof flag=='undefined'){initFade(document.images[0], 20, 0, 0, 1,'about');flag=1;};" onmouseout="if(typeof flag=='undefined'){initFade(document.image[0], 20, 0, 0, 1, 'baseimg');flag=1;};"><a href="#">Text</a></div>
<div id="text1" onmouseover="if(typeof flag=='undefined'){initFade(document.images[0], 20, 0, 0, 1,'services');flag=1;};" onmouseout="if(typeof flag=='undefined'){initFade(document.image[0], 20, 0, 0, 1, 'baseimg');flag=1;};"><a href="#">Text1</a></div>
<div id="text2" onmouseover="if(typeof flag=='undefined'){initFade(document.images[0], 20, 0, 0, 1,'experience');flag=1;};" onmouseout="if(typeof flag=='undefined'){initFade(document.image[0], 20, 0, 0, 1, 'baseimg');flag=1;};"><a href="#">Text2</a></div>
<div id="text3" onmouseover="if(typeof flag=='undefined'){initFade(document.images[0], 20, 0, 0, 1,'contact');flag=1;};" onmouseout="if(typeof flag=='undefined'){initFade(document.image[0], 20, 0, 0, 1, 'baseimg');flag=1;};"><a href="#">Text3</a></div>
</body>
</html>
Image Fade-In Issue
Reply With Quote
Bookmarks