Posez votre question Signaler

Ouverture d'un pop-up personnalisable en cliquant sur une image [Résolu]

Messages postés
130
Date d'inscription
mardi 24 juin 2008
Dernière intervention
17 juin 2018
 - - Dernière réponse : @karamel
Messages postés
1666
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
23 janvier 2019
 - 22 nov. 2014 à 20:35
Javascript / DHTML Posez votre question Signaler
Bonjour,

Voilà, j'essaye désespérément de créé un pop-up personnalisable en JavaScript/CSS. Je vous explique mon procéder !

Voici le menu que j'ai créé en HTML/CSS :


Ce menu sera composé des photos des membres d'une guilde.

Moi, j'aimerais voir afficher un pop-up lorsqu'on clique sur une de ces photos en utilisant JavaScript et CSS pour le personnaliser, et cela pour chaque photo. Et c'est là que je suis coincé, d'autant plus que je ne suis pas fortiche en JS !

En résumé, je clique sur la photo "membre1" et un pop-up s'ouvre avec ses coordonnées etc... (sans quitter au préalable ma page "membres.html"). Egalement la possibilité de fermer le pop-up à l'aide d'un bouton intégré au pop-up.

Voici mes codes sources pour le HTML et le CSS :

CODE HTML "membres.html" : 
<div class="aside">
	<h3>~ Membres ~</h3>
	<ul>
	<li>
	<a href="#" class="figure"><img src="membres/autre.png" alt=""></a>
	<span><a href="#">Membre 1</a></span>
	</li>
	<li>
	<a href="#" class="figure"><img src="membres/autre.png" alt=""></a>
	<span><a href="#">Membre 2</a></span>
	</li>
	<li><a href="#" class="figure"><img src="membres/autre.png" alt=""></a>
         <span><a href="#">Membre 3</a></span>
	</li>
	<li>
	<a href="#" class="figure"><img src="membres/autre.png" alt=""></a>
	<span><a href="#">Membre 4</a></span>
	</li>
	<li>
	<a href="#" class="figure"><img src="membres/autre.png" alt=""></a>
	<span><a href="#">Membre 5</a></span>
	</li>
	<li>
	<a href="#" class="figure"><img src="membres/autre.png" alt=""></a>
	<span><a href="#">Membre 6</a></span>
	</li>
         <li>
	<a href="#" class="figure"><img src="membres/autre.png" alt=""></a>
	<span><a href="#">Membre 7</a></span>
	</li>
	<li>
	<a href="#" class="figure"><img src="membres/autre.png" alt=""></a>
	<span><a href="#">Membre 8</a></span>
	</li>
	</ul>
</div>



CODE CSS "style.css" : 
#body .games .aside {
	background: url(../images/border.gif) repeat-x top left;
	float: left;
	margin: 0 0 0 30px;
	padding: 3px 0 0;
	width: 420px;
}
#body .games .aside ul {
 *min-height: 568px;
	overflow: hidden;
	padding: 5px 8px 11px;
}
#body .games .aside ul li {
	float: left;
	margin: 11px 10px;
	width: 178px;
}
#body .games .aside ul li span a {
	font-size: 21px;
	height: 38px;
	line-height: 38px;
	text-align: center;
}



Pouvez-vous m'aider svp ?

Cordialement
Darksam
Afficher la suite 

Votre réponse

Répondre au sujet

15 réponses

Meilleure réponse
Signaler Commenter la réponse de kuetedonald
Messages postés
49
Date d'inscription
vendredi 30 mai 2014
Dernière intervention
4 octobre 2016
 3
2
Merci
voici un exemple de code pour Popup en Javascript 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> 

<html>
	<head>
		<style>
		  #popupcontent{
   position: absolute;
   visibility: hidden;
   overflow: hidden;
   border:1px solid #CCC;
   background-color:#F9F9F9;
   border:1px solid #333;
   padding:5px;
}
		</style>
	</head>
	<body>
	<div id="popupcontent">This is a popup window!</div>
	
	<script>
	  var popUp = document.getElementById("popupcontent");
	   popUp.style.top = "30%";
	   popUp.style.left = "50%";
	   popUp.style.width = w + "px";
	   popUp.style.height = h + "px";
	   
	     if (baseText == null) baseText = popUp.innerHTML;
   popUp.innerHTML = baseText + 
      "<div id=\"statusbar\"><button onclick=\"hidePopup();\">Close window<button></div>";
 
 var baseText = null;
 
