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 .
la communauté d'entraide francophone dédiée au PHP
Comment créer fenêtre pop-up image ?
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").
@+
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").
@+
Voilà qui est plus précisJ'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
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>
Modifié en dernier par Calimero le 18 déc. 2011, 16:28, modifié 1 fois.
Cricks
Invité n'ayant pas de compte PHPfrance
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.
-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.
Cricks
Invité n'ayant pas de compte PHPfrance
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.
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.
Cricks
Invité n'ayant pas de compte PHPfrance
bonne programme. ça reste du pompage, mais ça te permettra d'apprendre quelques bases.
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
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
Cricks
Invité n'ayant pas de compte PHPfrance
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".
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".
Cricks
Invité n'ayant pas de compte PHPfrance
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à.
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à.