11484 sujets

JavaScript, DOM et API Web HTML5

Question sur la surcouche

Bonjour tout le monde

Je débute en programmation et je me demandé si il exister un code pour mettre un élément par dessus ma page au clic sur un bouton

en fait sur ma carte j'ai différent point ma carte est une image et il y a différent point dessus a des lieux spécifique qui est défini et j'aimerais savoir si il était possible en cliquant sur l'un des point d'afficher un menu me montrant plusieurs proposition sur le lieu (afficher un texte ou une photo)

je vous remercie si vous pouvez m'aider
oui il s'agit de ce type de chose que je veux afficher et j'aimerais que cela me prenne toute la page et qu'elle m'affiche un menu avec la possibilité de choisir soit une image soit un texte

(je préfère détailler pour aider a comprendre ce que je souhaite afficher sur ma page)
Pas simple de comprendre ce que veut dire " j'aimerais que cela me prenne toute la page et qu'elle m'affiche un menu avec la possibilité de choisir soit une image soit un texte"
C'est quoi la carte? c'est quoi comme genre de menu?
Peux tu nous faire un schéma avec un produit genre PhotoShop pour qu'on voie un peu mieux ce que tu veux réaliser?
voila une image de ma carte et de mon menu et j'aimerais en fait que lors ce que je clic sur un bouton le menu apparaisse même si il n'est que petit et m’affichant un petit carré avec mes trois options me permettant d'aller voir l'image le texte ou le diaporama
Modifié par alaryck (09 Jun 2017 - 15:48)
Voici la façon dont est faite la page http://osirisnet.net/carte/carte_01.htm?fr (si on remplace "?fr" par "?en" on a la même page en anglais)

Tout est conçu pour être "responsive", c'est à dire s'adapter à la taille de l'écran.

1) La carte:
Il s'agit d'une image, dont la taille est contrôlée par 
#mapBackground {width: 100%;border-radius: 1em;}

Pour pouvoir calculer la position des points sur la carte, j'ai défini en JavaScript les coordonnées du coin supérieur gauche et du point inférieur droit:
var Lat0 = 31.8386, Lng0 = 27.84, Lat1 = 21.7086, Lng1 = 34.72;

2) les "points sensibles" sur la carte:
Il s'agit de structures dont le modèle est:

<div class="mapPoint" id="_Tanis" style="top:8.5%;left:55.96%;" onclick="togglePoint('Tanis')">
    <img src="bullet_red.png" alt="">
    <div class="E">Tanis
        <div class="summary S shortText" lang="fr">
            <h2>Tanis</h2>
             <p data-link="Tanis_">
                <a href="javascript:displayText('Tanis_')">Nécropole royale</a></p>
          </div>
       </div>
</div>

Cette structure relativement complexe est générée par JavaScript: chaque "point sensible" est défini comme un objet JavaScript, les valeurs de la propriété "style" sont calculées en fonction des coordonnées géographiques du point: on exprime la distance aux bords en pourcentage de la largeur, ce qui assure l'ajustement de la position en fonction de la largeur de l'écran.
Si on clique sur le point, ça appelle la fonction JavaScript togglePoint() qui ajoute la calss "active" dans la balise <div>, ce qui devient
<<div class="mapPoint active"...>

Dans ce cas, la balise <div class="summary ...> devient visible, ce qui affiche son contenu, lequel contient un lien qui appelle la fonction displayText. Certaines <div> comportent plusieurs liens, ce qui correspond à ton menu.
Tout cela est un peu complexe, je t'invite à afficher le contenu de la page et des fichiers carte.js et carte.css et à me poser des questions s'il y a quelque chose d'obscure (ce qui est dans doute le cas!)

Remarque: l'utilisation d'une balise <a href="javascript:..."> est considérée comme "à proscrire", il est considéré comme préférable de mettre un onclick="displayText(...)" dans la balise <p>, ce que je vais sans doute faire dans une future version
Sujet clos
Aller à