function showPopup(w,h){
   var popUp = document.getElementById("popupcontent");
 
   popUp.style.top = "200px";
   popUp.style.left = "200px";
   popUp.style.width = w + "px";
   popUp.style.height = h + "px";
 
   if (baseText == null) baseText = popUp.innerHTML;
   popUp.innerHTML = baseText + 
      "<div id=\"statusbar\"><button onclick=\"hidePopup();\">Close window<button></div>";
 
   var sbar = document.getElementById("statusbar");
   sbar.style.marginTop = (parseInt(h)-40) + "px";
   popUp.style.visibility = "visible";
}

function hidePopup(){
   var popUp = document.getElementById("popupcontent");
   popUp.style.visibility = "hidden";
}
	</script>
	
	<a href="#" onclick="showPopup(300,200);" >Open popup</a>
	</body>
</html>
si tu n'est pas satisfait tu pourra tapez ceci sur google 
jQuery Modal Dialog Boxes
bonne chance.

Dire « Merci » 2

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources 116 internautes nous ont dit merci ce mois-ci

Signaler Commenter la réponse de darksam0000
darksam0000
Messages postés
130
Date d'inscription
mardi 24 juin 2008
Dernière intervention
17 juin 2018
 1 -
Ton code fonctionne parfaitement et cela pour chaque image du menu ! Le pop-up a été modifier de toute beauté grâce au CSS. Un grand merci.

Cependant je n'arrive pas a centrer le pop up au centre de l'écran par défaut. Est-ce possible de le faire ?
Commenter la réponse de kuetedonald
Signaler Commenter la réponse de darksam0000
Messages postés
130
Date d'inscription
mardi 24 juin 2008
Dernière intervention
17 juin 2018
 1
1
Merci
Vous avez toujours pas saisis, pas besoin que les membres se connectent sur le site pour cela. L'affichage des membres sur le site permet juste de voir de quoi est composée la guilde. Un affichage simple avec les photos des membres a titre indicatif. Moi ce que je voulais c'est juste :

Je clique sur la photo d'un membre et voir apparaître un pop up avec un petit texte stipulant : ce membre s'appelle membre X, il est le fondateur etc. Rien de plus.

Le code ici fonctionne bien mais le texte marqué dans le JS s'affiche le meme sur tous les pop-up.

Regardez plutôt :
Je me trouve sur la page "membre.html". Là ou sont affichés les photos des membres d'une guilde.


Je clique sur la photo du "membre 1". Et apparaît un pop-up reprenant un texte récapitulatif (max 2 voir 3 lignes) de son parcourt dans la guilde.


En résumé, quand je clique sur membre 1 ou 2 ou 3 ou 4, le texte marqué dans le pop-up est identique ... Je peux pas vous l'expliquez autrement ! Je sais que c'est possible mais je ne peux pas le faire tout seul.


Pour ce qui est de la BDD, elle est terminée. Tout ce qui touche à la connexion d'une session sur le site a été cloturer hier dans l'après midi.
Signaler Commenter la réponse de jordane45
jordane45
Messages postés
24565
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 février 2019
 362 -
Vous avez toujours pas saisis, pas besoin que les membres se connectent sur le site pour cela.

Mais je n'ai jamais parlé du fait que les membres se connectent...
Je t'ai juste dit : Si tu as une Base de données.... comment compte tu la faire interagir avec ton site... vu que tu ne fais aucun lien entre elle et tes pages web.... que pour le faire il te faut utiliser autre chose que simplement du HTML ....

En gros.. ce que tu es en train de faire .. c'est d'écrire en DUR dans ton code les informations relatives à tes membres.... donc... aucun lien avec la BDD .. et donc.. à chaque fois que tu auras un nouveau membre (ou qu'un membre partira).. tu devras éditer le code source de tes pages pour y modifier les informations que tu souhaites y afficher....
Je pense que tu n'as pas compris comment fonctionne un site web "dynamique" .



Et je vais quand même te résoudre ton souci....
lorsque tu utilises klog.logdial(0) ....
Il faut mettre dans les parenthèses le numéro de la personne correspondant au tableau.... 

klog.logdial(0)
klog.logdial(1)
klog.logdial(2)
// etc...
Signaler Commenter la réponse de darksam0000
darksam0000
Messages postés
130
Date d'inscription
mardi 24 juin 2008
Dernière intervention
17 juin 2018
 1 -
Pourrais-tu adapter le code en reprenant celui de mon dernier commentaire du bas pour exemple stp car ici je suis sur mon iPhone au boulot.

Je viens de comprendre pour la bdd. La pièce est tombée. Oui en effet pas de liaisons avec ma page html. En tout cas sur la page membres.html c'est normale du moins. C est encore une page test qui n a pas encore été intégrer au site. Les autres pages sont bien liées. Enfin presque toute car certaines n en ont pas besoin. Beaucoup de contenu statique sans php.

En créant ce tableau de membres nous voulions alléger le code en utilisant du JS. Finalement je constate que je resterais une loque en JS LOL.
Commenter la réponse de darksam0000
Signaler Commenter la réponse de @karamel
Messages postés
1666
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
23 janvier 2019
 33
1
Merci
recopie et teste le code complet que j'avais mis plus haut j'ai fait des modif qui son l'ajout d'un array comprenant un descriptif different pour chaque menbre et j'ai modifier le html au niveau du onclick en ajoutant un parametre qui est une valeur numerique corespondant au texte a afficher.

rien ne sert de courir il faut partir a point.
cours Forest cours !
Signaler Commenter la réponse de darksam0000
darksam0000
Messages postés
130
Date d'inscription
mardi 24 juin 2008
Dernière intervention
17 juin 2018
 1 -
Ça fonctionne parfaitement ! Un grand merci à toi !

Pour info : la BDD permettra uniquement aux membres d'avoir accès à un autre contenu. Dans aucun cas, les membres pourront modifier quoi que se soit sur la page "membres.html". J'aurais du le spécifier plus haut ^^

Maintenant comment dois-je faire si je veux rajouter des membres supplémentaire ?

Car l'image 9 et 10, c'est le texte 1 qui apparaît. Par contre les 8 premières images, c'est bien tous les textes différents que tu m'as mis !

Bonne journée et encore merci. ;)
Commenter la réponse de @karamel
Signaler Commenter la réponse de jordane45
Messages postés
24565
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 février 2019
 362
0
Merci
Bonjour,

As tu regardé du côté de Jquery ?
Des exemples de fenêtres modal existent en pagaille....
Le tout..; couplé avec de l'AJAX pour récupérer les informations que tu souhaites afficher.

Commenter la réponse de jordane45
Signaler Commenter la réponse de darksam0000
Messages postés
130
Date d'inscription
mardi 24 juin 2008
Dernière intervention
17 juin 2018
 1
0
Merci
Merci pour ta réponse,

Je ne connait pas bien Jquery non plus. J'ai du mal a fusionner ses fichiers avec mon code source.

Peu être pourrais-tu m'aider a modifier mon code source ?
Commenter la réponse de darksam0000
Signaler Commenter la réponse de jordane45
Messages postés
24565
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 février 2019
 362
0
Merci
J'ai du mal a fusionner ses fichiers avec mon code source

Il suffit de télécharger JQUERY : http://code.jquery.com/jquery-1.11.1.js
De mettre le fichier dans le répèrtoire de ton site.
De l'inclure dans ta page : 
<script type="text/javascript" src="chemin_du_fichier/jquery-1.11.1.js"></script>


De suivre un des tutos expliquant comment mettre en place un popup :
http://sohtanaka.developpez.com/tutoriels/javascript/creez-fenetre-modale-avec-css-et-jquery/

Si tu veux un affichage dynamique, il te faudra utiliser de l' AJAX.
Pour ce qui est de AJAX... regarder, là aussi, des exemples sur le net :
Par exemple :
http://openclassrooms.com/courses/un-site-web-dynamique-avec-jquery/le-fonctionnement-de-ajax





Commenter la réponse de jordane45
Signaler Commenter la réponse de darksam0000
Messages postés
130
Date d'inscription
mardi 24 juin 2008
Dernière intervention
17 juin 2018
 1
0
Merci
Ok je vais tester de nouveaux ce fameux "jquery" je te tiens au courant après avoir effectuer des tests.

Dans le pire des cas, je reviendrais vers toi te montrant mes avancées.

Merci
Commenter la réponse de darksam0000
Signaler Commenter la réponse de @karamel
Messages postés
1666
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
23 janvier 2019
 33
0
Merci
ce qui serait bien pour commencer serait de definir le contenu + le html css de la popup
Commenter la réponse de @karamel
Signaler Commenter la réponse de darksam0000
Messages postés
130
Date d'inscription
mardi 24 juin 2008
Dernière intervention
17 juin 2018
 1
