Assemblage de codes

pitou16 Messages postés 2 Date d'inscription   Statut Membre Dernière intervention   -  
briiiiix Messages postés 575 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,
je suis nouvelle sur le site, je dois créer un site internet en me servant du css et j'ai quelques difficultés. Sur une de mes pages j'ai mis un plan de Paris comme fond d'écran et je dois placer dessus d'autres images. Tout d'abord j'aimerais savoir s'il existe un moyen de connaitre rapidement les coordonnées d'un point précis sur la carte. J'aimerais aussi que les images s'agrandissent lorsque l'on clique dessus.
J'espère que vous pourrez m'aider,
merci d'avance.


A voir également:

5 réponses

Réponse 1 / 5
briiiiix Messages postés 575 Date d'inscription   Statut Membre Dernière intervention   18
 
pour moi, l'ideal pour connaitre les coordonnées d'un point est jquery en utilisant la fonction suivante:

var mx, my;

// Detecting the mouse positions
jQuery(document).ready(function(){
$().mousemove(function(e){
mx = (e.pageX);
my = (e.pageY);
});
});

cette fonction pouvant etre associée à l'evenement onclick d'un element qui sera dans ton cas la carte de pris
0
briiiiix Messages postés 575 Date d'inscription   Statut Membre Dernière intervention   18
 
Elle peut aussi servir a réaliser un traceur de coordonnées de la souris en l'associant à l'evenement onmousemove du document entier ou même de la carte seulement, il suffira de soustraire de mx et my les coordonnées de la carte de paris

Disponible pour toute autre demande
0
pitou16 Messages postés 2 Date d'inscription   Statut Membre Dernière intervention  
 
le code que tu m'as donné doit être mis dans le css ?? Je ne comprends pas à quoi il correspond... Je ne sais pas si ma question était assez claire. Mon plan de Paris est centré sur l'écran, je ne peux donc pas connaitre les bonnes coordonnées en déplaçant simplement la souris sur l'image...
Et puis je ne sais pas où mettre le code qui permet d'agrandir les images lorsque l'utilisateur clique sur une des photos.
0
briiiiix Messages postés 575 Date d'inscription   Statut Membre Dernière intervention   18
 
C'est un javascript.
Dis moi, comment tu as centré ton plan de paris ? via le css de tout le document? ou bien tu as ajouter un <img ?
0
Réponse 2 / 5
pitou16
 
Pour l'instant mon code ressemble à ça :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Paris by ...</title>
<style type="text/css">
<!--
body {
background-color=#FFFFFF ;
background-image: url(plan.gif);
background-repeat: no-repeat;
background-position: center ;
background-attachment: fixed ;
}

#apDiv1 {
position:absolute;
width:38px;
height:46px;
z-index:1;
left: 664px;
top: 158px;
}
#apDiv2 {
position:absolute;
width:80px;
height:114px;
z-index:1;
left: #px;
top: #px;
}
-->
</style></head>

<body>
<div id="apDiv1"><img src="images/37.jpg" width="48" height="56" /></div>
<div id="apDiv2"><img src="images/doisneau.jpg" alt="" width="80" height="114" /></div>
</body>
</html>

avec quelques images en plus et les mauvais placements.
0
Réponse 3 / 5
briiiiix Messages postés 575 Date d'inscription   Statut Membre Dernière intervention   18
 
Une remarque, tu es en train de réaliser un systeme de traçage dynamique, ceci dit que la résolution de l'ecran de l'internaute aura une très grande influence sur tes résultats et les positions de tes élements.
Se referer au body est une maladresse selon moi.
Du coup nous allons concevoir un système très dynamique et qui prend en charge toutes ces variables afin de donner un résultat unique pour tous les utilisateurs.

Bon voila, j'ai bidouillé un peu quelque chose vite fait pour toi, j'ai juste fait une petite partie mais très utile pour le bon fonctionnement du reste de ton code.
L'idée consiste à placer une div (id:plan) de dimensions connues au centre du navigateur, la proprieté css (margin:auto) va la positionner au centre, sauf que ses coordonnées vont changer en fonction de la résolution, d'où l'emploi d'une fonction findPos() qui nous les retournera.
Une autre fonction detectera les coordonnées absolues de la souris lors du survol de cette div et la difference entre les coordonnées de la souris et celles du plan sera tracée dans des champs de texte a chaque mouvement du curseur.

J'ai utilisé pour ça 3 fichiers, test.php, test.js et jquery-1.4.2-min.js
Pour telecharger le fichier jquery, il faut aller ici
http://code.jquery.com/jquery-1.4.2.min.js
Ci dessous les codes:

code pour test.php:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Paris by ...</title>
<style type="text/css">
body {
background=#FFFFFF ;
}
/* Div pour le plan*/
#plan {
width:640px;
height:480px;
margin:auto;
}
/* Div pour afficher les infos */
#infos {
width:600px;
height:25px;
margin:auto;
margin-bottom:10px;
padding-top:5px;
background:#CCC;
}
/* Classe champs texte x_, y_ */
.champstexte {
width:40px;
border:solid #999 1px;
background:#DDD;
}

</style>

<script type="text/javascript" src="jquery-1.4.2-min.js" ></script>
<script type="text/javascript" src="test.js" ></script>
</head>

<body>
<div id="infos">
Souris(X): <input type="text" name="x_" id="x_" readonly="readonly" class="champstexte" />
Souris(Y): <input type="text" name="y_" id="y_" readonly="readonly" class="champstexte" />
</div>
<div id="plan"><img src="plan.gif" width="100%" height="100%" border="0" /></div>

</body>
</html>

Code pour test.js
// position pour detecter la position d'un objet
jQuery.fn.extend({
findPos : function() {
obj = jQuery(this).get(0);
var curleft = obj.offsetLeft || 0;
var curtop = obj.offsetTop || 0;
while (obj = obj.offsetParent) {
curleft += obj.offsetLeft
curtop += obj.offsetTop
}
return {x:curleft,y:curtop};
}
});

$(document).ready(function() { // lorsque le document est chargé

var mx, my;
var px, py;

pos = $('#plan').findPos(); //on appelle la fonction findpos
//retourne le coordonnées via
px = pos.x;
py = pos.y;

// Detecting the mouse positions

$('#plan').mousemove(function(e){ // lorsqu'on survole le plan
mx = (e.pageX);
my = (e.pageY);
$('#x_').val(mx - px); //position relative de la souris x_ = mx-px
$('#y_').val(my - py); //position relative de la souris y_ = my-py
});

$('#plan').mouseout(function(e){ //En quittant le plan
$('#x_').val(''); //initialisation de x_
$('#y_').val(''); //initialisation de y_
});

});

Essaie ça, le reste viendra lorsque tu me confirme avoir compris ce code.
0
Réponse 4 / 5
pitou16
 
Je vais vraiment avoir l'air pas douée mais je ne comprends rien. Le code que tu me donne donnera quels résultats concrètement? Moi je voulais simplement mettre un plan en background et positionner des images par dessus mais je n'imaginais pas que ce serait si compliqué. En réalité le code que tu me donnes me permettra de connaître les coordonnées d'un point donné mais je ne vois pas en quoi il peut positionner les photos... Et où vont les photos dans ce code?
Je suis vraiment désolée de t'embêter, merci en tout cas de prendre le temps de me répondre.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
briiiiix Messages postés 575 Date d'inscription   Statut Membre Dernière intervention   18
 
Dis moi ce qui se passe lorsque tu copie ce code et que tu clique sur le plan.

code pour test.php
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Paris by ...</title>
<style type="text/css">
body {
background:#FFFFFF ;
}
/* Div pour le plan*/
#plan {
width:640px;
height:480px;
margin:auto;
position:relative;
}
/* Div pour afficher les infos */
#infos {
width:600px;
height:25px;
margin:auto;
margin-bottom:10px;
padding-top:5px;
background:#CCC;
}
/* Classe champs texte x_, y_ */
.champstexte {
width:40px;
border:solid #999 1px;
background:#DDD;
}
/* Div pour les marques */
.apDiv1 {/*On utilise des classes afin de pouvoir les repeter*/

width:38px;
height:46px;
position:absolute;
}

</style>

<script type="text/javascript" src="jquery-1.4.2.min.js" ></script>
<script type="text/javascript" src="test.js" ></script>
</head>

<body>
<div id="infos">
Souris(X): <input type="text" name="x_" id="x_" readonly="readonly" class="champstexte" />
Souris(Y): <input type="text" name="y_" id="y_" readonly="readonly" class="champstexte" />
</div>
<div id="plan"><img src="plan.gif" width="100%" height="100%" border="0" /></div>

</body>
</html>

code pour test.js
// position pour detecter la position d'un objet
jQuery.fn.extend({
findPos : function() {
obj = jQuery(this).get(0);
var curleft = obj.offsetLeft || 0;
var curtop = obj.offsetTop || 0;
while (obj = obj.offsetParent) {
curleft += obj.offsetLeft
curtop += obj.offsetTop
}
return {x:curleft,y:curtop};
}
});

$(document).ready(function() { // lorsque le document est chargé

var mx, my;
var px, py;

pos = $('#plan').findPos(); //on appelle la fonction findpos
//retourne le coordonnées via
px = pos.x;
py = pos.y;

// Detecting the mouse positions

$('#plan').mousemove(function(e){ // lorsqu'on survole le plan
mx = (e.pageX);
my = (e.pageY);
pos = $('#plan').findPos(); //on appelle la fonction findpos
//retourne le coordonnées via
px = pos.x;
py = pos.y;
$('#x_').val(mx - px); //position relative de la souris x_ = mx-px
$('#y_').val(my - py); //position relative de la souris y_ = my-py
});

$('#plan').mouseout(function(e){ //En quittant le plan
$('#x_').val(''); //initialisation de x_
$('#y_').val(''); //initialisation de y_
});

$('#plan').click(function(e){ // lorsqu'on clique sur le plan
var instances = $("#plan").find('.apDiv1').size(); //nombre de marques déja présentes sur le plan
var marque;
instance = instances + 1; //nouvelle instance
instance_w = 38; //largeur de la marque
instance_h = 46; // hauteur de la marque
instance_x = mx - px - (instance_w /2);
instance_y = my - py - (instance_h /2);
marque = '<div id="marque'+instance+'" class="apDiv1" style="left:'+instance_x+'px;top:'+instance_y+'px;z-index:'+instance+';display:none;"><img src="images/37.jpg" width="100%" height="100%" /></div>'
$('#plan').append(marque); // ajout de la marque invissible
$('#marque'+instance).fadeIn(); // affichage fondu
});

});
0
pitou16
 
J'ai copié le code, enregistré les deux autres code javascript et j'obtient mon plan avec une case grise en haut où il y a écrit souris(x) souris(y) mais rien dans les deux cases d'à côté...
0
briiiiix Messages postés 575 Date d'inscription   Statut Membre Dernière intervention   18
 
Assure toi d'avoir telechargé le fichier jquery
0
pitou16
 
Je l'ai enregistré sur une autre page css c'est bien ce qu'il fallait faire? Autrement je ne vois pas trop comment faire.
0
briiiiix Messages postés 575 Date d'inscription   Statut Membre Dernière intervention   18
 
Je parle fu fichier jquery que je t'ai demandé de telecharger, sans ce fichier rien ne fonctionne.
0
pitou16
 
j'ai copié collé le code de la page que tu m'avais donné et l'ai enregistré sous le nom que tu avais donné
0

Discussions similaires

IPTV CODE BLOQUÉ
Balcoleo -
bazfile -

1 réponse
commen faire gestes technique sur ps3
didi -
sasa26200 -

5 réponses
Configuration RM-014S+
Louis -
Pat -

3 réponses
Code PES 2015 ps2
Fallah_1999 -
Lolot -

3 réponses