Affichage simultané texte et image à 2 endroits différents sur une carte
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Affichage simultané texte et image à 2 endroits différents sur une carte
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:
- Ce que j'aimerais obtenir:
Ma page HTML >> ICI
Re: Affichage simultané texte et image à 2 endroits différents sur une carte
Hello emc2,
pourquoi ne pas positionner la balise p avec une class et son style:
a++
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++
Invité- Invité
Re: Affichage simultané texte et image à 2 endroits différents sur une carte
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.
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.
Re: Affichage simultané texte et image à 2 endroits différents sur une carte
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)
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.
- 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>
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.
Re: Affichage simultané texte et image à 2 endroits différents sur une carte
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 !
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 !
Sujets similaires
» Problème d'affichage: texte + image
» Problème d'affichage d'un texte derrière l'image à son survol
» Affichage du forum impossible (+ différents problèmes d'affichage) Topic unique
» Texte noir sur fond gris foncé dans plusieurs endroits du forum
» Créer des liens en certains endroits d'une image
» Problème d'affichage d'un texte derrière l'image à son survol
» Affichage du forum impossible (+ différents problèmes d'affichage) Topic unique
» Texte noir sur fond gris foncé dans plusieurs endroits du forum
» Créer des liens en certains endroits d'une image
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum