Afficher une image avec javascript
Claudius
-
claude -
claude -
Bonjour,
Sur une page .htm sur laquelle se trouve déjà une image (dans l'exemple, c'est "ange13.gif"), je souhaite afficher ne image supplémentaire quelques secondes après l'affichage de cette page.
Or, l'image supplémentaire "ange14.gif" s'affiche bien, mais tout ce qui est au préalable sur la page est masqué !
Quelle instruction permet de visionner l'ensemble ?
Voici le script de l'ensemble. Faites l'essai sur une page .htm vierge.
<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.writeln('<img border="0" src="matos_voeux_b_annee/ange14.gif" width="80" height="80">')
}
</SCRIPT>
</head>
<body>
<!--L'image suivante est en place 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 ?
-->
MERCI.
Sur une page .htm sur laquelle se trouve déjà une image (dans l'exemple, c'est "ange13.gif"), je souhaite afficher ne image supplémentaire quelques secondes après l'affichage de cette page.
Or, l'image supplémentaire "ange14.gif" s'affiche bien, mais tout ce qui est au préalable sur la page est masqué !
Quelle instruction permet de visionner l'ensemble ?
Voici le script de l'ensemble. Faites l'essai sur une page .htm vierge.
<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.writeln('<img border="0" src="matos_voeux_b_annee/ange14.gif" width="80" height="80">')
}
</SCRIPT>
</head>
<body>
<!--L'image suivante est en place 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 ?
-->
MERCI.
A voir également:
- Afficher une image en javascript
- Supprimez les composantes rouge et verte de cette image. quel mot apparaît ? - Forum Word
- Légender une image - Guide
- Image iso - Guide
- Transformer une image en icone - Guide
- Image de manchots sur une image de plage. - Forum Graphisme
1 réponse
Pour ce faire vous devez utiliser une balise <div> et sa propriété innerHTML liée à un identifiant
Dons dans votre balise <body>
ecrire:
<div id="maBalise">
insérer ici le code pour votre première image
</div>
puis dans un script dans la balise <head> mettre une fonction du type
fonction ajouteImage(){
var identifiant = document.getElementById("maBalise");
var ecrire = "<img src='firstImage.gif'>";
ecrire += "<img src='secondeImage.gif'>"; //attention code html
identifiant.innerHTML = ecrire; //ecrit dans votre balise div le code HTML
}
Part ailleurs pour réaliser un fonction d'attente type sleep allez à l'adresse:
http://jpconnexion.free.fr/divers_fr/divers15_wait_sleep_pause.html
si vous rencontrer des problèmes me contacter : claudecnx@blanquefort.net
Dons dans votre balise <body>
ecrire:
<div id="maBalise">
insérer ici le code pour votre première image
</div>
puis dans un script dans la balise <head> mettre une fonction du type
fonction ajouteImage(){
var identifiant = document.getElementById("maBalise");
var ecrire = "<img src='firstImage.gif'>";
ecrire += "<img src='secondeImage.gif'>"; //attention code html
identifiant.innerHTML = ecrire; //ecrit dans votre balise div le code HTML
}
Part ailleurs pour réaliser un fonction d'attente type sleep allez à l'adresse:
http://jpconnexion.free.fr/divers_fr/divers15_wait_sleep_pause.html
si vous rencontrer des problèmes me contacter : claudecnx@blanquefort.net