Affichage simultané texte et image à 2 endroits différents sur une carte

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

Résolu Affichage simultané texte et image à 2 endroits différents sur une carte

Message par emc2 Jeu 6 Sep 2018 - 9:45

Détails techniques


Version du forum : phpBB3
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://sainte-croix.forumgratuit.org/h8-page-travail-3

Description du problème

Bonjour,

Je n'arrive pas à solutionner mon problème; Il s'agit de faire apparaître sur une carte, une image sur une partie de la carte et un texte sur une autre partie de cette même carte.
Je sais faire apparaître un block à un endroit (image + texte). Voir le code ci-dessous:
Code:
<div style="width:492px;height:491px;position:relative;top:0px;left:0px;margin:auto">
<img style="width: 492px; height: 491px;" border="0" src="https://i.servimg.com/u/f98/19/95/90/50/region10.jpg" usemap="#page_d_accueil" /> <map id="page_d_accueil"></map> <style type="text/css">
    <!--
/* forme ecussons */
    .lieu{cursor:pointer; background-color: transparent; width:81px;height:90px;
    -moz-border-radius:9px;
    -webkit-border-radius:9px;
    border-radius:9px;
    position:absolute; z-index:4;}

/* position lieux */
    .c01{top:4px; left:407px;}
    #c01{display:none;}
    .c01:hover #c01{display:block; position:absolute; top:191px; left:-205px;}
 -->
</style>

  <div class="lieu c01">
    <span id="c01"style="background-color:#transparent;">
   <img src="https://i.servimg.com/u/f98/19/95/90/50/auverg10.png" />
   <p style="text-align: center;">
   <strong><span style="font-size: 12px; line-height: normal">
        <br>Région Auvergne<br>Capitale: Clermont-Ferrand"</span></strong></p></span></div>

Mais je souhaiterais que le texte, au lieu d'apparaître en dessous de l'image (contour rouge dans l'exemple), apparaisse ailleurs (tout en bas). La complication est que chaque région aura son contour en rouge à des coordonnées différentes, alors que le texte doit apparaître toujours en bas pour toutes les régions.

Ce que j'ai actuellement:
Lorsque l'on passe le curseur sur le blason "Auvergne", la région est surlignée en rouge (image contour rouge positionnée sur la carte) et le texte juste en dessous. (c'est dans la même div du même block)

Ce que j'aimerais obtenir:
Au survol du curseur sur le blason, toujours l'image de contour sur la région, mais le texte tout en bas. Le texte de chaque région devra être au même endroit, malgré le positionnement des contours qui seront à des coordonnées différentes pour chaque région.

Ma page HTML >> ICI
emc2

emc2
*****

Messages : 555
Inscrit(e) le : 30/09/2011

http://sainte-croix.forumgratuit.org/
emc2 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Affichage simultané texte et image à 2 endroits différents sur une carte

Message par Invité Jeu 6 Sep 2018 - 10:25

Hello emc2,

pourquoi ne pas positionner la balise p avec une class et son style:
Code:

.text
{
width: 250px;
height: 60px;
margin-left: -100px;
margin-top: 120px;
color:black;
}

Code:

Le code corrigé pour les sauts de ligne et l'ajout de la class:

<div class="lieu c01">
    <span id="c01"style="background-color:#transparent;">
  <img src="https://i.servimg.com/u/f98/19/95/90/50/auverg10.png" />
  <p class="text"style="text-align: center;">
  <strong><span style="font-size: 12px; line-height: normal">
    <br />Région Auvergne<br />Capitale: Clermont-Ferrand"</span></strong></p></span>
</div>


a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Affichage simultané texte et image à 2 endroits différents sur une carte

Message par emc2 Jeu 6 Sep 2018 - 16:28

J'ai déjà essayé un truc comme ça il y a quelques jours, mais les coordonnées du texte sont relatives au positionnement de l'image. Du coup, si l'on positionne une seconde image de survol (région surlignée en rouge) à un autre endroit de la carte, (ex: en haut et plus à gauche), le texte est lui aussi plus haut et plus à gauche. Il n'apparaît plus dans l'espace prévu (tout en bas, sous la carte).
Je cherche à donner au texte (différent pour chaque image de survole), une position fixe, (ou absolue) quelque soit le positionnement de l'image de survole.
emc2

