Fade'a mellan två bilder

mmmMangeMedlem sedan jan. 2005110 inlägg

12 jan. 2006 09:53#1

Tänkte lägga upp mina foton på min hemsida, och ha miniatyrbilder längst ner på sidan. Sedan när man klickar på en miniatyrbild ska den fadeas in ovanpå den tidigare visade bilden.

Hittade ett javaskript (http://www.webforum.nu/showthread.php?s=&forumid=24&threadid=84406) som jag modifierade lite. Nu får jag det nästan att funka som jag vill, men det fungerar bara varannan gång! Fattar inte varför, antagligen nån liten miss nånstans bara. Testsidan finns att betrakta på http://prototypes.fjorton.net/js_transition.php5.

Här är hela sidkoden

<html>
<head>
<script>
    var str_act_photo = 'photo_b';
    var str_tmp_photo = 'photo_a';
    var str_filename = 'photo00450.jpg';

    function startimgtrans(str_new_filename){
        obj_act_photo = document.getElementById( str_act_photo );
        obj_tmp_photo = document.getElementById( str_tmp_photo );
        obj_tmp_photo_img = document.getElementById(str_tmp_photo + '_img');

        str_filename = str_new_filename;
        obj_tmp_photo_img.src = str_filename;
        fade(4, 0);
        obj_tmp_photo.style.zIndex = '10';
        obj_act_photo.style.zIndex = '5';

        return true;
    }
    
    function fade(diff,opacity){
        obj_tmp_photo = document.getElementById( str_tmp_photo );

    	opacity = (opacity) ? opacity : (diff<0) ? 100 : 0;
        opacity += diff;
        
    	if(document.getElementById&&document.all){
    		obj_tmp_photo.style.filter="alpha(opacity="+opacity+")";
    	}
        else if(document.getElementById&&!document.all){
    		obj_tmp_photo.style.MozOpacity = opacity/100;
    	}
    	
    	if(opacity>=100){
            str_tmp = str_act_photo;
            str_act_photo = str_tmp_photo;
            str_tmp_photo = str_tmp;
            
            endimgtrans();
    	}
        else if(opacity>0){
    		setTimeout("fade("+diff+","+opacity+");",10);
    	}
    	
    	return true;
    }
    
    function endimgtrans(){
        obj_act_photo = document.getElementById( str_act_photo );
        obj_tmp_photo = document.getElementById( str_tmp_photo );
        obj_tmp_photo_img = document.getElementById(str_tmp_photo + '_img');

        obj_tmp_photo_img.src = str_filename;
        
        return true;
    }
</script>
</head>
<body>

<div id="photo_a" style="width: 600px; height: 600px; z-index: 5; position: absolute;"><img id="photo_a_img" src="photo00450.jpg"></div>
<div id="photo_b" style="width: 600px; height: 600px; z-index: 10;"><img id="photo_b_img" src="photo00450.jpg"></div>

<a href="#" onClick="javascript: startimgtrans('photo00450.jpg');"> 450 </a>
<a href="#" onClick="javascript: startimgtrans('photo00451.jpg');"> 451 </a>
<a href="#" onClick="javascript: startimgtrans('photo00452.jpg');"> 452 </a>

</body>
</html>