Carte avec des infobulles

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Carte avec des infobulles

Message par Kiraxa Mer 4 Sep 2019 - 16:33

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  Grrr

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 !


Dernière édition par Kiraxa le Mer 11 Sep 2019 - 17:31, édité 1 fois
avatar

Kiraxa
**

Féminin
Messages : 66
Inscrit(e) le : 09/07/2014

http://pensionnatwonderland.forumactif.org/
Kiraxa a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Carte avec des infobulles

Message par Scoubifitz Mer 4 Sep 2019 - 21:55

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;
}

Scoubifitz

Scoubifitz
Membre actif

Masculin
Messages : 3732
Inscrit(e) le : 18/03/2008

https://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Carte avec des infobulles

Message par Kiraxa Ven 6 Sep 2019 - 1:30

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 :
infobulle* - Carte avec des infobulles 1567726201-capture-d-ecran-2019-09-05-a-08-52-24

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

Merci énormément déjà !
avatar

Kiraxa
**

Féminin
Messages : 66
Inscrit(e) le : 09/07/2014

http://pensionnatwonderland.forumactif.org/
Kiraxa a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Carte avec des infobulles

Message par Scoubifitz Sam 7 Sep 2019 - 0:02

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 ?
Scoubifitz

Scoubifitz
Membre actif

Masculin
Messages : 3732
Inscrit(e) le : 18/03/2008

https://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Carte avec des infobulles

Message par Kiraxa Mer 11 Sep 2019 - 17:31

C'est super merci beaucoup pour votre aide !

Je peux marquer comme résolu Very Happy
avatar

Kiraxa
**

Féminin
Messages : 66
Inscrit(e) le : 09/07/2014

http://pensionnatwonderland.forumactif.org/
Kiraxa a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum