Discussion :

[nenette95]

Bonjour à tous,
Je souhaiterais ajouter une image sur une map.
pour le moment je fais comme ceci :

Code :

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

1
2
 
onmouseover="Afficher_Zone(1);"

et dans mon JS :

Code :

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

1
2
3
4
5
6
7
8
9
 
function Afficher_Zone(c)
	{
	var a=document.getElementById("area_image");
	var b=document.getElementById("county_"+c);
	a.style.backgroundImage="url(image/MonImage"+c+".png)";
	b.style.textDecoration="underline";
	return true
	}

Maintenant j'aurais la même image à faire apparaitre à différent endroit de ma map.
Je n'ai pas envie de faire 30 images identiques mais une seule que je positionnerais à différent coordonnées sur la map.

Auriez vous une idée sur la méthode à utiliser?

Cordialement

[Bovino]

Tu peux t'inspirer de ça : Une image map avec des infobulles CSS3 et jQuery.

[NoSmoking]

Bonjour,
une image en position:absolute que tu places là où tu le souhaites en jouant sur ses propriétés left et top.

[nenette95]

Bonjour,
Oui exactement NoSmoking, c'est ce à quoi je pensais cependant je n'arrive pas à ajouter une image avec des coordonnées.
J'ai essayé un truck comme ça mais je bouge tout la map et ce n'est pas bon...
Dans mon JS

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function Afficher_Ma_Zone(c,l,t)
{
	var a=document.getElementById("area_image");
	var b=document.getElementById("county_"+c);
	a.style.backgroundRepeat="no-repeat";
	a.style.position = "absolute";
	Mon_top=a.style.top;
	Mon_left=a.style.left;
	a.style.top=t;
	a.style.left=l;
	a.style.backgroundImage="url(image/Alerte.png)";
	b.style.textDecoration="underline";
	return true
}

Dans mon HTML :

Code html :

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

1
2
3
4
5
6
7
8
9
<div style="background-image:url(image/Mon_image_fond.png);" class="Map" id="area_image">
<img src="image/image.png" alt="" usemap="#france_map">
</div>
.
.
.
.
 
<a id="county_2" href="Impression/Plan.pdf" onmouseover="Afficher_Ma_Zone(2,'1178px','231px');" onmouseout="Masquer_Ma_Zone(2);" >Mon Plan</a><br />

Donc enfaite je devrait modifier "image/image.png" plutôt que "image/Mon_image_fond.png" ?

[NoSmoking]

Je pensais à un problème simple, mais je dois admettre que je ne comprends plus la finalité de la chose...

[nenette95]

Bonjour,
C'est un problème très simple, mais j'ai du mal m'expliquer.
J'ai une carte en fond d'écran sur ma map "image/Mon_image_fond.png".
Je voudrais faire apparaitre dessus une autre image à des coordonnée précis.
mais je n'y arrive pas.
Avec le code précédent j'affiche une image aux coordonnées précis mais des scrollbar apparaisses, comme si l'image que j'affiche était immense (elle ne l'est pas).
Je pense que j'ai mal fait un truck...

Cordialement

[nicosmash]

Bonjour,

Vous pouvez utiliser ceci :
http://tympanus.net/codrops/tag/google-maps/

Puis mettre de la transparence en CSS3 :
background-color: rgba(0, 0, 0, 0.2);

Et ici la doc sur le rgba :
http://www.w3.org/wiki/CSS/Properties/color/RGBA