Page 1 sur 2
Comment créer fenêtre pop-up image ?
Posté : 18 déc. 2011, 13:07
par kokoumo
Bonjour,
Pourriez-vous m'expliquer comment créer une fenêtre d'une image qui s'ouvre lorsque l'on arrive sur la page d'accueil d'un site :
Comme exemple , je voudrais faire comme çà :
http://www.lsctt.com/
Merci d'avance .
Re: Comment créer fenêtre pop-up image ?
Posté : 18 déc. 2011, 14:12
par Calimero
Bonjour,
Il s'agit d'une fausse fenêtre, composée de deux couches affichées en superposition du reste de la page. Une première couche pour "assombrir" le fond de la fenêtre et une deuxième couche contenant l'image (+ les contrôles : bouton fermer, etc...).
Tu peux le faire toi-même en html/css/javascript, ou bien utiliser une librairie javascript dédiée (mot-clé : "lightbox").
@+
Re: Comment créer fenêtre pop-up image ?
Posté : 18 déc. 2011, 14:39
par kokoumo
Tu aurais le code stp ?
Re: Comment créer fenêtre pop-up image ?
Posté : 18 déc. 2011, 14:43
par Calimero
Tu aurais le code stp ?
Non, pas avant le 25 décembre au pied du sapin.
Un petit effort de recherche ?
Re: Comment créer fenêtre pop-up image ?
Posté : 18 déc. 2011, 16:04
par kokoumo
J'ai fais pleins de recherches , mais à chaque fois , ils expliquent comment la faire apparaître EN CLIQUANT SUR UN LIEN ; hors moi il me faut une fenêtre qui s'affiche que lorsque l'utilisateur va sur la page d'accueil en arrivant sur le site
Re: Comment créer fenêtre pop-up image ?
Posté : 18 déc. 2011, 16:22
par Calimero
J'ai fais pleins de recherches , mais à chaque fois , ils expliquent comment la faire apparaître EN CLIQUANT SUR UN LIEN ; hors moi il me faut une fenêtre qui s'affiche que lorsque l'utilisateur va sur la page d'accueil en arrivant sur le site
Voilà qui est plus précis
Ca dépend un peu du framework javascript sur lequel tu t'appuies, s'il y en a un.
Dans la négative, pour lancer un bout de javascript au chargement de la page il suffit de l'écrire dans l'élement <body> :
<!DOCTYPE html>
<html>
<head>
<title>test </title>
</head>
<body>
<script type="text/javascript">
// remplacer cette boite d'alerte par quelquechose de plus utile
window.alert('lance moi une lightbox');
</script>
</body>
</html>
Re: Comment créer fenêtre pop-up image ?
Posté : 18 déc. 2011, 16:26
par Cricks
pas besoin de faire des recherches sur google, tout le code est dans la page:
-en faisant un clic droit sur l'image, tu vois qu'elle s'appelle affiche-home-mjpatch.jpg
Tu regardes juste au début du code source après la balise <body> et tu vois ça :
<a href="affiche-home-match.jpg" rel="lightbox" title="Prochain rendez-vous !"></a>
dans la partie <head> de la page, tu vois le script lightbox:
<script src="
http://www.lsctt.com/js/lightbox.js" type="text/javascript"></script>
voili voilou. observe le code, ça te permettra d'apprendre le CSS et le javascript.
Re: Comment créer fenêtre pop-up image ?
Posté : 18 déc. 2011, 16:35
par kokoumo
Merci !
Donc j'ai juste à faire un copier-coller de ce que tu as trouver sur le code source de la page , remplacer le nom de mon affiche , et çà marchera ?
Re: Comment créer fenêtre pop-up image ?
Posté : 18 déc. 2011, 16:49
par Cricks
Tu dois faire des tests, et si ça marche pas, trouver ton erreur. Nous autres codeurs passons des heures à débugger.
c'est comme ça que tu apprendras. Tu t'inspires de ce qu'on fait les autres, puis tu l'améliores. en faisant beaucoup d'auto-formation: HTML+CSS+Javascript
tiens-nous au courant si tu y arrives, qu'on voit le résultat.
Re: Comment créer fenêtre pop-up image ?
Posté : 18 déc. 2011, 17:05
par kokoumo
Ok j'essaye en fin d'apres-midi , soyez-la dans la soirée :p
Re: Comment créer fenêtre pop-up image ?
Posté : 18 déc. 2011, 17:17
par Cricks
bonne programme. ça reste du pompage, mais ça te permettra d'apprendre quelques bases.
Re: Comment créer fenêtre pop-up image ?
Posté : 18 déc. 2011, 19:11
par kokoumo
Ca marche , à moitié ! ^^
Donc voilà mon site :
http://www.cambordeauxtt.com/
J'ai mis dans head : <script src="
http://www.lsctt.com/js/lightbox.js" type="text/javascript"></script>
et dans body : <a href="images/pop.jpg" rel="lightbox" title="ATTENTION !"></a>
La fenêtre s'affiche sauf qu'en bas de l'image il y a :
ATTENTION !
Cliquez sur x ou sur l'Image pour fermer
Lorque je change le script par l'adresse de mon site : cambordeauxtt.com , la fenêtre ne s'affiche plus .
Pourriez-vous m'éclaircir ^^
Merci
Re: Comment créer fenêtre pop-up image ?
Posté : 18 déc. 2011, 20:12
par Cricks
Bon, je vois que ça marche très bien.
si tu veux mettre l'adresse de ton site comme ceci : <script src="
http://http://www.cambordeauxtt.com/js/lightbox.js" type="text/javascript"></script>
tu crées un répertoire "js" à la racine de ton site, tu télécharges le script lightbox.js et tu l'upload dans ton propre répertoire "js".
Re: Comment créer fenêtre pop-up image ?
Posté : 18 déc. 2011, 21:23
par Cricks
Pour le texte indésirable qui s'affiche en dessous de ton image, sois logique : il vient du script lightbox.js
Donc tu le cherches dedans et tu le supprimes.
la ligne est celle-ci :
objKeyboardMsg.innerHTML = 'Cliquez sur <kbd>x</kbd> ou sur l\'Image pour fermer';
(la balise <kbd> permet de fermer l'image au clavier en appuyant sur la touche X)
tu la remplaces par :
objKeyboardMsg.innerHTML = ' ';
tu sauvegardes, tu uploade sur ton site. et voilà.
Re: Comment créer fenêtre pop-up image ?
Posté : 19 déc. 2011, 00:53
par kokoumo
C'est bon çà marche merci !!
Parcontre ca n'assombri pas la page d'accueil , et il n'y a pas de cadre gris autour de l'image ... Donc le ATTENTION en bas de l'image ne se voit pas trés bien ..