Créer une map

3 participants

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Créer une map

Message par Stephane77260 Ven 22 Oct 2010 - 1:05

Bonjour,

je voudrais savoir s'il était possible de créer un code pour faire cette carte :
http://www.thewhitemap.com/Camelot/Map/carte2.php?zoom=1

Vous constatez quand passant la souris sur un château, il y a le nom et la position !
Il faudrait ensuite que je puisse changer les positions et noms à volonté dans le code.
Ensuite il faudrait que je l'insère dans un sujet de mon forum.
J'ai essayé de copié le code source de la page, évidemment ça n'a rien donné, je n'y connais rien.

Si quelqu'un pouvait me créer ça, ça serai génial !!

Je vous remercie par avance !



Dernière édition par Stephane77260 le Jeu 4 Nov 2010 - 21:54, édité 1 fois
avatar

Stephane77260
Nouveau membre

Masculin
Messages : 15
Inscrit(e) le : 21/10/2010

http://excalibur.monalliance.com/forum.htm
Stephane77260 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer une map

Message par Stephane77260 Sam 23 Oct 2010 - 0:57

up
avatar

Stephane77260
Nouveau membre

Masculin
Messages : 15
Inscrit(e) le : 21/10/2010

http://excalibur.monalliance.com/forum.htm
Stephane77260 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer une map

Message par ge80 Sam 23 Oct 2010 - 9:36

Bonjour

On nomme ce processus une image réactive.
Voici un tutoriel qui pourra vous aider.

<- Image réactive ->

Si vous avez besoin de plus d'aide mais il faut essayer de le faire soit même tout au moins au début et demander en cas de difficultés.
C'est comme cela que l'on progresse.


Cordialement
ge
ge80

ge80
Membre actif

Masculin
Messages : 16167
Inscrit(e) le : 08/10/2006

http://www.tsi80.net/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer une map

Message par Stephane77260 Lun 25 Oct 2010 - 0:26

Ok merci je vous tiens au courant !
avatar

Stephane77260
Nouveau membre

Masculin
Messages : 15
Inscrit(e) le : 21/10/2010

http://excalibur.monalliance.com/forum.htm
Stephane77260 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer une map

Message par Stephane77260 Lun 25 Oct 2010 - 10:07

Alors j'ai bien compris ce qu'il fallait faire, mais j'ai un problème.

Que faut-il que je mette pour que au lieu que ça soit une zone rectangulaire ou un cercle, mais que ça soit juste un point ?

<area shape="?" title="VOTRE TITRE" coords="x1,y1"

Et qu'à l'endroit de ce point se trouve une image, comme une tour comme sur lien que je vous ai montré ?
http://www.thewhitemap.com/Camelot/Map/carte2.php?zoom=1

Merci.
avatar

Stephane77260
Nouveau membre

Masculin
Messages : 15
Inscrit(e) le : 21/10/2010

http://excalibur.monalliance.com/forum.htm
Stephane77260 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer une map

Message par ge80 Lun 25 Oct 2010 - 10:25

Bonjour

Voici un lien avec les propriétés autorisées.
Map (doc)

Pour un point : vous pouvez prendre un rectangle (carré) de 1 pixel de côté ou un cercle de rayon 1pixel.
Il va falloir être doué pour cliquer au bon endroit Wink

Cordialement
ge
ge80

ge80
Membre actif

Masculin
Messages : 16167
Inscrit(e) le : 08/10/2006

http://www.tsi80.net/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer une map

Message par Stephane77260 Lun 25 Oct 2010 - 11:19

Voilà ce que j'ai fait mais l'image de la tour ne s'affiche pas sur ma map:

Code:
<img usemap="#excalibur" src="http://i26.servimg.com/u/f26/15/66/63/94/213.jpg" width="749" height="749" border="0">
<map name="excalibur">
<area shape="poly" title="VOTRE TITRE" coords="1,1,2,2" img src="http://www.thewhitemap.com/Camelot/Map/tower.png"></map>

