Discussion :

[chile]

Bonjour,
J'ai crée des zones réactives avec les balises AREA dans un conteneur MAP.
Maintenant je souhaite ouvrir une fenetre d'information au survol de chaque zone.
Mais il semble que la fonction onmouseover ne foncionne pas dasn cette situation.
Merci de votre aide.

[SpaceFrog]

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<area style="width:300px;height:100px;border:1px solid;" onmouseover="javascript:alert('hover de la balise area');">Demo text</area>

... ça fonctionne

[chile]

Bonjour,
Merci pour cette réponse. Ce code fonctionne bien.
Mais, désolé je me suis mal exprimé sur mon besoin.
Je souhaite ouvrir plutôt une box paramétrable, pour y mettre le commentaire accompagné d'une photo.
J'ai essayé de créer un événement avec une box déclarée en css et une class, mais il semble que se soit incompatible avec les class map et area car rien ne s'ouvre.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
  <div ><center><img src="images/carte_accueil_test.png" usemap="#image_map" class="map">
<map name="image_map">
  <area style= alt="Pérou" title="Pérou" href="/perou.php" coords="241,452,11" shape="circle" data-maphilight='{"stroke":false,"fillColor":"ff0000","fillOpacity":0.6}' >
</map></center></div>

[SpaceFrog]

Là tu utilises un plugin JQuery non ?
Tu as chargé JQuery et le plugin ?

https://projects.davidlynch.org/maphilight/docs/

[chile]

Oui, je suis parti de ce modele https://codepen.io/Lazypterodactyl/pen/RJGzQv

J'ai donc sur ma page

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/maphilight/1.4.0/jquery.maphilight.min.js"></script>

et

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<script type="text/javascript">
  $(function() {
    $('.map').maphilight();
  });
</script>

[SpaceFrog]

ton image à bien la class map ...

As tu un message d'erreur en console ?

[chile]

Je n'ai pas de message d'erreur lorsque j'ai testé avec une class.

J'ai un doute sur l'emplacement de ma class dans <area>.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
  <div ><center><img src="images/carte_accueil_test.png" usemap="#image_map" class="map">
<map name="image_map">
  <area class="tooltip" alt="Pérou" title="Pérou" href="perou.php" coords="241,452,11" shape="circle" data-maphilight='{"stroke":false,"fillColor":"ff0000","fillOpacity":0.6}' >
</map></center></div>

et dans mon css

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}
 
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
 
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}
 
.tooltip:hover .tooltiptext {
  visibility: visible;
}

[SpaceFrog]

Ce serait plus simple si tu pouvais mettre ton code dans un codepen ...

[chile]

Oui le voici https://codepen.io/yann-michel/pen/JjmxmxL

Au survol de Valparaiso, je souhaiterais ouvrir une une box qui contiendrait un petit texte et une photo.

[SpaceFrog]

Ha mais tu parles de tooltip, hightlight sert juste à modifier l'aspect de la zone area pas à afficher des tooltips ...

Ajoute un plugin tooltip ?

[chile]

Je crois que je me suis compliqué la tâche.

Je recherche à faire quelque chose dans ce genre https://codepen.io/webinspect/pen/xwprGZ avec une photo qui accompagne l'info et peut-etre l'affichage de l'info sur le coté de la carte.

Je vais revoir ma copie

[chile]

Salut,

J'ai avancé sur ce projet, mais je coince avec la superposition du popup sur un des titres, qui se décale du coup.

J'ai l'impression que je n'arriverai à résoudre ce problème en jouant sur le type de 'position'.

J'ai mon projet ici https://codepen.io/yann-michel/pen/OJaVZRx

Quelqu'un aurait la solution ?

Merci

[NoSmoking]

Bonjour,
il faut que tes éléments du type <div class="description1"> soient en position:absolute et non en position:relative.

[chile]

Effectivement. Merci beaucoup