créer un site


Popups qui s'affichent en cliquant sur des liens

Aller à la page 1, 2, 3, 4, 5, 6  Suivante
Poster un nouveau sujet sur javascript   Répondre au sujet à javascript:Popups qui s'affichent en cliquant sur des liens    Accueil Forum -> javascript
Voir le sujet précédent :: Voir le sujet suivant  
Auteur Message
Tophe82
dreamweaver mioche
dreamweaver mioche
MessagePopups qui s'affichent en cliquant sur des liens , Posté le: 07-06-2005 11:57

Bonjour,

Je viens chez vous parce que vous êtes super accueillant et que vous expliquez super bien.

J'ai trouvé un système de popup qui m’intéresserait vraiment, afin d'y mettre une image et du texte.

J’ai trouvé un tuto sur un site, mais vraiment mal expliqué, enfin surtout pour moi car je sui un novice en javascript, et je n'y comprend rien.

http://css.alsacreations.com/xmedia/exemples/popup/popup.htm

Cliquez sur Lien (ouvre pop 1), je trouve ce système vraiment super.

Hélas il ne donne pas assez de renseignements pour le mettre en place par un novice.

Il donne Partie (X)HTML :

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Une popup accessible</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<script type="text/javascript" src="popup.js"></script>

<style type="text/css">
<!--
@import url(style.css);
-->
</style>
</head>
<body>

<h1>Une "popup" accessible !</h1>
<p>
<a href="#pop1" class="pop">Lien (ouvre pop1)</a> -
 <a href="#pop2" class="pop">Lien (ouvre pop2)</a>
</p>
<p>Contenu général de la page.</p>

<!-- Les boîtes popup sont placées tout en bas du document -->
<div id="pop1">
<h1>Popup !</h1>
<p>Une popup</p>
<div class="fermer">fermer la boite en cliquant dessus</div>
</div>

<div id="pop2">
<h1>Annonce</h1>
<p>Autre popup sur la page</p>
<div class="fermer">fermer la boite en cliquant dessus</div>
</div>

</body>
</html>



Ainsi que Partie JavaScript (fichier popup.js)


Code:
function pop()
{
    var myAs = document.getElementsByTagName('a');
    for (var a = 0; a < myAs.length; ++a) {
   // Si le lien a une classe de type pop
        if (myAs[a].className == 'pop') {
   // on extrait l'id de la popup à partir du href
            var pop = document.getElementById(myAs[a].href.substring(myAs[a].href.lastIndexOf('#') + 1));
   // si la popup existe on l'affiche (display block)
            if (pop) {       
                pop.style.display = 'none';
                myAs[a].onclick = function() {
                    thisPopup = document.getElementById(this.href.substring(this.href.lastIndexOf('#') + 1))
                    thisPopup.style.display = (thisPopup.style.display == 'none') ? 'block' : 'none';
                    return false;
                };
      // on efface la popup en cliquant dessus
                pop.onclick = function()
                {
                    this.style.display = 'none';
                };
            }
        }
    }
}
 
window.onload = pop;


J’ai demandé de l'aide sur le forum, mais ils ne sont pas super compréhensif, quand je leur dit que je suis débutant et qu'il me faudrait de l'aide clair, il me dit fait ça et ça.
Pour eux, c'est hyper simple et logique, pas pour moi…

Est ce que je pourrais avoir plus d'informations pour essayer de mettre cette popups qui s'affichent en cliquant sur des liens sur mon site.
J'aimerai bien savoir ou mettre ses codes, dans quelle fichier, et comment faire, a moins que vous avez un autres code mais pour la même fonction.

Merci d'avance pour votre aide. Smile
Nevinrhal
html mioche
html mioche
MessagePopups qui s'affichent en cliquant sur des liens , Posté le: 07-06-2005 12:40

alors... Je ne sais pas à quel point tu est débuttant, mais je part du principe que tu as une page .html avec un <html>,<head> et <body>... (si tu vois pas de quoi je parle, dis le moi)

pour le javascript, ya aussi : Tout javascript [http://www.toutjavascript.com/main/search.php3?new=123456]

alors pour que ca marche : enregistre le code html sous le fichier pop.html et le code javascript sous le fichier popup.js, lance alors pop.html et sa devrait fonctionner.
salemioche
salemioche
salemioche
MessagePopups qui s'affichent en cliquant sur des liens , Posté le: 07-06-2005 13:04

ce qu'il te manque c'est surement le fichier style.css

le voici

Code:

body {
background: #cccc99;
font: 1em verdana, arial, sans-serif;
}

a {
color: black;
}
a:hover {
text-decoration: none;
}

#pop1, #pop2 {
position: absolute;
top: 5em;
left: 10em;
width: 20em;
border: 3px double black;
background: #f5f5dc;
z-index: 500;
cursor: pointer;
font-size: 80%;
}
#pop1 p, #pop2 p {
margin: 0 0.3em;
}
#pop1 h1, #pop2 h1 {
font-size: 110%;
margin: 0 0 0.5em 0;
border-bottom: 1px solid black;
background: white url(top.gif) left top repeat-x;
color: black;
text-align: center;
}
.fermer {
margin: 0.5em 0 0 0;
border-top: 1px solid black;
background: white url(bottom.gif) left top repeat-x;
color: black;
text-align: center;
}


donc tu as trois fichier :
le html, popup.js et style.css

est ce que ca va mieux ?
Tophe82
dreamweaver mioche
dreamweaver mioche
MessagePopups qui s'affichent en cliquant sur des liens , Posté le: 07-06-2005 13:32

Merci déjà de m’avoir répondu,

