11521 sujets

JavaScript, DOM et API Web HTML5

Carte intéractive svf

Bonjour,
dans le cadre d'un travail en entreprise je dois réaliser une carte interactive des continents afin de montrer les différents partenaires de la société.
La carte à été réalisée en SVG et JavaScript ou l'on retrouve donc les 7 zones séparées ou l'ID de chaque zone est indiqué par ( Z1, Z2,Z3 ect...)
Mon fichier comporte une page html une feuille de style css et deux fichiers JavaScript qui définissent la carte interactive.
Je voudrais lors d'un onclick sur les Zones continent ( Z1 ect) pouvoir afficher une image (tableau regroupant les différents partenaires du continent ).

Le"Z1" représente l'Amérique du nord
et "image1" ma div dans le code HTML contenant l'image a afficher.

J'ai trouvé ce bout de code en javascript mais il ne fonctionne pas je ne sais pas non plus ou dois-je mettre le script si c'est dans le html ou la page javascript (qui contient les Z1 Z2 ect ) qui exécute la fonction lors du onclick---> afficher image
 



document.getElementById('Z1').onclick = function(e){
  if (e.target != document.getElementById('Z1')) {
    document.getElementById('Z1').innerHTML = 'image1';

  } else{
    document.getElementById('Z1').innerHTML = 'Display content';
  }
}


L'algorithme est pourtant simple il s'agit d'une div qui s'affiche lors d'un click sur un élément SVG mais je n'arrive pas à faire afficher mon image si quelqu'un à un conseil a me proposer, je lui en serais très reconnaissant. Merci d'avance
Bonjour !

Je ne m'y connais pas trop en SVG mais votre code me trouble : quel est ce "document.getElementById('Z1')" qui reçoit 'image1' lequel représente une div si j'ai bien compris...
(Au passage,"document.getElementById('Z1')" peut être mis dans une variable, ça évite d'avoir à le chercher chaque fois...)

Si "document.getElementById('Z1')" représente une partie d'une image SVG, peut-elle recevoir une div ?

Mais comme je l'ai dit, je ne m'y connais pas trop en SVG...

Smiley smile
Merci tout d'abord de prendre le temps de me répondre c'est un peu compliquer a expliquer.
Je vais reprendre en essayant d'être un peu plus précis :

L'exemple de la carte ce trouve sur le site : http://techniweb.eu/ dans la rubrique partners internationnal.

Ne faite pas attention au site ne lui même il est codé en absolute totalement c'est ma première version du sîte je suis actuellement en train de le faire passer en responsive c'est pour que vous puissiez avoir un visuel pour mieux comprendre l'objectif.

Donc :
Dans mon code Javascript (écrit sur une page différente de mon code html ) j'ai 7 parties différentes qui représentes mes 7 continents.
Chaque continent porte l'ID soi Z1,Z2,Z3,Z4,Z5,Z6,Z7 en fonction de la zone.
Donc nous avons déjà l'ID de nos Zones en javascript
Mon objectif est que lorsque je clik sur une de ces zones une image apparaisse.
Cette image est placée dans une div depuis la page HTML et porte l'ID "image1".
Cette même image est mise en display:none afin qu'elle ne sois visible que lorsque l'on click sur une zone de la carte. Mon astuce est de faire passer cette image en display block lors du click sur une de mes zones.
Et je suis donc bloqué sur le script me permettant d'effectuer cette fonction... (le script envoyé précédemment est un essais de cette fonction mais elle ne marche pas )
Ok, alors, c'est moi qui ne comprends pas le innerHTML.

Si c'est l'élément qui porte l'ID 'Z1' qui est sélectionné, la div associée 'image 1' doit voir son display passer de 'none' à 'block'...

Il faut associer les deux éléments, vérifier que l'élément ID 'Z1' est bien sélectionné et... pour passer de passer de display : none à display : block en Javascript, c'est element.style.display = block... et je dois y aller...

Smiley smile
En gros la carte est affichée par un script qui génère du SVG .
Pourquoi un SVG width a 300% ?
Le layout est basé sur Bootstrap mais fichier de définition pas présent !
Sujet clos
Aller à