Problème préchargement images
leto23
Messages postés
89
Statut
Membre
-
leto23 Messages postés 89 Statut Membre -
leto23 Messages postés 89 Statut Membre -
Bonjour,
Je dispose d'un tableau de 80 cases sur 80 cases, soit 6400 cases de 30 pixel sur 30px, et où chaque cases contient une image unique. Bien entendu je ne souhaite pas afficher cet énorme tableau en une fois, c'est pourquoi je me contente d'afficher une portion plus petite, de 9 cases sur 9, dans laquelle on peut naviguer en cliquant sur les cases (chaque cases est une image lien, et cliquer dessus recentre le tableau sur sa cible).
Malheureusement, j'ai un problème, les images ne se charge pas assez vite bien que le tableau ne soit de 9X9. Sa fait quand même 81 images a charger, et sa le navigateur ne le supporte pas. On voit donc les dernières images se charger alors que la page est fini...se qui gâche complètement les déplacements sur le tableau.
J'aimerais trouver un système qui me permettrait de rendre mes déplacements dans mon tableau beaucoup plus fluide, c'est a dire de précharger avant l'affichage l'ensemble des images directement affichées.
Pour l'instant j'utilise ce script javascript:
C'est "censé" me précharger les images...$origine est la première image du tableau de 9X9, puis un objet image est créer et la source est l'adresse de l'image a charger.
Sauf que ce script, bien que placé avant mon affichage, charge les images après l'affichage (constat après avoir voulu charger toutes les images du tableau de 80X80, (l'affichage est la et le navigateur toujours en train de charger...)).
J'aimerais donc, des avis sur comment mieux charger ma page, avec par exemple, placer un texte de chargement avant l'affichage du tableau,...
Je ne connait pas le flash, et je ne suis pas non plus un expert de javascript, mais si se sont les seuls moyens, j'essayerais quand même de m'adapter ^^
Pour l'instant je vous laisse constater que le préchargement ne s'effectue pas, ma page est en ligne ici : http://cluster1.easy-hebergement.net/
Merci !
Je dispose d'un tableau de 80 cases sur 80 cases, soit 6400 cases de 30 pixel sur 30px, et où chaque cases contient une image unique. Bien entendu je ne souhaite pas afficher cet énorme tableau en une fois, c'est pourquoi je me contente d'afficher une portion plus petite, de 9 cases sur 9, dans laquelle on peut naviguer en cliquant sur les cases (chaque cases est une image lien, et cliquer dessus recentre le tableau sur sa cible).
Malheureusement, j'ai un problème, les images ne se charge pas assez vite bien que le tableau ne soit de 9X9. Sa fait quand même 81 images a charger, et sa le navigateur ne le supporte pas. On voit donc les dernières images se charger alors que la page est fini...se qui gâche complètement les déplacements sur le tableau.
J'aimerais trouver un système qui me permettrait de rendre mes déplacements dans mon tableau beaucoup plus fluide, c'est a dire de précharger avant l'affichage l'ensemble des images directement affichées.
Pour l'instant j'utilise ce script javascript:
$origine = ($_GET['case'] - 4) - (4*80); echo '<script language="JavaScript" type="text/javascript"> var id = '.$origine.'; var adr = "http://cluster1.easy-hebergement.net/"; var ext = ".png"; for (i = 0; i <= 9; i++) { for(j = 0; j <= 9; j++) { image_tampon = new Image(); image_tampon.src = adr + id + ext; id = id + 1; } id = id + 80; } </script>';
C'est "censé" me précharger les images...$origine est la première image du tableau de 9X9, puis un objet image est créer et la source est l'adresse de l'image a charger.
Sauf que ce script, bien que placé avant mon affichage, charge les images après l'affichage (constat après avoir voulu charger toutes les images du tableau de 80X80, (l'affichage est la et le navigateur toujours en train de charger...)).
J'aimerais donc, des avis sur comment mieux charger ma page, avec par exemple, placer un texte de chargement avant l'affichage du tableau,...
Je ne connait pas le flash, et je ne suis pas non plus un expert de javascript, mais si se sont les seuls moyens, j'essayerais quand même de m'adapter ^^
Pour l'instant je vous laisse constater que le préchargement ne s'effectue pas, ma page est en ligne ici : http://cluster1.easy-hebergement.net/
Merci !
A voir également:
- Problème préchargement images
- Des images - Guide
- Extraire images pdf - Guide
- Recherche images - Guide
- Comment superposer deux images sur word ✓ - Forum Word
- 4 images 1 mot niveau 10 chaperon rouge ✓ - Forum Jeux vidéo
18 réponses
Salut !
J'aurai tendance à te dire de faire des images plus grande !
Voire même 1 seule image géante (2400x2400). Comme ça, tu la charge une bonne fois pour toute.
Dans le cas ou tu te retrouve avec 1 seule grande image, ton tableau de cases n'est plus très utile ... mais bon.
Si tu veux quand même afficher des cases de tableau avec des liens, tu peux toujours utiliser des balises A avec l'image géante en backgroud, et la déplacer en x et y pour la placer au bon endroit :
<a href='' style='display:block;width:30px;height:30px;background:url(imagegéante.png) -30*$x -30*$y;' ></a>
le -30*$x et -30*$y sont à calculer en php pour déplacer l'image dans sa case.
Si charger une carte géante ne te plais pas, tu peux toujours la décomposer en cartes moyennes (genre 10*10 ou 20*20 ), et ne les charger qu'en cas de besoin. (ce qui est utilisé sur tous les système de carte : googlemap ...)
Dans tous les cas, ce qui te pose problème, c'est beaucoup de tous petits fichiers. En général le navigateur ne lance que 2 processus en parallèle. C'est à dire qu'il télécharge les images 2 par 2.
idem, plutot que de numéroter tes images de 0 à 6400 ... tu devrai les numéroter en x et y
image-1-1.png
image-1-2.png
...
image-80-80.png
beaucoup plus facile d'afficher l'image correspondant à une case précise sans risque d'erreur.
J'aurai tendance à te dire de faire des images plus grande !
Voire même 1 seule image géante (2400x2400). Comme ça, tu la charge une bonne fois pour toute.
Dans le cas ou tu te retrouve avec 1 seule grande image, ton tableau de cases n'est plus très utile ... mais bon.
Si tu veux quand même afficher des cases de tableau avec des liens, tu peux toujours utiliser des balises A avec l'image géante en backgroud, et la déplacer en x et y pour la placer au bon endroit :
<a href='' style='display:block;width:30px;height:30px;background:url(imagegéante.png) -30*$x -30*$y;' ></a>
le -30*$x et -30*$y sont à calculer en php pour déplacer l'image dans sa case.
Si charger une carte géante ne te plais pas, tu peux toujours la décomposer en cartes moyennes (genre 10*10 ou 20*20 ), et ne les charger qu'en cas de besoin. (ce qui est utilisé sur tous les système de carte : googlemap ...)
Dans tous les cas, ce qui te pose problème, c'est beaucoup de tous petits fichiers. En général le navigateur ne lance que 2 processus en parallèle. C'est à dire qu'il télécharge les images 2 par 2.
idem, plutot que de numéroter tes images de 0 à 6400 ... tu devrai les numéroter en x et y
image-1-1.png
image-1-2.png
...
image-80-80.png
beaucoup plus facile d'afficher l'image correspondant à une case précise sans risque d'erreur.
Salut,
merci pour ta réponse.
Pour la grande image, celle-ci met quelques secondes a se charger seul, car elle fait 2400px/2400px, mais si sa vaut a un seul chargement, ton idée de la placer sous des liens/cases est a tester. Si je veut garder les cases, c'est parce que j'ai une base de donnée dernière avec une ligne pour chaque cases.
Pour ton idée sur le nom des images, je ne sait pas si le changer améliore les choses, car si les nombre se suivent j'ai aussi la possibilité de me déplacer facilement et avec un seul chiffre. Par exemple, pour aller a la droite d'une case je fait : numéro de la case +1, pour aller en haut: numéro de la case - 80,...
Mais si je choisie qu'une grande image, la question ne se pose plus ^^
Si j'utilise sa:
<a href='' style='display:block;width:30px;height:30px;background:url(imagegéante.png) -30*$x -30*$y;' ></a>
Je doit garder ma disposition en tableau ? ou je me contente de faire une succession de lien, puis de rajouter un retour a la ligne <br> pour former mon carré ?
merci pour ta réponse.
Pour la grande image, celle-ci met quelques secondes a se charger seul, car elle fait 2400px/2400px, mais si sa vaut a un seul chargement, ton idée de la placer sous des liens/cases est a tester. Si je veut garder les cases, c'est parce que j'ai une base de donnée dernière avec une ligne pour chaque cases.
Pour ton idée sur le nom des images, je ne sait pas si le changer améliore les choses, car si les nombre se suivent j'ai aussi la possibilité de me déplacer facilement et avec un seul chiffre. Par exemple, pour aller a la droite d'une case je fait : numéro de la case +1, pour aller en haut: numéro de la case - 80,...
Mais si je choisie qu'une grande image, la question ne se pose plus ^^
Si j'utilise sa:
<a href='' style='display:block;width:30px;height:30px;background:url(imagegéante.png) -30*$x -30*$y;' ></a>
Je doit garder ma disposition en tableau ? ou je me contente de faire une succession de lien, puis de rajouter un retour a la ligne <br> pour former mon carré ?
peu-importe ...
Une suite de lien serai pas mal !
par contre, il faut rajouter un float: left dans le style des liens (sinons il vont tous aller à la ligne).
et entoure des liens par exemple un <div style='width:270px;height:270px;'> pour qu'ils aillent tout seul à la ligne toute les 9 cases ... (attentions aux mages, espaces ...)
Le br seul ne servirait à rien ... il faut un <br style='clear: both;' /> ou le clear:both sur le premièr lien de chaque ligne pour forcer un retour à la ligne
l'avantage du tableau c'est que tu sera sur de pas avoir de décalages ...
Pour tes calculs de math, en effet, -80 ça le fait ... mais c'est pour toi ... exemple, tu veux faire un déplacement en diagonale de 5 cases vers le bas à droite ??? ça deviens quoi ton calcul ?
m'enfin, c'est juste un suggestion ...
Une suite de lien serai pas mal !
par contre, il faut rajouter un float: left dans le style des liens (sinons il vont tous aller à la ligne).
et entoure des liens par exemple un <div style='width:270px;height:270px;'> pour qu'ils aillent tout seul à la ligne toute les 9 cases ... (attentions aux mages, espaces ...)
Le br seul ne servirait à rien ... il faut un <br style='clear: both;' /> ou le clear:both sur le premièr lien de chaque ligne pour forcer un retour à la ligne
l'avantage du tableau c'est que tu sera sur de pas avoir de décalages ...
Pour tes calculs de math, en effet, -80 ça le fait ... mais c'est pour toi ... exemple, tu veux faire un déplacement en diagonale de 5 cases vers le bas à droite ??? ça deviens quoi ton calcul ?
m'enfin, c'est juste un suggestion ...
C'est bon j'ai appliqué la grande image, avec des liens cliquables dans un tableau. Il y a aucun problème a part le long chargement lors du premier chargement (et l'aperçut qui est long, vu que c'est une écriture sur image en php...).Mais c'est beaucoup mieux, merci pour ton aide ! Faut plus que je trouve une solution pour mettre un écran qui montre le chargement pour combler l'attente de l'image la première fois.
http://cluster1.easy-hebergement.net/
Pour un déplacement en diagonal vers le bas a droite, sa revient a aller a droite et a descendre...sa revient au même que avec une coordination x et y.
Diagonale de 1 vers le bas a droite:
- ma coord: (numéro image + 1) - 80
- coord (x;y): (x + 1;y - 1)
http://cluster1.easy-hebergement.net/
Pour un déplacement en diagonal vers le bas a droite, sa revient a aller a droite et a descendre...sa revient au même que avec une coordination x et y.
Diagonale de 1 vers le bas a droite:
- ma coord: (numéro image + 1) - 80
- coord (x;y): (x + 1;y - 1)
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
quelques suggestions encore pour optimiser le temps ...
pour l'instant, tu affiche 81 fois la même image géante. Elle n'est chargée qu'une fois, mais le navigateur doit l'afficher quand même 81 fois ...
Ce qui pourrait être intéressant, c'est d'enlever le background sur le lien, et de le mettre sur le table.
Comme ça, l'image n'est affichée qu'une seule fois pour tout le tableau.
Attention par contre, à l'heure actuelle, tu as des décalages entre les images ( 2 ou 3 pixel pour les bords des cellules), cet espace n'est pas géré sur ta grande carte. Soit tu supprime les espace entre les liens, soit tu réduits les liens de 2 pixels et tu rajoute un border:1px solid white; (dans la css globale) pour compenser.
Pour le chargement de l'image, utilise la fonction onload sur le body de ta page.
la fonction onload sera appelé uniquement quand l'image aura fini de charger.
Tu place un gros DIV (id='attente') par dessus toute ta page (plutôt au début du code), avec le message d'attente. Et dans le body tu rajoute :
Pour ce qui est de la minimap, c'est un peu con de générer une image à chaque fois.
du devrai plutôt utiliser un div à placer devant l'image.
de tête :
Ceci à plusieurs avantage :
- pas de perte de temps à générer l'image
- possibilité en javascript de déplacer le carré rouge sur la minimap pour effectuer un déplacement
- possibilité d'animer le déplacement de ce carré ...
pour l'instant, tu affiche 81 fois la même image géante. Elle n'est chargée qu'une fois, mais le navigateur doit l'afficher quand même 81 fois ...
Ce qui pourrait être intéressant, c'est d'enlever le background sur le lien, et de le mettre sur le table.
Comme ça, l'image n'est affichée qu'une seule fois pour tout le tableau.
Attention par contre, à l'heure actuelle, tu as des décalages entre les images ( 2 ou 3 pixel pour les bords des cellules), cet espace n'est pas géré sur ta grande carte. Soit tu supprime les espace entre les liens, soit tu réduits les liens de 2 pixels et tu rajoute un border:1px solid white; (dans la css globale) pour compenser.
Pour le chargement de l'image, utilise la fonction onload sur le body de ta page.
la fonction onload sera appelé uniquement quand l'image aura fini de charger.
Tu place un gros DIV (id='attente') par dessus toute ta page (plutôt au début du code), avec le message d'attente. Et dans le body tu rajoute :
<body onload="document.getElementById('attente').style.display='none';" >
Pour ce qui est de la minimap, c'est un peu con de générer une image à chaque fois.
du devrai plutôt utiliser un div à placer devant l'image.
de tête :
<div style='position: relative; width: 80px; height:80px; background: url(minimap.png);'>
<div style='position: absolute;z-index:100;left: $xpx;top: $ypx;width:9px;height:9px;border: 1px solid red;'></div>
</div>
Ceci à plusieurs avantage :
- pas de perte de temps à générer l'image
- possibilité en javascript de déplacer le carré rouge sur la minimap pour effectuer un déplacement
- possibilité d'animer le déplacement de ce carré ...
En faisant les modifs, la fonction ajouté un quadrillage ne marchait plus...j'ai corrigé le problème et sa marche normalement.
Le quadrillage n'est en faite que le cellpadding qui passe de 0 à 1.
C'est vrai que si je met une seul image pour la <table>, le quadrillage posera un gros problème...l'astuce du border est sympa, mais la couleur de la grille, n'est que la couleur de fond de l'image en background, et cette astuce causerait les problèmes concernant la vue sans quadrillage (les borders blancs qui resteraient...)
Pour se qui est de l'aperçu avec la mini image, je savait que écrire a chaque fois n'était pas la solution la plus performante lol, j'ai appliquer se que ta dit, et sa marche très bien ! Après pour bouger le carré rouge directement sur la carte en javascript, je sait pas encore faire...
Pour cacher le chargement j'ai fait comme sa (inspiré de se que tu as dit):
Javascript:
Html:
En gros, je charge l'image avec le onload, alors que le DIV 'chargement' affiche un texte de chargement, puis quand c'est fini, sa cache le DIV 'chargement' et affiche le DIV 'attente' qui contient mon tableau...mais sa marche moyen comme tu peut le constater (en vidant son cache): http://cluster1.easy-hebergement.net/
Le quadrillage n'est en faite que le cellpadding qui passe de 0 à 1.
C'est vrai que si je met une seul image pour la <table>, le quadrillage posera un gros problème...l'astuce du border est sympa, mais la couleur de la grille, n'est que la couleur de fond de l'image en background, et cette astuce causerait les problèmes concernant la vue sans quadrillage (les borders blancs qui resteraient...)
Pour se qui est de l'aperçu avec la mini image, je savait que écrire a chaque fois n'était pas la solution la plus performante lol, j'ai appliquer se que ta dit, et sa marche très bien ! Après pour bouger le carré rouge directement sur la carte en javascript, je sait pas encore faire...
Pour cacher le chargement j'ai fait comme sa (inspiré de se que tu as dit):
Javascript:
function GetId(id)
{
return document.getElementById(id);
}
var visible = false;
function affiche()
{
image = new Image();
image.src = "http://cluster1.easy-hebergement.net/";
if(visible == false)
{
visible == true;
GetId('attente').style.display= '';
GetId('chargement').style.display= 'none';
}
}
function chargement()
{
GetId('attente').style.display= 'none';
alert('111');
GetId('chargement').style.display= '';
}
Html:
<body onload="affiche();">
<script language="JavaScript" type="text/javascript">chargement();</script>
<div id="chargement">Chargement en cours</div>
<div id="attente">
/*Code qui affiche le tableau */
</div>
En gros, je charge l'image avec le onload, alors que le DIV 'chargement' affiche un texte de chargement, puis quand c'est fini, sa cache le DIV 'chargement' et affiche le DIV 'attente' qui contient mon tableau...mais sa marche moyen comme tu peut le constater (en vidant son cache): http://cluster1.easy-hebergement.net/
Ca me parait bien compliqué ...
J'aurai juste fait :
En le mettant au début du code, et le style directement dans la balise il sera interprété immédiatement, donc direct, un écran (gris), qui s'en va dès que c'est fini.
Et pour ton soucis de cadrillage (avec/sans qui ne marche pas ...) j'avais bien compris que c'était le cellpadding qui le faisait !
Mais dans le cas des liens avec un border, tu fait 2 classes css différentes:
Effectivement, le modèle avec bord cache quelques pixels de la carte. y'a moyen de tricher en faisant un cadrillage de seulement 1px de large ... voire en semi transparent si necessaire.
Le fait de passer par des classes te permet aussi d'activer ou d'enlever le cadrillage en javascript sans recharger la page, juste en modifiant les classes sur les liens (je te donnerai le code qui va bien si tu veux).
J'aurai juste fait :
<body onload="document.getElementById('Attente').style.display='none';">
<div id='Attente' style='display: block;position: fixed;top:0;left:0;width:100%;height:100%;background:#aaa;text-align: center;padding: 50px 0;'>
Chargement en cours ...
</div>
...
En le mettant au début du code, et le style directement dans la balise il sera interprété immédiatement, donc direct, un écran (gris), qui s'en va dès que c'est fini.
Et pour ton soucis de cadrillage (avec/sans qui ne marche pas ...) j'avais bien compris que c'était le cellpadding qui le faisait !
Mais dans le cas des liens avec un border, tu fait 2 classes css différentes:
.avecBord{
width:28px;
height:28px;
border: 1px solid white;
}
.sansBord{
width: 30px;
height: 30px;
border: none;
}
<a href='' class='avecBord' ....
Effectivement, le modèle avec bord cache quelques pixels de la carte. y'a moyen de tricher en faisant un cadrillage de seulement 1px de large ... voire en semi transparent si necessaire.
Le fait de passer par des classes te permet aussi d'activer ou d'enlever le cadrillage en javascript sans recharger la page, juste en modifiant les classes sur les liens (je te donnerai le code qui va bien si tu veux).
Pour le déplacement de la carte, le fait d'utiliser 1 seule image, te permet aussi de déplacer la carte sans recharger la page ... juste en décalant sont origine x/y.
Je peux t'aider aussi pour le script de déplacement du div sur la minimap ...
Je peux t'aider aussi pour le script de déplacement du div sur la minimap ...
Je ne refuse pas ton aide ^^, tu est webmaster professionnel ? (j'ai adoré la vidéo de démo qu'il y a sur le site que tu présentes, vraiment très stylé !)
J'ai appliqué le code qui place l'écran gris, sa marche bien, j'ai aussi rajouter un div qui englobe le tout pour avoir un truc cadré.
http://cluster1.easy-hebergement.net/
Je vais essayer de faire en sorte qu'il n'y ait que une seul fois la carte dans le tableau, puis avec les bordures je vais essayer avec javascript comme tu as dit. Pour se qui est de se déplacer sur la carte, tout en javascript (sans la recharger) je sait pas si sa marcherais, vu que chaque cases affichées utilisent la base de donnée pour tirer des informations (par exemple le type de case,...). Je pense que pour réussir a faire sa, faudrait le faire en AJAX.
Pour se qui est de l'aperçut, je ne voit pas du tout par ou commencer...Pour moi, dans le but d'avoir quand même une interaction possible, j'aurais essayé de placer des liens de 1 pixel partout sur l'image, mais je suppose que c'est pas conseillé ^^ (l'aperçut faisant 160px/160px, sa ferais 25 600 liens !!)
J'ai appliqué le code qui place l'écran gris, sa marche bien, j'ai aussi rajouter un div qui englobe le tout pour avoir un truc cadré.
http://cluster1.easy-hebergement.net/
Je vais essayer de faire en sorte qu'il n'y ait que une seul fois la carte dans le tableau, puis avec les bordures je vais essayer avec javascript comme tu as dit. Pour se qui est de se déplacer sur la carte, tout en javascript (sans la recharger) je sait pas si sa marcherais, vu que chaque cases affichées utilisent la base de donnée pour tirer des informations (par exemple le type de case,...). Je pense que pour réussir a faire sa, faudrait le faire en AJAX.
Pour se qui est de l'aperçut, je ne voit pas du tout par ou commencer...Pour moi, dans le but d'avoir quand même une interaction possible, j'aurais essayé de placer des liens de 1 pixel partout sur l'image, mais je suppose que c'est pas conseillé ^^ (l'aperçut faisant 160px/160px, sa ferais 25 600 liens !!)
prenons les points 1 par 1 ...
déjà affiche une seule fois l'image dans le tableau.
pour ce qui est de la base de donnée, je suppose que tu doit récupérer des truc style y'a une ville sur telle case ...
L'ajax est beaucoup plus simple qu'il n'y parait ...
Faut définir les éléments placer dans les cases ! si c'est juste un picto à rajouter, aucun soucis en ajax/javascript
Pour la minimap, le principe est utlra simple c'est le déplacement d'objet en glisser déposer :
sur le petit div rouge :
onmousedown => active le déplacement
onmousemove => suis la souris
onmouseup => valide les nouveaux coordonées
Dans la réalité, c'est un petit peu subtil, mais y'a rien de méchant.
déjà affiche une seule fois l'image dans le tableau.
pour ce qui est de la base de donnée, je suppose que tu doit récupérer des truc style y'a une ville sur telle case ...
L'ajax est beaucoup plus simple qu'il n'y parait ...
Faut définir les éléments placer dans les cases ! si c'est juste un picto à rajouter, aucun soucis en ajax/javascript
Pour la minimap, le principe est utlra simple c'est le déplacement d'objet en glisser déposer :
sur le petit div rouge :
onmousedown => active le déplacement
onmousemove => suis la souris
onmouseup => valide les nouveaux coordonées
Dans la réalité, c'est un petit peu subtil, mais y'a rien de méchant.
J'ai essayer de faire la minimap avec le carré rouge que l'on peut déplacer. Je me suis un peu inspiré de scripts trouvés sur le net. Le carré rouge peut être déplacé, mais sa bug un peu...et je n'ai pas réussit a actualiser la grande carte en fonction de la position du carré rouge.
Le bug réside dans le fait ou parfois, lorsque l'on sélectionne le carré, celui-ci est considéré comme une image qui ne peut être déplacer par firefox...sa fait que lorsque l'on relâche l'image avec la souris, le onmouseup n'est pas exécuter, et donc faut repasser le curseur sur le carré puis re-cliquer pour relâcher le carré.
voila le code:
J'ai fait mes tests en hors ligne, j'ai pas mit a jour le lien de la carte habituel.
Voila le lien qui est censé m'actualiser la grande carte:
document.location.href="?page=carte&x=" + newPosX + "&y=" + newPosY;
Mais je n'ai pas réussit a le placer. Il devrais être selon moi dans le onmouseup lorsque l'on relâche le carré.
Le bug réside dans le fait ou parfois, lorsque l'on sélectionne le carré, celui-ci est considéré comme une image qui ne peut être déplacer par firefox...sa fait que lorsque l'on relâche l'image avec la souris, le onmouseup n'est pas exécuter, et donc faut repasser le curseur sur le carré puis re-cliquer pour relâcher le carré.
voila le code:
function getPositionCurseur(e)
{
curX = e.clientX;
curY = e.clientY;
}
function beginDrag(p_obj,e)
{
isDragging = true;
objectToDrag = p_obj;
getPositionCurseur(e);
ecartX = curX - parseInt(objectToDrag.style.left);
ecartY = curY - parseInt(objectToDrag.style.top);
}
function drag(e)
{
var newPosX;
var newPosY;
if(isDragging == true)
{
getPositionCurseur(e);
newPosX = curX - ecartX;
newPosY = curY - ecartY;
if(newPosX > (160 - 18)) //taille de l'image - taille du carre rouge
{
newPosX = 160 - 18;
}
if(newPosX < 0)
{
newPosX = 0;
}
if(newPosY > (160 - 18))
{
newPosY = 160 - 18;
}
if(newPosY < 0)
{
newPosY = 0;
}
objectToDrag.style.left = newPosX + 'px';
objectToDrag.style.top = newPosY + 'px';
}
}
function endDrag()
{
isDragging = false;
}
J'ai fait mes tests en hors ligne, j'ai pas mit a jour le lien de la carte habituel.
Voila le lien qui est censé m'actualiser la grande carte:
document.location.href="?page=carte&x=" + newPosX + "&y=" + newPosY;
Mais je n'ai pas réussit a le placer. Il devrais être selon moi dans le onmouseup lorsque l'on relâche le carré.
Eh bien ça avance ... c'est sur la bonne voix ...
Pour le drag/drop, y'a pleins de scripts ... moi je fais les miens en général ...
Pour le coup de l'image qui se clique pas bien, il y a quelques règles à respecter :
- le div doit être plein (même si c'est du transparent), sinon, on ne le sélectionne pas bien.
- pas de balises IMG ou de texte dans les div (même un espace, vaut mieux pas)...
Pour le lien, ça me parait pas mal ... newPosX et newPosY. Par contre, attention de bien récupérer les bonnes valeurs lors du mouseUP ! a priori, ces variables sont définies dans la fonction drag. Elle ne sont donc pas disponible dans les autres fonctions ...
Si tu arrive à afficher qu'une seule fois la grande carte dans le tableau, tu peux même la déplacer en temps réel pendant que tu drag/drop la minimap :
quelque chose du genre :
document.getElementById('GrandeCarte').style.backgroundPosition= (-newPosX*80)+'px '+(-newPosY*80)+'px';
Pour le drag/drop, y'a pleins de scripts ... moi je fais les miens en général ...
Pour le coup de l'image qui se clique pas bien, il y a quelques règles à respecter :
- le div doit être plein (même si c'est du transparent), sinon, on ne le sélectionne pas bien.
- pas de balises IMG ou de texte dans les div (même un espace, vaut mieux pas)...
Pour le lien, ça me parait pas mal ... newPosX et newPosY. Par contre, attention de bien récupérer les bonnes valeurs lors du mouseUP ! a priori, ces variables sont définies dans la fonction drag. Elle ne sont donc pas disponible dans les autres fonctions ...
Si tu arrive à afficher qu'une seule fois la grande carte dans le tableau, tu peux même la déplacer en temps réel pendant que tu drag/drop la minimap :
quelque chose du genre :
document.getElementById('GrandeCarte').style.backgroundPosition= (-newPosX*80)+'px '+(-newPosY*80)+'px';
Je suis pas encore assez expérimenter en javascript pour réaliser seul un script comme sa ^^ , il me fallait voir des raisonnements sur le problème.
J'ai testé plusieurs trucs pour que la sélection du carré marche mieux, mais sans succès. Tu veux dire quoi par "le div doit être plein" ?
J'ai essayé de mettre une image d'un carré transparent a bord rouge, aucun changement...
J'ai essayé de remplir le div avec une couleur, aucun changement...
J'ai essayé de changer les positions,...
Il n'y a rien dans le div
<div style='position: relative; width: 160px; height:160px; background: url(images/map_apercu.png);'>
<div id='carre' style='position: absolute;z-index:50;left: <?php echo $x; ?>px;top: <?php echo $y; ?>px;width: 16px;height:16px; border: 1px solid red;' onmousedown="beginDrag(this,event);" onmousemove="drag(event);" onmouseup="endDrag();"></div></div>
J'ai pas encore traité encore la grande carte pour qu'il n'y ait que une image.
J'ai testé plusieurs trucs pour que la sélection du carré marche mieux, mais sans succès. Tu veux dire quoi par "le div doit être plein" ?
J'ai essayé de mettre une image d'un carré transparent a bord rouge, aucun changement...
J'ai essayé de remplir le div avec une couleur, aucun changement...
J'ai essayé de changer les positions,...
Il n'y a rien dans le div
<div style='position: relative; width: 160px; height:160px; background: url(images/map_apercu.png);'>
<div id='carre' style='position: absolute;z-index:50;left: <?php echo $x; ?>px;top: <?php echo $y; ?>px;width: 16px;height:16px; border: 1px solid red;' onmousedown="beginDrag(this,event);" onmousemove="drag(event);" onmouseup="endDrag();"></div></div>
J'ai pas encore traité encore la grande carte pour qu'il n'y ait que une image.
il faut peut-être juste que tu déclare les variables globales (en dehors de fonctions) ...
var curX;
var curY;
var ecartX;
var ecartY;
var isDragging = false;
var objectToDrag;
...
pour qu'ils soient accessible depuis toutes les fonctions ....
var curX;
var curY;
var ecartX;
var ecartY;
var isDragging = false;
var objectToDrag;
...
pour qu'ils soient accessible depuis toutes les fonctions ....
J'ai fait le changement dans les tableaux, il n'y a maintenant que une seul image affichée.
En gros j'ai fait sa:
ou $this->tableau_cases affiche tout les liens formant les cases.
Pour la minimap, déclarer les variables globales en dehors des fonctions n'a rien changé...
J'ai tout remit a jour en ligne, y comprit la minimap (qui bug toujours ^^):
http://cluster1.easy-hebergement.net/
Question: au lieu de faire un carré rouge que l'on peut déplacer, on pourrait pas faire une fonction javascript qui a partir d'un clique sur l'image (onclick) replacerais directement le carré rouge ? sa ne serait pas plus simple ?
En gros j'ai fait sa:
<td colspan="9" rowspan="9" valign="top" style='position:absolue;height:270px;width:270px;background:url(http://localhost/Antic_V2/images/map.png) <?php echo $x; ?>px <?php echo $y; ?>px;'><?php $this->tableau_cases(); ?></td>
ou $this->tableau_cases affiche tout les liens formant les cases.
Pour la minimap, déclarer les variables globales en dehors des fonctions n'a rien changé...
J'ai tout remit a jour en ligne, y comprit la minimap (qui bug toujours ^^):
http://cluster1.easy-hebergement.net/
Question: au lieu de faire un carré rouge que l'on peut déplacer, on pourrait pas faire une fonction javascript qui a partir d'un clique sur l'image (onclick) replacerais directement le carré rouge ? sa ne serait pas plus simple ?
Je répond a ma question précédente, il est beaucoup plus facile de faire la minimap avec un système de placement par clique !
Mise a jour effectuée sur mon lien d'exemple.
Mise a jour effectuée sur mon lien d'exemple.
Pas mal ...
en effet, c'est plus simple de cliquer sur la carte ...
Chez moi, ça buggue un peu le déplacement ... (Firefox/Linux)
par contre, reste toujours le soucis de recharger la page ...
Le coup de la grille ? je n'ai jamais réussi à l'enlever ... MDR
Tu devrai corriger un peu ton code HTML :
- commencer pa rajouter une entete html dans ta page ( <html> et </html> à la fin)
- ne rien écrire avant le <head>
- ne rien écrire après le <body> (sauf </html>)
Tu peux remplacer tous les
<td width="30px" height="30px" align="center">40</td>
par
<th>40</th>
en mettant dans la css :
th{ width: 30px; height: 30px;}
idem pour les liens des cases, le display block, tu peux le mettre dans la css (avec ou sansBord)
en effet, c'est plus simple de cliquer sur la carte ...
Chez moi, ça buggue un peu le déplacement ... (Firefox/Linux)
par contre, reste toujours le soucis de recharger la page ...
Le coup de la grille ? je n'ai jamais réussi à l'enlever ... MDR
Tu devrai corriger un peu ton code HTML :
- commencer pa rajouter une entete html dans ta page ( <html> et </html> à la fin)
- ne rien écrire avant le <head>
- ne rien écrire après le <body> (sauf </html>)
Tu peux remplacer tous les
<td width="30px" height="30px" align="center">40</td>
par
<th>40</th>
en mettant dans la css :
th{ width: 30px; height: 30px;}
idem pour les liens des cases, le display block, tu peux le mettre dans la css (avec ou sansBord)
En effet la grille ne marche pas loool
C'est parce que quand je travaille sur la page hors ligne (sur wamp), celle-ci est intégrée à mon site, donc lorsque je la met en ligne faut que je rajoute certaines lignes (le body, le head,...) et y en a que je peut oublier lol (comme la grille !).
J'ai corrigé le bug de la grille et suivie tes recommandations, mais maintenant c'est la minimap qui marche plus...alors qu'elle marchais à peu près correctement hier soir ! C'est étrange, car j'ai pas les même rendues lorsque c'est en ligne ou sur wamp avec la minimap ! Elle ne m'indique pas les bonnes coordonnées en ligne...alors que sa marche parfaitement bien en hors ligne.
C'est parce que quand je travaille sur la page hors ligne (sur wamp), celle-ci est intégrée à mon site, donc lorsque je la met en ligne faut que je rajoute certaines lignes (le body, le head,...) et y en a que je peut oublier lol (comme la grille !).
J'ai corrigé le bug de la grille et suivie tes recommandations, mais maintenant c'est la minimap qui marche plus...alors qu'elle marchais à peu près correctement hier soir ! C'est étrange, car j'ai pas les même rendues lorsque c'est en ligne ou sur wamp avec la minimap ! Elle ne m'indique pas les bonnes coordonnées en ligne...alors que sa marche parfaitement bien en hors ligne.
