Une image au démarrage

**fix004** · 15/02/2008, 12h31

bonjour

voila je voudrais qu'à l ouverture de mon site une image apparait puis disparait.

pas dans une fenetre pop up.

Sur la page de mon site, une image apparait au milieu puis s'en va quelque secondes plus tard, un peu comme allocine mais pas sur tout la page, on le voit aussi sur d'autre site, il y a un cadre qui s'affiche et le fond est un peu grisé, une fois cliqué on est sur le site

comme ca

http://img440.imageshack.us/img440/7113/imagecg4.png

Je ne veux pas qu'on clique sur une image pour qu'elle s'agrandisse, je veux qu'elle apparaissent automatiquement et non sur une autre page, qu'on voit le fond de mon site

voila merci de votre aide

**le_chomeur** · 15/02/2008, 12h55

Salut

Il te faut gèrer cet évènement sur le onload de ta page ...

Pour la fonction , il te faut utiliser un timeout définissant le temps que tu désires afficher ton image ...
Si tu veux ajouter de la modalité ( ce qu'il y a derrière l'image ne sois pas accessible ) je te conseille d'utiliser une div qui fait 100% de hauteur et de largeur en position fixed ( il te faudra utiliser une méthode de hack sous ie6 ) ...

Tu as toute les grandes lignes , en cherchant sur ce forum tu trouveras TOUT ce dont tu as besoins , n'hésite pas a allez consulter la faq également

**Auteur** · 15/02/2008, 12h59

bonjour,

quelque chose dans ce genre là :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
.image{
    left: 25%;
    top: 5px;
    width: 50%;
    position: absolute;
    display: block;
    border: 4px ridge #AAAAAA;
    background-color: #DDDDDD;
}
 
//-->
</style>
 
 
<script type="text/javascript">
<!--
function cacheImage()
{
 setTimeout("document.getElementById('MonImage').style.display='none'", "2000");
}
 
//-->
</script>
 
</head>
 
<body onload="cacheImage()">
 
<img id="MonImage" src="tests/images/i1.gif" class="image" />
 
<div>
 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
</div>
 
</body>
 
</html>

**fix004** · 15/02/2008, 13h13

oui dans ce style
parcontre je voudrais qu'elle reste seulement 5 sec et que l'image soit centré et non tout en haut de la page

merci beaucoup pour la rapidité de vos réponse

**le_chomeur** · 15/02/2008, 13h16

tu as les éléments, cherches un peu

**fix004** · 15/02/2008, 14h20

c'est que j'ai du mal à comprendre, je m'y connais pas du tout en javascript

j'ai regardé pas mal de topic

**le_chomeur** · 15/02/2008, 14h34

alors cherche sur ce forum ou google, l'utilisation de la fonction "setTimeout"

ainsi que sur le forum html/css avec les termes centrer un élément ...

Allez allez

**Auteur** · 15/02/2008, 15h06

pour setTimeout() :
http://javascript.developpez.com/faq...yntaxe#timeOut

personnellement, je préfère écrire le delai (en ms) sous forme de chaînes de caractères :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
setTimeout("laFonctionAppelee()", "5000");

là j'appelle la fonction après un délai de 5 secondes.

Pour le centrage vertical, c'est moins évident, il ya plusieurs cas à considérer :

cas où l'image est plus grande que la fenêtre de l'explorateur ;
cas où l'image est plus petite que la fenêtre du navigateur et là il faut connaître la hauteur de l'image et la hauteur de la fenêtre.

**fix004** · 15/02/2008, 16h43

ca ne marche pas l 'image reste bloquée, elle ne disparait pas
mais merci quand même

**E.Bzz** · 15/02/2008, 16h56

Envoyé par fix004

ca ne marche pas l 'image reste bloquée, elle ne disparait pas

On peut voir ton code actuel (HTML + Javascript) ?
Ca serait plus facile de trouver l'erreur

A+

**sachav** · 15/02/2008, 18h26

Je pense qu'il a copie le texte avec MaFonctionApellee() , lol

**Auteur** · 15/02/2008, 19h13

Envoyé par sachav

Je pense qu'il a copie le texte avec MaFonctionApellee() , lol

c'est possible

donc pour un délai de 5 secondes :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
function cacheImage()
{
 setTimeout("document.getElementById('MonImage').style.display='none'", "5000");
}

**fix004** · 15/02/2008, 19h39

voila ce que j'ai mis

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<html>
<head>
<title></title>
<style type="text/css">
<!--
.image{
    left: 25%;
    top: 5px;
    width: 50%;
    position: absolute;
    display: block;
 
}
 
//-->
</style>
 
 
<script type="text/javascript">
<!--
function cacheImage()
{
  setTimeout("laFonctionAppelee()", "5000");;
}
 
//-->
</script>
 
</head>
 
<body onload="cacheImage()">
 
<img id="MonImage" src="http://www.bbbbbb.jpg" class="image" />
 
 
 
 
</body>
 
</html>

Oui j'ai recopié j'y connais rien et je comprends rien lol

**Auteur** · 15/02/2008, 21h19

Envoyé par sachav

Je pense qu'il a copie le texte avec MaFonctionApellee() , lol

tu avais raison Sachav

fix004 : je t'ai donné un exemple d'utilisation du setTimeout(). Il ne fallait pas recopier sans comprendre, le code que j'ai donné

En plus si tu réfléchis à quoi aurait pu correspondre la donnée LaFonctionAppelee() ??

Dans ton cas, il fallait juste augmenter la durée du timer

c'est à dire :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function cacheImage()
{
 setTimeout("document.getElementById('MonImage').style.display='none'", "5000");
}

recherche la documentation de setTimeout()

**sachav** · 16/02/2008, 13h00

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
.image{
left: 25%;
top: 5px;
width: 50%;
position: absolute;
display: block;
 
}
 
//-->
</style>
 
 
<script type="text/javascript">
<!--
function cacheImage()
{
 
TempsEnSecondes = 5;
 
setTimeout("document.getElementById('MonImage').style.visibility='hidden'", TempsEnSecondes*1000);
}
 
//-->
</script>
 
</head>
 
<body onload="cacheImage()">
 
<img id="MonImage" src="http://www.bbbbbb.jpg" class="image" />
 
 
 
 
</body>
 
</html>

**fix004** · 22/02/2008, 19h21

Merci
mais l'image ne disparait pas elle reste toujours présente

**Auteur** · 22/02/2008, 22h47

montre nous ton code complet

Une image au démarrage

JavaScript

Discussions similaires

Partager

Partager