0
Merci
kuetedonald : je ne vois pas comment je pourrais intégrer ton code source dans mes images "membres" que j'ai montré ci-dessus. Cela me semble énorme, surtout si je dois adapter ces lignes pour chaque lien "img" ! Au pire des cas, pourrais-tu essayer d'intégrer ton idée par rapport à mon code source stp ?

Peti rappel : un pop up différent doit etre ouvert sur ma page pour chaque image des membres (voir photo au dessus).

Soit, je vais tester tout cela dés que j'ai le temps et je vous tiens au courant.

Sam
Signaler Commenter la réponse de jordane45
jordane45
Messages postés
24565
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 février 2019
 362 -
Dis toi que quelle que soit la méthode que tu choisiras. ..tu n'auras qu'un seul popup...mais que tu rempliras en fonction de tes besoins (d'où l'Ajax..)
Commenter la réponse de darksam0000
Signaler Commenter la réponse de darksam0000
Messages postés
130
Date d'inscription
mardi 24 juin 2008
Dernière intervention
17 juin 2018
 1
0
Merci
Kuetedonald : Ton code fonctionne parfaitement et cela pour chaque image du menu ! Le pop-up a été modifier de toute beauté grâce au CSS.

J'ai juste ranger le code proprement dans leur "scripts respectifs" comme ceci : 
<div id="popupcontent">Affichage des coordonnées du membre</div>
      <script type="text/javascript" src="script.js"></script>
         <a href="#" onclick="showPopup(300,200);"><img src="autre.png"></a>


Dans le Javascript, tu avais également oublier les "/" à la balise "button" qui affichait un bug dans le bouton "retour" situé dans le pop up.

Dernière chose, je n'arrive pas a centrer le pop up au centre de l'écran par défaut. Est-ce possible de le faire ?
Signaler Commenter la réponse de kuetedonald
kuetedonald
Messages postés
49
Date d'inscription
vendredi 30 mai 2014
Dernière intervention
4 octobre 2016
 3 -
essaie de jouer juste avec les margins du popup et le tour es jouer
Commenter la réponse de darksam0000
Signaler Commenter la réponse de @karamel
Messages postés
1666
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
23 janvier 2019
 33
0
Merci
evite de poster plusieurs postes c'est inutile

essai comme ceci 

<!DOCTYPE html>
<html>
<head>

<style>

#divco{
position:fixed;
left:0px;
top:0px;
height:100%;
width:100%;
background:black;
filter:alpha(opacity=00);
opacity:0;
cursor:pointer;
}

#cadre{
position:fixed;
background-color:#eef2f7;
border:10px ridge #999;
font-family:"Agency FB";
font-size:18px;
color:#fff;
text-align:center;
height:280px;
width:420px;
border:10px ridge #999;
border-radius:10px;
box-shadow:0 0 15px #aaa;

}

.aside {
 background: url(../images/border.gif) repeat-x top left;
 float: left;
 margin: 0 0 0 30px;
 padding: 3px 0 0;
 width: 420px;
 background-color:#222222;
 color:white;
}
.aside ul {
 *min-height: 568px;
 overflow: hidden;
 padding: 5px 8px 11px;
}
.aside li {
 float: left;
 margin: 11px 10px;
 width: 178px;
 height:150px;
 background-color:black;
 list-style-type:none; 
}
.aside span {
 display:block;
 font-size: 14px;
 height: 38px;
 line-height: 24px;
 text-align: center;
}

.aside li:hover{
 color:red;
}

.im3{

height:20px;
width:20px;
display:block;
float:right;
background:#bbb;
border:2px solid #555;
margin:5px 5px 0px 0px;
cursor:pointer;
border-radius:11px;
color:#555;
}

.im3:hover{
border:2px solid #222;
color:#222;
}
</style>
<script>

