Carte avec des infobulles

[Kiraxa]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://onepieceanarchy.forumactif.com/

Description du problème

Bonjour !

Je ne suis pas très expérimentée niveau codage mais j'ai réalisé une carte d'une île pour notre forum RPG avec photoshop. J'aimerais que sur cette carte on puisse mettre des points que l'on peut survoler pour afficher le nom, cependant ce que j'ai essayé foire totalement au niveau de l'affichage des infobulles  

L'aperçu est sur mon forum test ici : http://kiraxa.forumactif.com/t25-carte-interactive-infobulles#38

Voilà ce que j'ai entré comme code :

Code:

<div style="background-image:url('https://image.noelshack.com/fichiers/2019/36/3/1567600578-octogonia.png');width:583px;height:500px;">

<div class="nu_infobulle"><img src="https://image.noelshack.com/fichiers/2019/36/3/1567605072-pointcarte.png" style="margin-top:200px;margin-left:200px;"/><span class="nu_bulle">CONTENU</span></div>

<div class="nu_infobulle"><img src="https://image.noelshack.com/fichiers/2019/36/3/1567605072-pointcarte.png" style="margin-top:0px;margin-left:500px;"/><span class="nu_bulle">CONTENU</span></div>

</div>

et dans le CSS :

Code:

/*Bloc qui contient l'image et l'infobulle*/
.nu_infobulle{
width: 100px;
padding: 0px;
position: relative;
}
/*Infobulle*/
.nu_bulle{
background: #555;
color: #eee;
width: 0px;
height: 0px;
position: absolute;
margin-top: 10px;
margin-left: 210px;
overflow: hidden;
z-index: 20;
text-align: center;
border-radius: 10px;
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
}
/*Apparition de l'infobulle au survol*/
.nu_infobulle:hover .nu_bulle{
width: 110px;
height: 30px;
padding: 5px;
border-width: 1px;
}

Je vous remercie d'avance pour votre aide !

[Scoubifitz]

Bonsoir,

Testez ceci pour voir ;

code HTML:

Code:

<div id="carte">
  <div class="nu_infobulle" style="top:200px;left:200px;">
  <span class="nu_bulle">CONTENU 1</span>
  </div>
  <div class="nu_infobulle" style="top:300px;left:300px;">
  <span class="nu_bulle">CONTENU 2</span>
  </div>
</div>

code CSS:

Code:

/*Bloc qui contient l'image et l'infobulle*/
#carte{
background-image:url('https://image.noelshack.com/fichiers/2019/36/3/1567600578-octogonia.png');
width:583px;
height:500px;
position:relative;
}
.nu_infobulle{
position:absolute;
}
.nu_infobulle::after{
 content:url(https://image.noelshack.com/fichiers/2019/36/3/1567605072-pointcarte.png);
}
/*Infobulle*/
.nu_bulle{
background: #555;
color: #eee;
width: 110px;
height: 0px;
position: absolute;
left:20px;
overflow: hidden;
text-align: center;
border-radius: 10px;
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
}
/*Apparition de l'infobulle au survol*/
.nu_infobulle:hover .nu_bulle{
height: 30px;
padding: 5px;
border-width: 1px;
}

[Kiraxa]

Ca fonctionne très bien merci ! Est-ce que si je prend une autre carte (j'aimerais réaliser plusieurs îles donc plusieurs cartes) cela fonctionne de la même manière ? En ajustant évidemment le width et height de ma carte!

Et de plus j'aimerais bien que les infobulles qui s'affichent aient cette forme :


Savez-vous si cela est possible ? Ou faut-il que je créé la forme avant sur photoshop ?

Merci énormément déjà !

[Scoubifitz]

Bonsoir,

Vous avez compris le principe appliqué à une carte .

En bref , on met l’image de la carte en fond et on dimensionne la div aux valeurs de cette carte .
Si la carte est d'une autre dimension , on le modifie dans le CSS.
Le positionnement des points se fait par rapport au point zéro de la carte (tout en haut et tout à gauche)

On peut donc utiliser plusieurs cartes avec le même CSS pour les points et les infobulles, seul l'identifiant (id=) de la carte change.
Une première carte aura donc <div id="carte_pirate"> , une autre carte <div id="carte_flibustier"> ...

Et dans le CSS , on définie le fond et les dimensions de chaque carte .

Ceci étant dit , on va opérer quelques modifications du code HTML , en remplaçant les span par des div.

Code:

<div id="carte_pirate">
  <div class="nu_infobulle" style="top:200px;left:200px;">
  <div class="nu_bulle">CONTENU 1<p>Cupcake ipsum dolor sit amet pie croissant candy. Jelly pie cake. Marshmallow sweet roll cotton candy ice cream fruitcake gummi bears chocolate bar bonbon.</p></div>
  </div>
  <div class="nu_infobulle" style="top:300px;left:300px;">
  <div class="nu_bulle">2/3<br>IMPORTANT<br>Fiche</div>
  </div>
  <div class="nu_infobulle" style="top:150px;left:350px;">
  <div class="nu_bulle">CONTENU 3</div>
  </div>
</div>

Passons maintenant au CSS.

En premier , si le point sur la carte est un simple carré , autant mettre un carré dans le "content" , pas besoin d'héberger une image qui montre un point ■.
Comme je ne connais pas la taille standard de l'infobulle , je l'ai fait sur 3 lignes avec un scroll s'il a plus de contenu.

Pour le triangle centré sous la bulle , il n'y a pas de secrets ... un "content" en after ... ▼

Il est temps de remplacer tout le CSS précédent par celui-ci :

Code:

/* Bloc qui contient les cartes et les infobulles */

#carte_pirate{
background-image:url('https://image.noelshack.com/fichiers/2019/36/3/1567600578-octogonia.png');
width:583px;
height:500px;
position:relative;
}

#carte_flibustier{ /* modifier la carte et les dimensions */
background-image:url('https://image.noelshack.com/fichiers/2019/36/3/1567600578-octogonia.png');
width:583px;
height:500px;
position:relative;
}

.nu_infobulle{
position:absolute;
}
.nu_infobulle::before{
content:"■";
cursor: help;
font-size: 1.6em;
}
/*Infobulle*/

.nu_bulle{
display:none; /* on cache le contenu de la bulle */
position: absolute;
width: 130px;
height: 3.5em; /* la valeur du top depend du height */
top: -4.5em; /* 1 point de plus que le height a cause du padding */
left: 50%;
transform: translateX(-50%); /* on centre horizontalement */
overflow: auto;
text-align: center;
padding: 0.5em 14px;
border-radius: 10px;
background: #eeeeee;
color: #121212;
font-size: 1em;
}
/* on génère un second élément en :after pour la flèche */
.nu_infobulle:after {
content: "▼";
display:none; /* on cache la fleche avant le survol */
position: absolute;
top: -0.25em;
left: 50%;
transform: translateX(-50%); /* on centre horizontalement  */
font-size: 1.6em;
color: #eee;
}
/* Apparition de la bulle et de la fleche au survol */
.nu_infobulle:hover .nu_bulle,
.nu_infobulle:hover::after{
display:block;
}


Des questions ?

[Kiraxa]

C'est super merci beaucoup pour votre aide !

Je peux marquer comme résolu