Rechercher : dans
Par :

Javascript: setTimeout image sur même écran

Dernière réponse le 4 fév 2009 à 22:50:55 Claudius, le 6 jan 2009 à 15:45:55 
 Signaler ce message aux modérateurs

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 ?
-->

Configuration: Windows XP
Internet Explorer 6.0

Meilleures réponses pour « javascript: setTimeout image sur même écran » dans :
Javascript - Librairies d'effets pour vos images VoirAu gré de vos explorations du web, vous avez vu de superbes effets de présentation des images. Et ça vous plairaît bien de pouvoir proposer les mêmes à vos visiteurs. Voici quelques solutions en Javascript couplées à des CSS. Elles sont plus...
Montrer une copie d'écran VoirParfois, on a besoin de montrer une copie d'écran ou une image sur un forum. voici les étapes pour y parvenir : SOMMAIRE 1 - Faire la copie d'écran ou de la fenêtre active 2 - Créer et sauvegarder l'image sur le disque dur 2.1 - Ouvrir...
Une popup d'information au survol sans Javascript ni CSS VoirParfois, il peut être utile d'afficher des informations supplémentaire au survol du curseur sur une zone de l'écran, par exemple "Cliquez pour agrandir" sur une image, un descriptif sur une abbréviation ou des détails sur un lien. On trouve...

1

 Kryss, le 4 fév 2009 à 22:50:55

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

Répondre à Kryss
Collection CommentÇaMarche.net