var klog={

tb_texte:["voici le premier texte","et la c'est un deuxieme texte ","et un troisieme texte pour bien voir la difference","bon la je sai plus vraiment quoi dire","bateau sur l'eau la riviere au bord de l'eau","aaaaaaajklhj jkijljlkj hjkhlkh hjhjoiyuiy cgb","bloup bloup","et enfin le dernier membre en esperant qui tu as compris"],

num:'',

quit:function(){

  document.getElementById('divco').parentNode.removeChild(document.getElementById('divco'));
  document.getElementById('cadre').parentNode.removeChild(document.getElementById('cadre'));
  typeof window.addEventListener == 'undefined' ? window.dettachEvent("onresize",klog.centrer) : window.removeEventListener('resize',klog.centrer,false);
 },

logdial:function(numero){

  var el=document.createElement('div');
  el.id='divco';
  el.onclick=klog.quit;
  document.body.appendChild(el)
  this.num=numero
  this.fad(0); 
 },
 
fad:function(){
  
  var hou=arguments[0];
  var dic=document.getElementById('divco');
  
  if(hou<=0.5){
   hou+=0.15;
   typeof window.addEventListener == 'undefined' ? dic.style.filter = 'alpha(opacity='+(hou*100)+')' : dic.style.opacity=hou;
  }
  
  else{
   klog.boite();
   return false
  }
  setTimeout('klog.fad('+hou+')',30);
 },

boite:function(){

  var el=document.createElement('div');
  el.id='cadre';
  
  var el2=document.createElement('div');
  el2.className='im3';
  el2.onclick=klog.quit
  
  var txt=document.createTextNode('X')
  el2.appendChild(txt)
  
  var le_html='<br><br><span style="color:black">'+klog.tb_texte[this.num]+'</span>'
  el.innerHTML=el.innerHTML+le_html
  
  el.insertBefore(el2, el.firstChild)
  document.body.appendChild(el)
  this.centrer(el)
  typeof window.addEventListener == 'undefined' ? window.attachEvent("onresize",klog.centrer) : window.addEventListener('resize',klog.centrer,false);
 },
 
centrer:function(){

  var el=document.getElementById('cadre');
  el.style.top=(document.documentElement.clientHeight-el.offsetHeight)/2+"px";
  el.style.left=((document.documentElement.clientWidth-el.offsetWidth)/2)+'px'; 
 }

}
</script>
</head>
<body>

<div class="aside">

 <h3>~ Membres ~</h3>
 <ul>
 <li>
 <div onclick='klog.logdial(0)' class="figure"><img src="membres/autre.png" alt=""/></div>
 <span>Membre 1</span>
 </li>
 <li>
 <div onclick='klog.logdial(1)' class="figure"><img src="membres/autre.png" alt=""/></div>
 <span>Membre 2</span>
 </li>
 <li>
 <div onclick='klog.logdial(2)' class="figure"><img src="membres/autre.png" alt=""/></div>
 <span>Membre 3</span>
 </li>
 <li>
 <div onclick='klog.logdial(3)' class="figure"><img src="membres/autre.png" alt=""/></div>
 <span>Membre 4</span>
 </li>
 <li>
 <div onclick='klog.logdial(4)' class="figure"><img src="membres/autre.png" alt=""/></div>
 <span>Membre 5</span>
 </li>
 <li>
 <div onclick='klog.logdial(5)' class="figure"><img src="membres/autre.png" alt=""/></div>
 <span>Membre 6</span>
 </li>
         <li>
 <div onclick='klog.logdial(6)' class="figure"><img src="membres/autre.png" alt=""/></div>
 <span>Membre 7</span>
 </li>
 <li>
 <div onclick='klog.logdial(7)' class="figure"><img src="membres/autre.png" alt=""/></div>
 <span>Membre 8</span>
 </li>
 </ul>
</div>
</body></HTML>



rien ne sert de courir il faut partir a point.
cours Forest cours !
Afficher les 6 commentaires
Signaler Commenter la réponse de darksam0000
darksam0000
Messages postés
130
Date d'inscription
mardi 24 juin 2008
Dernière intervention
17 juin 2018
 1 -
Ca fonctionne vraiment bien. j'ai un beau pop up sur fond blanc cadré de noir qui s'affiche au centre de mon écran et cela pour chacun des membres mais ou dois-je taper le texte de présentation du pop up ?
Signaler Commenter la réponse de @karamel
@karamel
Messages postés
1666
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
23 janvier 2019
 33 -
c'est dans la fonction boit que la fenetre est cree apres sa tu a deux solution soit tu cree le html texte compris en passant par les methodes du dom soit tu insere du html avec innerHTML

exemple avec innerHtml 

boite:function(){

  var el=document.createElement('div');
  el.id='cadre';
  
  var el2=document.createElement('div');
  el2.className='im3';
  el2.onclick=klog.quit
  
  var txt=document.createTextNode('X')
  el2.appendChild(txt)


// ici commence l'exemple



var le_html='<br><br><span style="color:black">text_a_inserer</span><br><span style="color:black">text_a_inserer2</span>'
  el.innerHTML+=le_html


/////////////////////
  
  
  el.insertBefore(el2, el.firstChild)
  document.body.appendChild(el)
  this.centrer(el)
  typeof window.addEventListener == 'undefined' ? window.attachEvent("onresize",klog.centrer) : window.addEventListener('resize',klog.centrer,false);

 },




