Demande d'aide: fondu entre deux images sous htm
Demande d'aide: fondu entre deux images sous htm - HTML/CSS - Programmation
Marsh Posté le 27-12-2011 à 11:27:07
regarde du côté de ton :
Code :
|
et de ta fonction qui te permet de faire défiler les images ...
---------------
*** [Feed-Back] AzOo ***
Marsh Posté le 27-12-2011 à 17:55:32
Hello,
Etre novice n'empêche pas de chercher un peu 
Bref, regarde à quoi te sert l'attribut onLoad de ton élément body (aide : http://www.w3schools.com/jsref/event_body_onload.asp) et ensuite utilise la fonction qui est utilisée lorsque tu cliques sur le bouton "Défilement automatique".
Je te donne pas la solution directement car tu apprendras plus en cherchant un peu et en comprenant ce que tu fais ! ^^
---------------
*** [Feed-Back] AzOo ***
Marsh Posté le 27-12-2011 à 18:10:27
Merci pour tes éclaicissements
j'ai cherché et j'ai réussi à faire cela. Par contre maintenant, je ne vois pas comment ajouter un effet de fondu. Voici le code:
<HEAD>
<script>var tab = ["IMAGE1.JPG", "IMAGE2.JPG"];
var secondes = 3;
var numero = -1;
var
aleatoire = false;function changerImage () {
if (aleatoire) {
var n = numero;
while (n == numero) {
n = Math.floor(Math.random() *
tab.length);
}
numero = n;
}
else {
numero++;
if (numero >= tab.length) numero =0;
}
document.getElementById('image1').src =
tab[numero];
setTimeout("changerImage();", secondes*1000);
}
// -->
</script>
</head>
<body>
<P ALIGN="CENTER"><img src="" id="image1">
<script type="text/javascript">
<!--
changerImage();
// -->
</script
</body>
Marsh Posté le 28-12-2011 à 10:36:31
Hello !
Alors tout ce que tu as réussi à faire c'est de copier/coller "bêtement" le code que tu as trouvé sur un autre site.
Donc finalement tu n'as rien appris du code que tu avais récupérer précédemment.
Le premier code contient une fonction qui te permet de jouer sur l'opacité d'une image, donc d'avoir ton effet de fondu.
Le second code change juste ton image aléatoirement via la fonction changerImage().
Essaye de comprendre comment le second code fonctionne, petite aide : regarde où est utilisé la fonction cité en gras au dessus dans ton code, et essaye de voir si tu ne peut pas appliquer la même astuce au premier code sans passer par le onLoad.
Voila, n'hésite pas à poser des questions, mais surtout ne reviens pas avec un 3ème code que tu auras pompé je ne sais où et que tu ne comprendras pas.
---------------
*** [Feed-Back] AzOo ***
Sujets relatifs:
- aide pour modifier un petit programme avant le 21/12, 9h
- AIDE script bash avec en sortie, arborescence navigable
- aide pour 1er partie c++
- Faire un espace entre 2 images en html
- [MySQL] Urgent, PB export dans la BDD !
- Help besoin d'aide pour un exercie logique
- Besoin d'aide svp
- Aide pour un noob
- Bash aide projet
Marsh Posté le 27-12-2011 à 07:10:36
Bonjour, j'ai trouvé le code ci-dessous pour faire fondu entre deux images. Par contre, étant novice en htm, je suis un peu paumé. Comment rendre ce défilement automatique en faisant disparaitre le bouton et la nécéssité de cliquer sur celui-ci pour démarrer le fondu? Merci de votre aide. Voici le code:
<!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" xml:lang="fr-FR" lang="fr-FR">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Fondu enchainé</title>
<style type="text/css">
h1{
text-align: center;
}
#container{
height: 600px;
}
.images{
position: absolute;
top: 5em;
z-index: 0;
}
p{
width: 800px;
text-align: center;
}
</style>
<script type="text/javascript">
var defilement = false;
var Fondu = function(classe_img){
this.classe_img = classe_img;
this.courant = 0;
this.coeff = 100;
this.collection = this.getImages();
this.collection[0].style.zIndex = 100;
this.total = this.collection.length - 1;
this.encours = false;
}
Fondu.prototype.getImages = function(){
var tmp = [];
if(document.getElementsByClassName){
tmp = document.getElementsByClassName(this.classe_img);
}
else{
var i=0;
while(document.getElementsByTagName('*')[i]){
if(document.getElementsByTagName('*')[i].className.indexOf(this.classe_img)>-1){
tmp.push(document.getElementsByTagName('*')[i]);
}
i++;
}
}
var j=tmp.length;
while(j--){
if(tmp[j].filters){
tmp[j].style.width = tmp[j].style.width || tmp[j].offsetWidth+'px';
tmp[j].style.filter = 'alpha(opacity=100)';
tmp[j].opaque = tmp[j].filters[0];
this.coeff = 1;
}
else{
tmp[j].opaque = tmp[j].style;
}
}
return tmp;
}
Fondu.prototype.change = function(sens){
var prevObj = this.collection[this.courant];
if(this.encours){
return false;
}
this.encours = true;
if(sens){
this.courant++;
if(this.courant>this.total){
this.courant = 0;
}
}
else{
this.courant--;
if(this.courant<0){
this.courant = this.total;
}
}
var nextObj = this.collection[this.courant];
nextObj.style.zIndex = 50;
var tmpOp = 100;
var that = this;
var timer = setInterval(function(){
if(tmpOp<0){
clearInterval(timer);
timer = null;
prevObj.opaque.opacity = 0;
nextObj.style.zIndex = 100;
prevObj.style.zIndex = 0;
prevObj.opaque.opacity = 100 / that.coeff;
that.encours = false;
}
else{
prevObj.opaque.opacity = tmpOp / that.coeff;
tmpOp -= 5;
}
}, 25);
}
function defil(){
var boutons = document.getElementsByTagName('input');
if(defilement){
clearInterval(defilement);
defilement = false;
boutons[1].value = 'Défilement automatique';
}
else{
monFondu.change(true);
defilement = setInterval(function(){monFondu.change(true);},2000);
boutons[1].value = 'Stopper le défilement';
}
boutons[0].disabled = !boutons[0].disabled;
boutons[2].disabled = !boutons[2].disabled;
}
</script>
</head>
<body onload="window.monFondu = new Fondu('images')">
<h1>Galerie avec effet de fondu</h1>
<div id="container">
<img class="images" src="IMAGE1.JPG" alt="Image" style="z-index:100" />
<img class="images" src="IMAGE2.JPG" alt="Image" />
<img class="images" src="IMAGE3.JPG" alt="Image" />
<img class="images" src="IMAGE4.JPG" alt="Image" />
</div>
<p><input type="button" value="<<" onclick="monFondu.change(false);" /><input type="button" value="Défilement automatique" onclick="defil()" /><input type="button" value=">>" onclick="monFondu.change(true);" /></p>
</body>
</html>