Diapo en fondu enchaine

Soyez le premier à donner votre avis sur cette source.

Vue 40 479 fois - Téléchargée 4 128 fois

Description

diapo en fondu enchaine c'est exactement sa des image qui s'enchaine avec un effet de fondu il y a quatre script un par selectione de l'image avec la sourie un autre avec bouton marche arret un avec marche arret au passage de la sourie et le dernier automatique les script peuvent paraitre cour mais il sont efficaces et simple a mettre en oeuvre compatible ie ff safa opera chrome et aussi IE 7 et 8 beta 2. afin d'optimise l'afichage il peut etre interressant d'ajouter un prechargement d'image

Source / Exemple :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html <html xmlns="http://www.w3.org/1999/xhtml">
<head> 
<script>
var oxo=1;
var opaa=0;
var opab=100;
function defilmage(selimage){
if(oxo==1){
opaa=30;
document.getElementById('divimageb').src=selimage+".jpg";
oxo=0;
}
imacibleb=document.getElementById('divimagea');
imaciblea=document.getElementById('divimageb');
if(imacibleb.src==imaciblea.src){
return false;
}
opaa+=5;
opab-=10;
if(document.all && !window.opera){ 
imaciblea.style.filter = 'alpha(opacity=' + opaa + ');' ;
imacibleb.style.filter = 'alpha(opacity=' + opab + ');';
} 
else{ 
imaciblea.style.opacity = opaa/100;
imacibleb.style.opacity = opab/100;
}
if(opaa>=100){
opaa=30;
opab=100;
document.getElementById('divimagea').src=document.getElementById('divimageb').src
return false;
}
setTimeout("defilmage()",25);
}
</script>
</head>
<body>
<div id="divconteneur"STYLE="position:absolute;top:150px;left:50px;">
<img id='divimagea' src="1.jpg" STYLE="position:absolute;width:15em;height:15em;opacity:100;FILTER:alpha(opacity=100)">
<img id='divimageb' src="3.jpg" STYLE="position:absolute;width:15em;height:15em;opacity:0;FILTER:alpha(opacity=0)">
</div>
<img src="1.jpg" STYLE="width:7em;height:7em;" onmouseover="oxo=1;defilmage('1')">
<img src="3.jpg" STYLE="width:7em;height:7em;" onmouseover="oxo=1;defilmage('3')">
<img src="4.jpg" STYLE="width:7em;height:7em;" onmouseover="oxo=1;defilmage('4')">
<img src="5.jpg" STYLE="width:7em;height:7em;" onmouseover="oxo=1;defilmage('5')">
<img src="6.jpg" STYLE="width:7em;height:7em;" onmouseover="oxo=1;defilmage('6')">
</body>
</html>

Conclusion :


ca marche CA MAAAAAAACHE

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
2
Date d'inscription
samedi 12 septembre 2009
Statut
Membre
Dernière intervention
14 juillet 2011

C'est bon ! Je viens de trouver! Merci super script !!!! 10/10 !!
Messages postés
2
Date d'inscription
samedi 12 septembre 2009
Statut
Membre
Dernière intervention
14 juillet 2011

Bonjour! Super ce code! Mais comment personnaliser les dimensions des images ?!
Messages postés
1
Date d'inscription
jeudi 23 juin 2011
Statut
Membre
Dernière intervention
13 juillet 2011

Exactement ce que je cherchais, simple, facile à paramétrer... superbe travail, un grand merci
Messages postés
3
Date d'inscription
samedi 14 mai 2011
Statut
Membre
Dernière intervention
18 mai 2011

RE
Je n'ai pu resoudre le probleme du cadre apparaissant lors de mon fondu sur le diaporama pares les deux premieres images. J'avais inclu le code, et je serais pret a mettre le site en ligne si je pouvais resoudre ce probleme
Messages postés
3
Date d'inscription
samedi 14 mai 2011
Statut
Membre
Dernière intervention
18 mai 2011