Est ce que vous pouvez m'aider et me montrer pour une coordonnée ?

Merci.
avatar

Stephane77260
Nouveau membre

Masculin
Messages : 15
Inscrit(e) le : 21/10/2010

http://excalibur.monalliance.com/forum.htm
Stephane77260 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer une map

Message par ge80 Lun 25 Oct 2010 - 11:54

Code:
<img usemap="#excalibur" src="http://i26.servimg.com/u/f26/15/66/63/94/213.jpg" width="749" height="749" border="0">
<map name="excalibur">
<area shape="rect" title="VOTRE TITRE" coords="1,1,20,20" href="http://www.thewhitemap.com/Camelot/Map/tower.png">
</map>

Si vous cliquez en haut à gauche cela charge l'image de la tour.

Je viens de saisir ce que vous vous voulez faire.

En fait, vous voulez positionner sur une image une autre image et ceci en dynamique !
Est-ce cela ?

Ge
ge80

ge80
Membre actif

Masculin
Messages : 16167
Inscrit(e) le : 08/10/2006

http://www.tsi80.net/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer une map

Message par Stephane77260 Lun 25 Oct 2010 - 11:59

Oui il faut que la tour soit positionnée sur la map et lorsqu'on passe la souris dessus le texte qui est dans title="VOTRE TITRE" s'affiche !
avatar

Stephane77260
Nouveau membre

Masculin
Messages : 15
Inscrit(e) le : 21/10/2010

http://excalibur.monalliance.com/forum.htm
Stephane77260 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer une map

Message par ge80 Lun 25 Oct 2010 - 12:04

Alors dans ce cas c'est un programme qu'il faut faire.

Une image réactive est statique et envoi vers des liens lors de clic mais ne sert pas à positionner des images dans une autre....

En quelque sorte c'est un logiciel de dessin reflexion

On va dire qu'il y aurait un bon nombre de ligne...

C'est un bon projet mais pas mal de temps à passer.

Espérons, pour vous, qu'un membre du forum d'entraide aura fait se genre de programme.

Cordialement
ge
ge80

ge80
Membre actif

Masculin
Messages : 16167
Inscrit(e) le : 08/10/2006

http://www.tsi80.net/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer une map

Message par Stephane77260 Lun 25 Oct 2010 - 12:10

Ah mince on était si proche de la solution ...

J'espère effectivement que quelqu'un pourra m'aider aidez moi

En tout cas merci beaucoup de vous être donné tant de mal !
avatar

Stephane77260
Nouveau membre

Masculin
Messages : 15
Inscrit(e) le : 21/10/2010

http://excalibur.monalliance.com/forum.htm
Stephane77260 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer une map

Message par Stephane77260 Jeu 28 Oct 2010 - 15:56

Bonjour,

Voilà ce que j'ai réussi à faire :

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MAP</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
body{
   font-family:Arial, Helvetica, sans-serif;
   font-size:12px;
   color:#333333;
}
div#map img{position:absolute;}
div#result{position:absolute; background:#99CC66; display:block; padding:5px; width:110px; text-align:center;}
</style>
</head>

<body>
<div id="map" style="background:url('http://i26.servimg.com/u/f26/15/66/63/94/213.jpg') no-repeat; height:749px; width:749px;">
<!-- bloc affichant les coordonnees -->
<div id="result" style="display:none;"></div>

<!-- IMG Tower. L'attribut style permet le positionnement sur la map -->
<img src="http://www.thewhitemap.com/Camelot/Map/tower.png" height="25" width="18" style="top:65px; left:55px;" alt="toto" />
<img src="http://www.thewhitemap.com/Camelot/Map/tower.png" height="25" width="18" style="top:165px; left:255px;"  alt="robert" />
<img src="http://www.thewhitemap.com/Camelot/Map/tower.png" height="25" width="18" style="top:365px; left:455px;"  alt="jean" />
<img src="http://www.thewhitemap.com/Camelot/Map/tower.png" height="25" width="18" style="top:565px; left:270px;"  alt="paul" />
<img src="http://www.thewhitemap.com/Camelot/Map/tower.png" height="25" width="18" style="top:95px; left:650px;"  alt="jacques" />
</div>