exemple avec le dom 

boite:function(){

  var el=document.createElement('div');
  el.id='cadre';
  
  var el2=document.createElement('div');
  el2.className='im3';
  el2.onclick=klog.quit
  
  var txt=document.createTextNode('X')
  el2.appendChild(txt )

               el.appendChild(el2)



// ici commence l'exemple

var span_a_cree=document.createElement('span');
span_a_cree.style.color='black'; 

var text_a_inserer=document.createTextNode('voici du texte a inserer')
  span_a_cree.appendChild(text_a_inserer)

                el.appendChild(span_a_cree)

var saut=document.createElement('br');
                el.appendChild(saut)

var span_a_cree2=document.createElement('span');
span_a_cree2.style.color='black';

var text_a_inserer2=document.createTextNode('voici encore du texte a inserer')
  span_a_cree2.appendChild(text_a_inserer2)

                el.appendChild(span_a_cree2)
                el.appendChild(span_a_cree2)

//////////////////////////////////////////  

  document.body.appendChild(el)
  this.centrer(el)
  typeof window.addEventListener == 'undefined' ? window.attachEvent("onresize",klog.centrer) : window.addEventListener('resize',klog.centrer,false);

 },





le plus simple quand on a pas l'habitude est d'utiliser innerHtml

ensuite pour ce qui est des donné pour chaques utilisateurs elles son ou dans une base de donné ? un fichier php ? un fichier js ?
Signaler Commenter la réponse de darksam0000
darksam0000
Messages postés
130
Date d'inscription
mardi 24 juin 2008
Dernière intervention
17 juin 2018
 1 > @karamel
Messages postés
1666
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
23 janvier 2019
 -
Non en faite, quand ma liste des membres est affichées, je souhaiterais que les gens visionnent un résumé du membre (petit texte de 2/3 lignes dans chaque pop up).

En clair, quand je clique sur l'image correspondant au membre 1, un pop-up apparaît avec un texte basique récitant le parcours du membre 1. Rien de complexe.

Peu être par la suite, ajouté une image de 32x32 pour lui attribuer un grade.

Ma base de donnée est déjà faite ;) Je te l'ai dis ... il y a vraiment que le JavaScript ou je galère encore quelque peu.

Ton aide m'est vraiment précieuse. Merci

EDIT : j'ai essayé les 2 façons mais ça affiche en doublon le même texte dans tous les popup de chaque image.
Signaler Commenter la réponse de @karamel
@karamel
Messages postés
1666
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
23 janvier 2019
 33 -
mais la base de donnée est bien stoké sur un serveur car comme jordane45 te l'a expliquer il faut recupere les donné en utilisant ajax ensuite c'est une question de remplissage des donné dans la fenetre en fonction du format des donné recu (json ou xml) il faudra ajouter quelles ligne de code mais si on ne connais pas le format de reception des donné on ne peut pas créer la fonction qui modifiera la fenetre,

on ne vas pas cree une fenetre pour chaques profiles mais on a une unique fenetre dans laquel on modifie les donné en fonction du profile c'est plus simple de faire comme ca que de creer x fenetre pour x profile
Signaler Commenter la réponse de jordane45
jordane45
Messages postés
24565
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 février 2019
 362 -
Surtout que pour l'instant tu ne nous as parlé que d'HTML et de CSS ... hors maintenant que tu nous parles d'une base de données... je me demande bien ce que tu comptes utiliser pour alimenter ta page .....et de surcroit (comme le fait remarquer Kazma) tes popups....

