Nu får du lige en klump data, jeg lavede for laang tid siden. Det har lidt i samme stil som det du gerne vil.
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
</HEAD>
<BODY>
<script>
var images = new Array("1.jpg","2.jpg","3.jpg","4.jpg","5.jpg");
/* General Functions */
var ie;
var timeOut;
var lastImage = 0;
var fadeElm = new Array();
function browser(){
ie = (document.all) ? true : false;
}
function getE(id){return document.getElementById(id);}
/************************/
function preloadImages(vImages){
var oImg = new Image();
for(i=0;i<vImages.length;i++){
oImg.src = vImages[i];
}
}
function initPage(){
browser();
preloadImages(images,"images");
}
// startFading(vObj,vDT,vType) starts to fade a object
// vObject = reference to the object to be faded, vDT is delaytime, vType can be "in" "out"
function startFading(vObj,vDT,vType){
var found = false;
var elmsCount = fadeElm.length;
for(i=0;i<elmsCount;i++){
if(fadeElm[i][0] == vObj){
found = true;
if(vType=="out"){
fadeElm[i][1] = vDT;
fadeObjOut(i);
}
else{
fadeElm[i][1] = vDT;
fadeObjIn(i);
}
break;
}
}
if(!found){
fadeElm[elmsCount] = new Array();
fadeElm[elmsCount][0] = vObj;
fadeElm[elmsCount][1] = vDT;
if(vType=="out"){
fadeObjOut(elmsCount);
}
else{
fadeObjIn(elmsCount);
}
}
}
function getIndexWithObj(vObj){
var elmsCount = fadeElm.length;
for(i=0;i<elmsCount;i++){
if(fadeElm[i][0] == vObj){
return i;
}
}
return -1;
}
function setOpacity(vObj,vVal){
if(ie){
vObj.filters.alpha.opacity = vVal;
}
else{
vObj.style.MozOpacity = vVal/100;
}
}
function fadeObjOut(index){
var vObj = fadeElm[index][0];
try{clearTimeout(fadeElm[index][2]);}
catch(e){}
var opa = (ie) ? vObj.filters.alpha.opacity : vObj.style.MozOpacity;
if(!ie){ opa = opa*100; if(opa<1) opa=0;}
if(opa>0){
setOpacity(fadeElm[index][0],opa-2);
fadeElm[index][2] = setTimeout(function(){fadeObjOut(index)},fadeElm[index][1]);
}
}
function fadeObjIn(index){
var vObj = fadeElm[index][0];
try{clearTimeout(fadeElm[index][2]);}
catch(e){}
var opa = (ie) ? vObj.filters.alpha.opacity : vObj.style.MozOpacity;
if(!ie){ opa = opa*100;}
if(opa < 100){
setOpacity(fadeElm[index][0],opa+2);
fadeElm[index][2] = setTimeout(function(){fadeObjIn(index)},fadeElm[index][1]);
}
}
function rotateImg(vObj){
if(lastImage<images.length){
lastImage++;
vObj.src = images[lastImage];
setTimeout(function(){fadeObjIn(vObj),10},100);
}
else{
lastImage = 0;
vObj.src = images[lastImage];
setTimeout(function(){fadeObjIn(vObj),10},100);
}
}
//filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;
window.onload = initPage;
</script>
<P> </P>
<input type="button" onClick="fadeObjOut(getE('img1'));" value="fadeObjOut">
<input type="button" onClick="fadeObjIn(getE('img1'));" value="fadeObjIn" id=button1 name=button1>
<div>Pic1:<br>
<img id="img1" src="images/1.jpg" width="400" height="300"
style="filter:alpha(opacity=100);-moz-opacity:1;" onMouseOver="startFading(this,1,'out')" onMouseOut="startFading(this,10,'in');">
</div>
<div>Pic2:<br>
<img src="images/3.jpg" width="400" height="300"
style="filter:alpha(opacity=100);-moz-opacity:1;" onMouseOver="startFading(this,50,'out')" onMouseOut="startFading(this,20,'in');">
</div>
<div>Pic2:<br>
<img src="images/2.jpg" width="400" height="300"
style="filter:alpha(opacity=100);-moz-opacity:1;" onMouseOver="startFading(this,100,'out')" onMouseOut="startFading(this,30,'in');">
</div>
<div id="debug"></div>
</BODY>
</HTML>