<!-- Script JQUERY Affichage coordonnees -->
<script>
$("img").hover(function (e) {
  var offset = $(this).offset();
  e.stopPropagation();
  var pseudo = $(this).attr("alt");
  $('#result').css({top: offset.top - 30, left:offset.left - 30});
  $("#result").fadeIn("fast"); //appaition du bloc coordonnees
  $("#result").text(pseudo + " ( " + offset.left + " / " + offset.top + " )"); //ecriture des coordonnees dans le bloc
},
function () {
$("#result").fadeOut("fast"); //disparition du bloc coordonnees
});
</script>
</body>
</html>

Alors ça marche très bien quand je l'ouvre sur mon ordinateur, mais sur mon forum non.
Le forum ne prend pas en compte le Script JQUERY si j'ai bien compris reflexion
avatar

Stephane77260
Nouveau membre

Masculin
Messages : 15
Inscrit(e) le : 21/10/2010

http://excalibur.monalliance.com/forum.htm
Stephane77260 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer une map

Message par Stephane77260 Jeu 4 Nov 2010 - 0:05

up
avatar

Stephane77260
Nouveau membre

Masculin
Messages : 15
Inscrit(e) le : 21/10/2010

http://excalibur.monalliance.com/forum.htm
Stephane77260 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer une map

Message par Adam_sfp Jeu 4 Nov 2010 - 10:10

Bonjour

Il faut essayer votre code en le mettant sur une page :+html:
et insérer ensuite cette page en iframe.

Code:
<iframe src="adresse de votre page.htm" width="749" height="749" frameborder="0" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>

Cordialement.
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer une map

Message par Stephane77260 Jeu 4 Nov 2010 - 14:18

Bonjour,

soit je n'ai pas compris, soit ça ne marche pas.

J'ai inséré votre code à la suite du mien, en mettant bien l'adresse de ma page où se trouve la map, mais ça n'a rien changé !
avatar

Stephane77260
Nouveau membre

Masculin
Messages : 15
Inscrit(e) le : 21/10/2010

http://excalibur.monalliance.com/forum.htm
Stephane77260 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer une map

Message par Adam_sfp Jeu 4 Nov 2010 - 17:51

bonsoir
Pouvez collez ici le code que vous avez mis?

Cordialement.
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer une map

Message par Stephane77260 Jeu 4 Nov 2010 - 19:08

Je l'ai écrit de cette façon, bien entendu j'ai mis l'adresse de ma page.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MAP</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
body{
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
  color:#333333;
}
div#map img{position:absolute;}
div#result{position:absolute; background:#99CC66; display:block; padding:5px; width:110px; text-align:center;}
</style>
</head>

<body>
<div id="map" style="background:url('http://i26.servimg.com/u/f26/15/66/63/94/213.jpg') no-repeat; height:749px; width:749px;">
<!-- bloc affichant les coordonnees -->
<div id="result" style="display:none;"></div>

<!-- IMG Tower. L'attribut style permet le positionnement sur la map -->
<img src="http://www.thewhitemap.com/Camelot/Map/tower.png" height="25" width="18" style="top:65px; left:55px;" alt="toto" />
<img src="http://www.thewhitemap.com/Camelot/Map/tower.png" height="25" width="18" style="top:165px; left:255px;"  alt="robert" />
<img src="http://www.thewhitemap.com/Camelot/Map/tower.png" height="25" width="18" style="top:365px; left:455px;"  alt="jean" />
<img src="http://www.thewhitemap.com/Camelot/Map/tower.png" height="25" width="18" style="top:565px; left:270px;"  alt="paul" />
<img src="http://www.thewhitemap.com/Camelot/Map/tower.png" height="25" width="18" style="top:95px; left:650px;"  alt="jacques" />
</div>