emc2
*****

Messages : 555
Inscrit(e) le : 30/09/2011

http://sainte-croix.forumgratuit.org/
emc2 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Affichage simultané texte et image à 2 endroits différents sur une carte

Message par emc2 Ven 7 Sep 2018 - 20:21

Du coup ce que je fais, je reprends ton code mais je change le nom de la class qui affiche le texte. Ainsi, je peux redéfinir pour chaque class de texte de nouvelles coordonnées. (voir le code)

Code:
<div style="width:492px;height:491px;position:relative;top:0px;left:0px;margin:auto">
<img style="width: 492px; height: 491px;" border="0" src="https://i.servimg.com/u/f98/19/95/90/50/region11.jpg" usemap="#page_d_accueil" /> <map id="page_d_accueil"></map> <style type="text/css">
    <!--
/* forme ecussons */
    .lieu{cursor:pointer; background-color: transparent; width:81px;height:90px;
    -moz-border-radius:9px;
    -webkit-border-radius:9px;
    border-radius:9px;
    position:absolute; z-index:4;}

/* position lieux */
    .c01{top:4px; left:407px;}
    #c01{display:none;}
    .c01:hover #c01{display:block; position:absolute; top:191px; left:-205px;}
    .text{width: 250px;height: 60px;margin-left: -100px;margin-top: 120px;color:black;}
 
    .c02{top:100px; left:407px;}
    #c02{display:none;}
    .c02:hover #c02{display:block; position:absolute; top:40px; left:-265px;}
    .text2{width: 250px;height: 60px;margin-left: -60px;margin-top: 175px;color:black;}
  -->
</style>

  <div class="lieu c01">
    <span id="c01"style="background-color:#transparent;">
   <img src="https://i.servimg.com/u/f98/19/95/90/50/auverg10.png" />
     <p class="text"style="text-align: center;">
  <strong><span style="font-size: 12px; line-height: normal">
    <br />Région Auvergne<br />Capitale: Clermont-Ferrand"</span></strong></p></span>
  </div>
 
  <div class="lieu c02">
    <span id="c02"style="background-color:#transparent;">
   <img src="https://i.servimg.com/u/f98/19/95/90/50/auverg10.png" />
     <p class="text2"style="text-align: center;">
  <strong><span style="font-size: 12px; line-height: normal">
    <br />2eme région décalée<br />2eme texte, différent du premier"</span></strong></p></span>
  </div>
Ca donne ça >> http://sainte-croix.forumgratuit.org/h8-page-travail-3

L'avantage, c'est que ça marche, mais j'alourdi le code. Si je pouvais avoir une seule class et positionner le texte indépendamment de son image correspondante ça m'arrangerait pas mal, vu qu'il y a une grosse quantité de positions à écrire.
Donc si il y a une solution, je suis preneur.
emc2

emc2
*****

Messages : 555
Inscrit(e) le : 30/09/2011

http://sainte-croix.forumgratuit.org/
emc2 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Affichage simultané texte et image à 2 endroits différents sur une carte

Message par emc2 Sam 8 Sep 2018 - 20:48

Up
emc2

emc2
*****

Messages : 555
Inscrit(e) le : 30/09/2011

http://sainte-croix.forumgratuit.org/
emc2 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Affichage simultané texte et image à 2 endroits différents sur une carte

Message par emc2 Lun 10 Sep 2018 - 11:44

Up, ... Up
emc2

emc2
*****

Messages : 555
Inscrit(e) le : 30/09/2011

http://sainte-croix.forumgratuit.org/
emc2 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Affichage simultané texte et image à 2 endroits différents sur une carte

Message par emc2 Mar 11 Sep 2018 - 12:19

Je clos le sujet et le balise en résolu.
Je vais définitivement utiliser le code que j'ai publié le 07/09. Car finalement, ça me permet aussi de personnaliser chaque texte.

Merci Milouse de m'avoir mis sur la voix. Comme d'hab !
emc2

emc2
*****

Messages : 555
Inscrit(e) le : 30/09/2011

http://sainte-croix.forumgratuit.org/
emc2 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