Javascript: setTimeout image sur même écran
Claudius
-
Kryss -
Kryss -
Bonjour,
Bonjour, mon problème est que la 2° image, appelée avec javascript, s'affiche sur un écran blanc, masquant la 1°.
Comment faire afin que le 1° écran ne soit pas masqué et que les 2 images soient visibles ?
Ci-dessous, le code que vous pouvez recopier sur une page html afin de tester le problème.
Merci de votre réponse judicieuse et rapide !
<html>
<head>
<title>Essai d'incrustation d'image</title>
<SCRIPT LANGUAGE="Javascript">
function start()
{
//essai d'affichage de l'image supplémentaire qui s'affiche à gauche après un délai de 3 secondes
document.write('<img border="0" src="matos_voeux_b_annee/ange14.gif">')
}
</SCRIPT>
</head>
<body>
<!--L'image qui est déjà sur la page. Elle s'affiche à droite de l'écran-->
<img border="0" src="matos_voeux_b_annee/ange13.gif" width="80" height="80" align="right">
<script language="JavaScript" type="text/javascript">
comp=(setTimeout("start()",3000));
</script>
</body>
</html>
<!--REMARQUE: On constate que la nouvelle image masque tout le reste de l'écran.
Comment l'incruster dans la page afin que ce qui s'y trouve déjà reste visible,
c'est-à-dire que l'on voie les deux images ?
-->
Bonjour, mon problème est que la 2° image, appelée avec javascript, s'affiche sur un écran blanc, masquant la 1°.
Comment faire afin que le 1° écran ne soit pas masqué et que les 2 images soient visibles ?
Ci-dessous, le code que vous pouvez recopier sur une page html afin de tester le problème.
Merci de votre réponse judicieuse et rapide !
<html>
<head>
<title>Essai d'incrustation d'image</title>
<SCRIPT LANGUAGE="Javascript">
function start()
{
//essai d'affichage de l'image supplémentaire qui s'affiche à gauche après un délai de 3 secondes
document.write('<img border="0" src="matos_voeux_b_annee/ange14.gif">')
}
</SCRIPT>
</head>
<body>
<!--L'image qui est déjà sur la page. Elle s'affiche à droite de l'écran-->
<img border="0" src="matos_voeux_b_annee/ange13.gif" width="80" height="80" align="right">
<script language="JavaScript" type="text/javascript">
comp=(setTimeout("start()",3000));
</script>
</body>
</html>
<!--REMARQUE: On constate que la nouvelle image masque tout le reste de l'écran.
Comment l'incruster dans la page afin que ce qui s'y trouve déjà reste visible,
c'est-à-dire que l'on voie les deux images ?
-->
A voir également:
- Javascript: setTimeout image sur même écran
- Telecharger javascript - Télécharger - Langages
- A javascript error occurred in the main process - Forum Handicap / Accessibilté
- Afficher un tableau javascript en html ✓ - Forum Javascript
- Javascript arrondi - Forum Javascript
- Javascript arrondi après la virgule ✓ - Forum Windows
1 réponse
Pas le temps de faire du texte ! ! ! ! :
revois ta page htm avec (entre <td> par ex) :
<div id="xxx" STYLE="position: absolute; left=0; top=0;">
<img id='imgUp' src='Img001.jpg'
STYLE="opacity: 100; filter: alpha(opacity=100); position: absolute; left=0; top=0;"
width="482" height="480">
<img id='imgDn' src='Img002.jpg'
STYLE="opacity: 0; filter: alpha(opacity=0); position: absolute; left=0; top=0;"
width="482" height="480">
</div>
Opacity et filter: alpha(opacity précisent le niveau de transparence de l'img (0=transp. 100=opaque)
position : absolute permet de mettre les images où on veut (ds cet ex. elles sont superposées!)
entre les balises <head> :
function fadeUpDn(){ On fadeOut imUp et simultanément FadeIn ImgDn !!!!
var iUp=document.getElementById('imgUp');
var iDn=document.getElementById('imgDn');
opUp--; opDn++;
if(document.all && !window.opera){ // navigateurs récents
iDn.style.filter = 'alpha(opacity=' + opDn + ');' ;
iUp.style.filter = 'alpha(opacity=' + opUp + ');' ;
} else{ // anciens navigateurs
iUp.style.opacity = opUp/100;
iDn.style.opacity = opDn/100;
}
if(opUp<=0) { // on a atteint opacité 0 /up et Opacité 100 /dn !!!!
return; }
setTimeout("fadeUpDn()",30); // récurrence de la fonction pour atteindre opa=0 / imgUp
// 30millisecs * 100 = 3000 => effet dure 3s.
}
---------------
Lancer la fonction tel que : onLoad='setTimeout("fadeUpDn()",3000);' Lane 3s après page chargée !
...ou onMouseOver (ou click etc...) ="fadeUpDn();"
Attention saisie texte à la volée : possible pbs de syntaxe !!!!
Kryss l'Haschichin
revois ta page htm avec (entre <td> par ex) :
<div id="xxx" STYLE="position: absolute; left=0; top=0;">
<img id='imgUp' src='Img001.jpg'
STYLE="opacity: 100; filter: alpha(opacity=100); position: absolute; left=0; top=0;"
width="482" height="480">
<img id='imgDn' src='Img002.jpg'
STYLE="opacity: 0; filter: alpha(opacity=0); position: absolute; left=0; top=0;"
width="482" height="480">
</div>
Opacity et filter: alpha(opacity précisent le niveau de transparence de l'img (0=transp. 100=opaque)
position : absolute permet de mettre les images où on veut (ds cet ex. elles sont superposées!)
entre les balises <head> :
function fadeUpDn(){ On fadeOut imUp et simultanément FadeIn ImgDn !!!!
var iUp=document.getElementById('imgUp');
var iDn=document.getElementById('imgDn');
opUp--; opDn++;
if(document.all && !window.opera){ // navigateurs récents
iDn.style.filter = 'alpha(opacity=' + opDn + ');' ;
iUp.style.filter = 'alpha(opacity=' + opUp + ');' ;
} else{ // anciens navigateurs
iUp.style.opacity = opUp/100;
iDn.style.opacity = opDn/100;
}
if(opUp<=0) { // on a atteint opacité 0 /up et Opacité 100 /dn !!!!
return; }
setTimeout("fadeUpDn()",30); // récurrence de la fonction pour atteindre opa=0 / imgUp
// 30millisecs * 100 = 3000 => effet dure 3s.
}
---------------
Lancer la fonction tel que : onLoad='setTimeout("fadeUpDn()",3000);' Lane 3s après page chargée !
...ou onMouseOver (ou click etc...) ="fadeUpDn();"
Attention saisie texte à la volée : possible pbs de syntaxe !!!!
Kryss l'Haschichin