Donc..; si comme je le pense tu as tes "membres" dans ta BDD (et toutes les infos les concernant) tu devrais avoir dans ton code un langage permettant de gérer une connexion (et une utilisation) à une BDD.. (du PHP .. de l'ASP ...)...hors, dans le code que tu nous as montré au début.. tu as écris en "dur" les différentes DIV de tes membres.....

J'ai l'impression que tu n'as pas encore pensé à la liaison avec ta BDD ... et si c'est le cas... tu devrais commencer par ça !
Je me trompe ???
Commenter la réponse de @karamel
Signaler Commenter la réponse de darksam0000
Messages postés
130
Date d'inscription
mardi 24 juin 2008
Dernière intervention
17 juin 2018
 1
0
Merci
Ca a marcher au debut et maintenant ca marche plus :((((( les textes sont tous pareils dans chaque pop up ... j'ai juste changer la photo et changer les nom des membres .... je comprend plus rien. 

<div class="aside2">
                        <h3>~ Membres ~</h3>                         
                         <ul>                        
                          <li>
                           <div onclick='klog.logdial(0)' class="figure"><img src="membres/mrjulio.jpg" alt=""/></div>
                            <span>MrJulio</span>
                          </li>
                          <li>
                           <div onclick='klog.logdial(0)' class="figure"><img src="membres/2 athoy.jpg" alt=""/></div>
                            <span>Athoy</span>
                          </li>                        
                          <li>
                           <div onclick='klog.logdial(0)' class="figure"><img src="membres/3 Falrage.jpg" alt=""/></div>
                            <span>Falrage</span>
                          </li>                         
                          <li>
                           <div onclick='klog.logdial(0)' class="figure"><img src="membres/sambotte.jpg" alt=""/></div>
                            <span>Sambotte</span>
                          </li>        
                          <li>
                           <div onclick='klog.logdial(0)' class="figure"><img src="membres/5 pix_fmr.jpg" alt=""/></div>
                            <span>Pix_fmr</span>
                          </li>                         
                          <li>
                           <div onclick='klog.logdial(0)' class="figure"><img src="membres/6 Ben_Elendil.jpg" alt=""/></div>
                            <span>Ben_Elendil</span>
                          </li>                         
                          <li>
                           <div onclick='klog.logdial(0)' class="figure"><img src="membres/7 Razor.jpg" alt=""/></div>
                            <span>Razor</span>
                          </li>                         
                          <li>
                           <div onclick='klog.logdial(0)' class="figure"><img src="membres/skirlyx.jpg" alt=""/></div>
                            <span>Skirlyx</span>
                          </li>                        
                          <li>
                           <div onclick='klog.logdial(0)' class="figure"><img src="membres/9 Exhumus.jpg" alt=""/></div>
                            <span>Exhumus</span>
                          </li>
                          <li>
                           <div onclick='klog.logdial(0)' class="figure"><img src="membres/zok_59.jpg" alt=""/></div>
                            <span>Zok_59</span>
                          </li>
                        </ul>
                       </div>



var klog={

tb_texte:["Texte du membre 1","Texte du membre 2","Texte du membre 3","Texte du membre 4","Texte du membre 5","Texte du membre 6","Texte du membre 7","Texte du membre 8","Texte du membre 9","Texte du membre 10"],

num:'',

quit:function(){

  document.getElementById('divco').parentNode.removeChild(document.getElementById('divco'));
  document.getElementById('cadre').parentNode.removeChild(document.getElementById('cadre'));
  typeof window.addEventListener == 'undefined' ? window.dettachEvent("onresize",klog.centrer) : window.removeEventListener('resize',klog.centrer,false);
 },

logdial:function(numero){

  var el=document.createElement('div');
  el.id='divco';
  el.onclick=klog.quit;
  document.body.appendChild(el)
  this.num=numero
  this.fad(0); 
 },
 
fad:function(){
  
  var hou=arguments[0];
  var dic=document.getElementById('divco');
  
  if(hou<=0.5){
   hou+=0.15;
   typeof window.addEventListener == 'undefined' ? dic.style.filter = 'alpha(opacity='+(hou*100)+')' : dic.style.opacity=hou;
  }
  
  else{
   klog.boite();
   return false
  }
  setTimeout('klog.fad('+hou+')',30);
 },

boite:function(){

  var el=document.createElement('div');
  el.id='cadre';
  
  var el2=document.createElement('div');
  el2.className='im3';
  el2.onclick=klog.quit
  
  var txt=document.createTextNode('-->')
  el2.appendChild(txt)
  
  var le_html='<br><br><span style="color:white">'+klog.tb_texte[this.num]+'</span>'
  el.innerHTML=el.innerHTML+le_html
  
  el.insertBefore(el2, el.firstChild)
  document.body.appendChild(el)
  this.centrer(el)
  typeof window.addEventListener == 'undefined' ? window.attachEvent("onresize",klog.centrer) : window.addEventListener('resize',klog.centrer,false);
 },
 
centrer:function(){

  var el=document.getElementById('cadre');
  el.style.top=(document.documentElement.clientHeight-el.offsetHeight)/2+"px";
  el.style.left=((document.documentElement.clientWidth-el.offsetWidth)/2)+'px'; 
 }

}



Au debut ca m'affichait bien les texte différentes dans chaque pop up mais maintenant plus :(. Ou es l'erreur ?
Commenter la réponse de darksam0000
Signaler Commenter la réponse de jordane45
Messages postés
24565
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 février 2019
 362
0
Merci
</code>


Pourrais-tu adapter le code en reprenant celui de mon dernier commentaire du bas pour exemple stp car ici je suis sur mon iPhone au boulot.

Et de ce fait.. ma réponse ne suffit pas à comprendre où tu as fais l'erreur ????

Et bien c'est pourtant simple...
Tu as écris : 
                          <li>
                           <div onclick='klog.logdial(0)' class="figure"><img src="membres/mrjulio.jpg" alt=""/></div>
                            <span>MrJulio</span>
                          </li>
                          <li>
                           <div onclick='klog.logdial(0)' class="figure"><img src="membres/2 athoy.jpg" alt=""/></div>
                            <span>Athoy</span>
                          </li>                        
                          <li>
                           <div onclick='klog.logdial(0)' class="figure"><img src="membres/3 Falrage.jpg" alt=""/></div>
                            <span>Falrage</span>
                          </li>                         
                          <li>
                           <div onclick='klog.logdial(0)' class="figure"><img src="membres/sambotte.jpg" alt=""/></div>
                            <span>Sambotte</span>
                          </li>


Hors... tu n'as pas repris le code donné précédement dans lequel le paramètre passé à la fonction logdial était incrémenté pour correspondre à l'indice du talbeau Javascript contenant le détail des membres ..

ce qui donne normalement !: 
                          <li>
                           <div onclick='klog.logdial(0)' class="figure"><img src="membres/mrjulio.jpg" alt=""/></div>
                            <span>MrJulio</span>
                          </li>
                          <li>
                           <div onclick='klog.logdial(1)' class="figure"><img src="membres/2 athoy.jpg" alt=""/></div>
                            <span>Athoy</span>
                          </li>                        
                          <li>
                           <div onclick='klog.logdial(2)' class="figure"><img src="membres/3 Falrage.jpg" alt=""/></div>
                            <span>Falrage</span>
                          </li>                         
                          <li>
                           <div onclick='klog.logdial(3)' class="figure"><img src="membres/sambotte.jpg" alt=""/></div>
                            <span>Sambotte</span>
                          </li>


Il ne suffit pas de prendre des bouts de code et de les assembler.... il faut les comprendre...
et de ce que j'en vois.. tu en es loin....

Me dire que vu que ta page n'est pas encore intégrée dans ton site... tu la code en dur... argghhh......
Je ne vois pas le rapport.... Surtout si tu comptes la lier à ta BDD plus tard ... autant la coder en PHP directement non ???
Cela n'empeche pas d'y mettre du javascript (bien au contraire)...
Mais répeter à la main.. la création des DIV ( de tes membres) alors qu'une boucle PHP ferait tout aussi bien ( mieux) l'affait ... me laisse perplexe.




Commenter la réponse de jordane45
Signaler Commenter la réponse de darksam0000
Messages postés
130
Date d'inscription
mardi 24 juin 2008
Dernière intervention
17 juin 2018
 1
0
Merci
Oui je viens de le voir. J ai pas pensé a regarder ma page html.

Encore une fois, ceci est une page html test. Rien de bien officieux. J essaye de m en sortir au mieux.

En tout cas merci pour ton aide précieuse.

En te souhaitant une bonne journée.

Darksam
Commenter la réponse de darksam0000
Signaler Commenter la réponse de @karamel
Messages postés
1666
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
23 janvier 2019
 33
0
Merci
les evenement peuvent etre cree dynamiquement


rajoute ce code avant la fonction centrer 

init:function(){

var all=document.getElementById('aside').getElementsByTagName('div')

for (var i=0; i<all.length; i++)

all[i].setAttribute('onclick','klog.logdial('+i+')')

 },


puis tout a la fin du script apres la derniere acolade rajoute cette ligne 

typeof window.addEventListener == 'undefined' ? window.attachEvent("onload",klog.init) : window.addEventListener('load',klog.init,false);


et enfin dans le html

donne un id au div principale 

<div id='aside'class="aside">


et supprimes tous les 

onclick='klog.logdial(x)'


rien ne sert de courir il faut partir a point.
cours Forest cours !
Commenter la réponse de @karamel

Votre réponse

Répondre au sujet
Posez votre question
S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.