RE
Merci pour ta reponse, j'apprecie, cependant, je me suis mal exprime. l'image est chargee mais lors de son chargement apparait tres rapidement un cadre gis en son pourtour et un logo image au centre.

je te joins le code si ca peut t'aider!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>###</title>
<style type="text/css">
<!--
#container {
height: 650px;
width: 1024px;
}
#header {
float: left;
height: 90px;
width: 300px;
margin-top: 60px;
margin-left: 63px;
}
#contenu {
float: left;
height: 500px;
width: 1024px;
margin-top: 25px;
}
#menusousmenu {
float: left;
height: 400px;
width: 270px;
color: #CCC;
}
#image {
float: right;
height: 450px;
width: 500px;
margin-right: 100px;
margin-top: 3px;
}
body {
background-color: #000;
}
#image2 {
height: 333px;
width: 500px;
}
-->
</style>
<link href="../CSS/MENU.css" rel="stylesheet" type="text/css" />
<link href="../CSS/SOUS MENU.css" rel="stylesheet" type="text/css" />
<link href="../CSS/BLOC5.css" rel="stylesheet" type="text/css" />
</head>
<script>

tbimage=new Array('ROOFTOP_AT_IL_GAMBERO _003','JIMMY_JAMZ _001','PARAGON_003','LAVAZZA_MARQUEE_2009_001','LAVAZZA_2010_001','CATALANO_HOUSE_LIVING_001') //tableau des image mettre le nom de toutes les images
preImages=new Array
var opaa=0;
var opab=25;
var compteur=1
var vitesse=4000

function precharge() {
for (i = 0; i < tbimage.length; i++) {
preImages[i] = new Image()
preImages[i].src = '../IMAGES/HOME/'+tbimage[i]+'.jpg'
}
setTimeout(defilmage,vitesse);
}

function defilmage(reg){
oxo=reg;
if(compteur==tbimage.length-1){
compteur=-1
}
if(oxo==1){
compteur++
opaa=10;
document.getElementById('divimageb').src="../IMAGES/HOME/"+tbimage[compteur]+".jpg";
oxo=0;
}
var imacibleb=document.getElementById('divimagea');
var imaciblea=document.getElementById('divimageb');

opaa+=3;
opab-=4;
if(document.all && !window.opera){
imaciblea.style.filter = 'alpha(opacity=' + opaa + ');' ;
imacibleb.style.filter = 'alpha(opacity=' + opab + ');';
}
else{
imaciblea.style.opacity = opaa/100;
imacibleb.style.opacity = opab/100;
}
if(opaa>=100){
opaa=10;
opab=100;
var xcc=imaciblea.src.length-4
var cxx=imaciblea.src.lastIndexOf("/")+1
var nomimg=imaciblea.src.substring(cxx,xcc)
imacibleb.src='images/'+nomimg+'.jpg'
setTimeout("defilmage(1)",vitesse);
return false
}
setTimeout("defilmage()",25);
}
if(navigator.appName.substring(0,3)=="Mic"){
attachEvent("onload",precharge);
}
else{
addEventListener("load", precharge, false);
}
</script>
</head>


















<li>[HOME.html HOME]</li>
<li>[ABOUT.html PROFILE]</li>
<li>[INTERIOR.html INTERIOR]</li>
<li>[INTERIOR_RESIDENTIAL.html RESIDENTIAL]</li>
<li>[INTERIOR_COMMERCIAL.html COMMERCIAL]</li>
<li>[INTERIOR_HOSPITALITY.html HOSPITALITY]</li>
<li>[INTERIOR_RETAIL.html RETAIL]</li>
<li>[INTERIOR_EXHIBITION&INSTALLATION.html EXHIBITION AND INSTALLATION]</li>
<li>[PRODUCT_LIST.html PRODUCT]</li>
<li>[PRESS_001.html PRESS]</li>
<li>[CONTACT.html CONTACT]</li>




</html>
Afficher les 78 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.