[PHP-JS] Générer grille d'image cliquables mais dans un autre langage
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:
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:
<li><a href='#' id='133'></a></li>
et la case 134 qui est cliquable :
Code:
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.
:?
