[PHP-JS] Générer grille d'image cliquables mais dans un autre langage

[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 :

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 :

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

et la case 134 qui est cliquable :

Code html :

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 :

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 :

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]

Envoyé par titfab

Code html :

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

Code html :

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>

Envoyé par zulot

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 :

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 :

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 :

<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 :

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++