Alors je vous explique se que j'ai fais
J’ai mis à la racine de mon site un fichier nommé popup.js avec le code que l'on a donné dans le tuto.
Je viens de créer un fichier style.css avec se que tu ma dit de faire.
Et l'autre code celui donné avec le tuto, Partie (X)HTML, je l'ai mis dans header.php, la seul partie ou l'on voit du changement, puisque sa va directement sur le thème.

Déjà comparé a plusieurs jours, il y a eu un changement de couleur, mais sinon, sa ne marche pas.
Quand je clique sur popup, et que je suis tout en haut, il me baisse légèrement la page, sans y voir une image qui apparaît.

http://www.allez-monaco.com/index.php
salemioche
salemioche
salemioche
MessagePopups qui s'affichent en cliquant sur des liens , Posté le: 07-06-2005 13:41

essaye de faire ton test en dehors de ton design, sur une page a part, pour voir que tout va bien.

et ensuite intègre le pas à pas pour voir les changements ce qui marche ou pas
Tophe82
dreamweaver mioche
dreamweaver mioche
MessagePopups qui s'affichent en cliquant sur des liens , Posté le: 07-06-2005 13:44

Du genre créer n'importe quoi comme page html (ex : test.html) et y mettre le code tout simplement pourvoir les évolutions ?
salemioche
salemioche
salemioche
MessagePopups qui s'affichent en cliquant sur des liens , Posté le: 07-06-2005 13:54

oui
Tophe82
dreamweaver mioche
dreamweaver mioche
MessagePopups qui s'affichent en cliquant sur des liens , Posté le: 07-06-2005 14:38

J'ai éssayé de de faire quelque chose, sans succès, quand on lance le lien, l'image apparait déja, et on peut pas la fermer

http://www.allez-monaco.com/test.html
Nevinrhal
html mioche
html mioche
MessagePopups qui s'affichent en cliquant sur des liens , Posté le: 07-06-2005 15:17

oublie tout ca, j'ai fait un script super simple tu comprendra mieux.
tu as deux fichier, le normal (page.html) et le pop-up (popup.html)

page.html
Code:
<html>
   <head><title>Le Pop-up</title>
      <script="JavaScript">
         function popup(page) {
            window.open(page,'popup','width=400,height=200,toolbar=false,scrollbars=false');
         }
      </script>
   </head>

   <body><a href='javascript:popup("popup.html")'>Cliquez sur ce lien</a>.</body>
</html>


popup.html
Code:
<html>
   <head><title>Le Pop-up</title></head>
   <body>Je suis un pop-up.<br><a href="javascript:window.close()">Tue-moi</a></body>
</html>
Tophe82
dreamweaver mioche
dreamweaver mioche
MessagePopups qui s'affichent en cliquant sur des liens , Posté le: 07-06-2005 15:33

ça donne cela : http://www.allez-monaco.com/test.html

C'est normal ? Question
Nevinrhal
html mioche
html mioche
MessagePopups qui s'affichent en cliquant sur des liens , Posté le: 07-06-2005 15:55

oui, c'est pas ce que tu veux ? un pop-up quoi !
Maintenant ta plus qu'a remplir.
Tophe82
dreamweaver mioche
dreamweaver mioche
MessagePopups qui s'affichent en cliquant sur des liens , Posté le: 07-06-2005 16:11

Ah ok je me disais bien qu'il y avait rien qui s'affichait lol
Je vais essayer de remplir tout se que j'ai besoin, je te tiens au courant.

Merci ! Wink
Tophe82
dreamweaver mioche
dreamweaver mioche
MessagePopups qui s'affichent en cliquant sur des liens , Posté le: 07-06-2005 17:08

euhh je crois pas que c'est sa en faite le code, a part si j'ai mal rempli

http://www.allez-monaco.com/Prochain%20match.html

Sa ferme la page directement, rien d'autre, moi se que je voudrais, c'est cliquez sur prochain match comme marqué, et qu'une image et texte apparaît, et ensuite quand je reclique dessus, l'image disparaît.

Comme ici : http://css.alsacreations.com/xmedia/exemples/popup/popup.htm

cliquez sur lien ouvre pop 1
Nevinrhal
html mioche
html mioche
MessagePopups qui s'affichent en cliquant sur des liens , Posté le: 07-06-2005 17:25

Ta mal rempli Twisted Evil Twisted Evil ... le code que tu as mis pour ta page est le code du popup, intervertis les deux.
Tophe82
dreamweaver mioche
dreamweaver mioche
MessagePopups qui s'affichent en cliquant sur des liens , Posté le: 08-06-2005 12:21

Excusez moi de ne pas avoir répondu plus vite mais j’avais un gros problème sur mon site, qui est résolu.
Pour revenir au popus, je crois que je suis une vraie quiche parce que je n’y arrive toujours pas. Embarassed
Je ne c’est pas quoi d’autre remplir à par modifier "tue-moi" ou "je suis un popus"

Sa donne toujours la même chose http://www.allez-monaco.com/page.html
Montrer les messages depuis:   
Poster un nouveau sujet sur javascript   Répondre au sujet à javascript:Popups qui s'affichent en cliquant sur des liens    Accueil Forum -> javascript Toutes les heures sont au format GMT + 1 Heure
Aller à la page 1, 2, 3, 4, 5, 6  Suivante
Page 1 sur 6

 
Sauter vers:  
S'enregistrerS'enregistrer
ProfilProfil
Se connecter pour vérifier ses messages privésSe connecter pour vérifier ses messages privés
RechercherRechercher
Liste des MembresMembres
FAQFAQ
ConnexionConnexion 


© Mentions Légales