<!-- Script JQUERY Affichage coordonnees -->
<script>
$("img").hover(function (e) {
  var offset = $(this).offset();
  e.stopPropagation();
  var pseudo = $(this).attr("alt");
  $('#result').css({top: offset.top - 30, left:offset.left - 30});
  $("#result").fadeIn("fast"); //appaition du bloc coordonnees
  $("#result").text(pseudo + " ( " + offset.left + " / " + offset.top + " )"); //ecriture des coordonnees dans le bloc
},
function () {
$("#result").fadeOut("fast"); //disparition du bloc coordonnees
});
</script>
</body>
</html>
<iframe src="adresse de votre page.htm" width="749" height="749" frameborder="0" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
avatar

Stephane77260
Nouveau membre

Masculin
Messages : 15
Inscrit(e) le : 21/10/2010

http://excalibur.monalliance.com/forum.htm
Stephane77260 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer une map

Message par Adam_sfp Jeu 4 Nov 2010 - 20:31

Bonsoir

Vous avez mal compris Wink
il faut créer une page HTML dans votre Pa
module-->Html-->gestion des pages Html

Créer une nouvelle page HTML mettez un titre cochez non et non.
Collez votre code dans la partie :+html:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MAP</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
body{
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
  color:#333333;
}
div#map img{position:absolute;}
div#result{position:absolute; background:#99CC66; display:block; padding:5px; width:110px; text-align:center;}
</style>
</head>

<body>
<div id="map" style="background:url('http://i26.servimg.com/u/f26/15/66/63/94/213.jpg') no-repeat; height:749px; width:749px;">
<!-- bloc affichant les coordonnees -->
<div id="result" style="display:none;"></div>

<!-- IMG Tower. L'attribut style permet le positionnement sur la map -->
<img src="http://www.thewhitemap.com/Camelot/Map/tower.png" height="25" width="18" style="top:65px; left:55px;" alt="toto" />
<img src="http://www.thewhitemap.com/Camelot/Map/tower.png" height="25" width="18" style="top:165px; left:255px;"  alt="robert" />
<img src="http://www.thewhitemap.com/Camelot/Map/tower.png" height="25" width="18" style="top:365px; left:455px;"  alt="jean" />
<img src="http://www.thewhitemap.com/Camelot/Map/tower.png" height="25" width="18" style="top:565px; left:270px;"  alt="paul" />
<img src="http://www.thewhitemap.com/Camelot/Map/tower.png" height="25" width="18" style="top:95px; left:650px;"  alt="jacques" />
</div>


<!-- Script JQUERY Affichage coordonnees -->
<script>
$("img").hover(function (e) {
  var offset = $(this).offset();
  e.stopPropagation();
  var pseudo = $(this).attr("alt");
  $('#result').css({top: offset.top - 30, left:offset.left - 30});
  $("#result").fadeIn("fast"); //appaition du bloc coordonnees
  $("#result").text(pseudo + " ( " + offset.left + " / " + offset.top + " )"); //ecriture des coordonnees dans le bloc
},
function () {
$("#result").fadeOut("fast"); //disparition du bloc coordonnees
});
</script>
</body>
</html>


puis validez

récupérez l'Url du lien de votre page htm une adresse du style
http://excalibur.monalliance.com/test-h1.htm

et c'est cette adresse que vous devez récupérer pour l'iframe.

Code:
    <iframe src="http://excalibur.monalliance.com/test-h1.htm" width="749" height="749" frameborder="0" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>

et vous collez ce code dans votre post

Cordialement.
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer une map

Message par Stephane77260 Jeu 4 Nov 2010 - 21:54

Oui super ça marche Very Happy
Merci beaucoup pour votre aide !
avatar

Stephane77260
Nouveau membre

Masculin
Messages : 15
Inscrit(e) le : 21/10/2010

http://excalibur.monalliance.com/forum.htm
Stephane77260 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum