Discussion :

[maxfive7]

Bonjour,

mon site affiche une carte, découpé en images cliquable (pour s'y déplacer), tous marche bien, je génère à l'aide du php le code html pour intégrer chacune des cases sur la page web.

Le problème c'est que pour afficher jusqu'à 200 cases, ça fait beaucoup de code html!!! (ça prend un certain temps à télécharger le code...)

voici comment j'ai fait :

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
for($i=1; $i<=$nbTotalCases; $i ++){
 
echo "
	<li> 
	<a href='#' id='".$i."'";
	$valide = testCase($caseJoueur, $i, $tabMap);
	if($valide){ 
	      echo "onclick='changeCase(this.id);'>";} 
             else{ echo ">";}	?>
 
<?php     if($caseJoueur == $i){ 
	        echo "<img src='".$pathPosition."' border='0'";} ?>
 
<?php     if ($valide){ 
	        echo "<img src='".$pathMouseOff."' id='cases"; 
	        echo $i; 
	        echo "' onMouseOver='on(this.id)' onMouseOut='off(this.id)' border='0'
	        style='filter: alpha(opacity=25)' />";
	} ?>
<?php     echo "</a></li>"; 
 
	if(($i%$nbLargeur==0) AND ($i!=$nbTotalCases)){
	        echo"</ul><ul id='bloc'>";
	}
?><?php		
}
?>

ce qui donne en html :

par exemple pour la case 133 non cliquable:

Code html :

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

<li><a href='#' id='133'></a></li>

et la case 134 qui est cliquable :

Code html :

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

1
2
3
4
5
<li><a href='#' id='134'onclick='changeCase(this.id);'> 
<img src='./map/map2/vide.gif' id='cases134' 
onMouseOver='on(this.id)' 
onMouseOut='off(this.id)' 
border='0' style='filter: alpha(opacity=25)' /></a></li>

Donc pour 200 cases, on retrouve 200 fois ce texte, ça fait beaucoup au final!!! J'aimerai maintenant codé ceci par exemple en javascript ou un autre langage de sorte à ce que ce code soit généré sur le pc du visiteur, et non sur le serveur en php. Celà permettrai d'économiser des ressources serveur, et d'avoir moins de code html à envoyer.

[titfab]

Tu peux l'alléger avec du css :

Code css :

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

1
2
3
4
5
.imgCliquable {
background-image: url("./map/map2/vide.gif") ;
border-style : none;
filter: alpha(opacity=25);
}

Ton image cliquable devient :

Code html :

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

1
2
3
4
<li><a href='#' id='134' onclick='changeCase(this.id);'> 
<img class="imgCliquable" id='cases134' 
onMouseOver='on(this.id)' 
onMouseOut='off(this.id)' /></a></li>

Je pense qu'il doit être possible également d'associer les évènements souris à une classe d'objet...

[zulot]

Et pourquoi ne pas faire des boucles php?

J'ai un systeme a peu pres identique et j'ai fais des boucles imbriqués avec une id qui est id="YYXX" ce qui te permet de te retrouver dans ton tableau en dynamique.

[trotters213]

Code html :

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

1
2
3
4
<li><a href='#' id='134' onclick='changeCase(this.id);'> 
<img class="imgCliquable" id='cases134' 
onMouseOver='on(this.id)' 
onMouseOut='off(this.id)' /></a></li>

Un peu de rigueur dans e code HTML parce que là c'est pas top :

Code html :

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

1
2
3
4
<li><a href="#" id="134" onclick="changeCase(this.id);"> 
<img class="imgCliquable" id="cases134" 
onmouseover="on(this.id)" 
onmouseout="off(this.id)" /></a></li>

Et pourquoi ne pas faire des boucles php?

Parce que le PHP génère du HTML et que son souci est justement d'en générer moins.

Pour ton souci maxfive7, ce que tu peux faire c'est donner une classe à tes images cliquables, récupérer cette classe via un script Javascript et utiliser à ce moment les fonction d'évènement.

Pour ce qui est de l'opacité, utilise ceci dans un CSS :

Code :

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

1
2
3
4
filter: alpha(opacity=25)
opacity:0.25
-khtml-opacity;0.25
-moz-opacity;0.25

ainsi tu auras une image translucide dans tous les navigateurs (ce n'est pas CSS).

Au niveau de ton code PHP, il y a une erreur je pense :

Code :

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

1
2
3
4
5
6
7
8
9
<?php     if($caseJoueur == $i){ 
	        echo "<img src='".$pathPosition."' border='0'";} ?>
 
<?php     if ($valide){ 
	        echo "<img src='".$pathMouseOff."' id='cases"; 
	        echo $i; 
	        echo "' onMouseOver='on(this.id)' onMouseOut='off(this.id)' border='0'
	        style='filter: alpha(opacity=25)' />";
	} ?>

avec ce code tu pourrais te retrouver avec ceci :

Code HTML :

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

<img src='ton_chemin_$pathPosition' border='0' <img src='ton_chemin_$pathMouseOff' id='casesxxx' ...;

donc avec 2 balises img imbriquées bizarrement.

PS : pourquoi fermes-tu les balises PHP pour les réouvrir juste après ???
PS 2 : en HTML on fait <balise attribut="valeur" ...> et non pas <balise attribut='valeur' ...>

[djayp]

Salut !

Ce qui prend du temps au chargement de la page, c'est certainement les 200 images de quelques Ko qui doivent être téléchargées dans le cache du navigateur pour être ensuite affichées.

Voici une autre technique que tu peux essayer : avoir une seule image (la carte complète) et utiliser la balise html <map> qui te permet de définir des zones cliquables sur cette image.

Par exemple :

Code :

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

1
2
3
4
5
6
<img usemap="#Map" src="ma_carte.gif" border="0" width="560" height="559" />
<map name="Map">
<area shape="poly" coords="90,110,97,109" href="page1.html" />
<area shape="poly" coords="79,219,94,218" href="page2.html" />
<area shape="poly" coords="90,219,34,218" href="page3.html" />
</map>

Chaque balise <area> correspond à une zone cliquable, il te suffit donc de les mettre dans ta boucle avec les bons paramètres !

En espérant que ca t'aide à résoudre ton problème !

A++