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
Page 1 sur 1 • Partagez
Créer une map
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 !
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
Re: Créer une map
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
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
Re: Créer une map
Ok merci je vous tiens au courant !
Re: Créer une map
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.
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.
Re: Créer une map
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
Cordialement
ge
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
Cordialement
ge
Re: Créer une map
Voilà ce que j'ai fait mais l'image de la tour ne s'affiche pas sur ma map:
Est ce que vous pouvez m'aider et me montrer pour une coordonnée ?
Merci.
- 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.
Re: Créer une 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="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
Re: Créer une map
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 !
Re: Créer une map
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
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
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
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
Re: Créer une map
Ah mince on était si proche de la solution ...
J'espère effectivement que quelqu'un pourra m'aider
En tout cas merci beaucoup de vous être donné tant de mal !
J'espère effectivement que quelqu'un pourra m'aider
En tout cas merci beaucoup de vous être donné tant de mal !
Re: Créer une map
Bonjour,
Voilà ce que j'ai réussi à faire :
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
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
Re: Créer une map
Bonjour
Il faut essayer votre code en le mettant sur une page :+html:
et insérer ensuite cette page en iframe.
Cordialement.
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.
Re: Créer une map
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é !
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é !
Re: Créer une map
bonsoir
Pouvez collez ici le code que vous avez mis?
Cordialement.
Pouvez collez ici le code que vous avez mis?
Cordialement.
Re: Créer une map
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>
Re: Créer une map
Bonsoir
Vous avez mal compris
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:
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.
et vous collez ce code dans votre post
Cordialement.
Vous avez mal compris
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.
Re: Créer une map
Oui super ça marche
Merci beaucoup pour votre aide !
Merci beaucoup pour votre aide !
Sujets similaires
» Créer un autre serveur comme sosblog mais pour créer des site gratuit
» Creer une Pop-Up
» créer un QCM
» Créer un annonce
» Créer un bouton gif
» Creer une Pop-Up
» créer un QCM
» Créer un annonce
» Créer un bouton gif
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum