Superposer deux images HTML

Bonjours,

Je suis en train de créé un site avec une nav fix a gauche et je met les images en 100% pour qu'elle s'adapte a tout les écrans, et j'aimerais faire une map de la france intéractives.

J'ai une image de la france et des pointeurs et j'aimerais mettre les pointeurs sur la map, ils serons cliquable, mais mon problème et que je ne peut pas mettre en position absolute car les pointeurs ne sont pas a la meme place sur tout les écrans, je ne peux pas non plus utilisé la balise <area> car je veux mettre les taille en pourcentage et pas de background non plus...

Si vous avez une solution cela m'aiderais fortement, que ce soit en Javascript, php, ajax ou meme un générateur de map mais pas de google map...

Merci...

Salut Fabouz

Fabouz a écrit :
Bonjours,
je ne peut pas mettre en position absolute car les pointeurs ne sont pas a la meme place sur tout les écrans

La position absolue se fait d'après le premier parent positionné.
Ainsi, si la carte est définie en position relative, les positionnements en pourcentage des pointeurs se feront d'après les dimensions de celle-ci.
Modifié par erwan21a (21 Oct 2016 - 17:14)

Si je met en position absolute avec un z-index, le pointeur se déplace selon la taille de l'écran

Bonjour,

Ton problème ne vient pas de ton absolute mais du positionnement de ton pointeur.

Tu fais du 100% sur ta carte, il faut donc que tu calcules en prenant en compte la ratio de la taille en % comparé à la taille en px pour placer ton pointeur correctement.

C'est juste une histoire de calcul...

Bon courage.

Je plussoie mini-truc.
Image et pointeurs sont sur le même référentiel, ton problème n'a donc pas lieu d'être.
Mais puisque ce référentiel (le viewport) est de dimension variable, il faut que tes valeurs le soient également.
Modifié par erwan21a (22 Sep 2014 - 17:40)

Alors deja merci pour vos réponses, mais est-ce possible d'avoir un exemple ?

@erwan21a : euh ... ok si tu veux.

@Fabouz : je n'ai peut être pas compris ton problème finalement ; as tu une page en ligne pour nous montrer ce que tu as mis en place ou alors un bout de code HTML ?
Parce que perso j'aurais un DIV content qui encadre le tout et qui contient en background ma carte et des DIV pointeurs ... Apparemment il existerait une autre solution à voir avec Mr erwan21a...

A vraie dire, tu veux faire une carte de france intéractive en html.
Le HTML devrait être composé de 3 Divs : ( pour ne pas avoir des bugs sur les div pointeurs )
par exemple :
map-fr : va contenir l’image référant pour notre map d’où l’attribut usemap=”#Map” sur l’image
france-normal : va contenir la carte de France entière (l’image png)
france-hover : va contenir les layers (ou div pointeurs )
C'est bien expliqué et détaillé sur http://integrateurinformatique.com/tutoriel-carte-departements-francais-en-html/

A priori je ne comprends pas bien pourquoi <map>/<area> ne pourraient pas te convenir.
Avec CSS3, il y a sûrement moyen d'ajouter l'interactivité que tu veux.

Et sinon, as-tu pensé à SVG ? ON peut aussi faire des cartes avec des zones interactives en SVG, avec des animations si on veut. ET en plus contrairement aux bidouillages à base de div (ou pire, <canvas>), il y a des moyens pour rendre ça raisonnablement accessible au clavier sans trop souffrir.

En fait, SVG serait la solution la plus solide pour ce genre de chose, à mon avis. Sauf si tu dois absolument supporter les vieux IE.

En plus, l'aspect taille variable selon les écrans est inscrit au coeur du format SVG, il n'y a normalement pas besoin d'avoir des images d'une taille monstrueuse pour que ça ne pixélise pas sur les grands écrans.
Modifié par QuentinC (27 Nov 2014 - 19:06)