Une image au démarrage

Version imprimable

15/02/2008, 12h31
fix004

Une image au démarrage

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
15/02/2008, 12h55
le_chomeur

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

bonjour,

quelque chose dans ce genre là :

Code:

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>

15/02/2008, 13h13
fix004

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 ;)
15/02/2008, 13h16
le_chomeur

tu as les éléments, cherches un peu :)
15/02/2008, 14h20
fix004

c'est que j'ai du mal à comprendre, je m'y connais pas du tout en javascript :roll: j'ai regardé pas mal de topic
15/02/2008, 14h34
le_chomeur

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 ;)
15/02/2008, 15h06
Auteur
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:

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.
15/02/2008, 16h43
fix004

ca ne marche pas l 'image reste bloquée, elle ne disparait pas
mais merci quand même
15/02/2008, 16h56
E.Bzz

Citation:

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+
15/02/2008, 18h26
sachav

Je pense qu'il a copie le texte avec MaFonctionApellee() , lol :mouarf:
15/02/2008, 19h13
Auteur
Citation:

Envoyé par sachav

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

c'est possible :mrgreen:

donc pour un délai de 5 secondes :
Code:

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

voila ce que j'ai mis

Code:

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 :aie:

15/02/2008, 21h19
Auteur
Citation:

Envoyé par sachav

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

tu avais raison Sachav :mouarf:

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:

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

Code:

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>

22/02/2008, 19h21
fix004

Merci
mais l'image ne disparait pas elle reste toujours présente
22/02/2008, 22h47
Auteur

montre nous ton code complet