11548 sujets

JavaScript, DOM et API Web HTML5

Carte javascript avec des tuiles

Bonjour,

je voudrais faire une carte en javascript avec des tuile de 20px sur 20 px dans le genre de google map.

J'aimerais avoir un lien ou un retour d'experience sur ça.

J'ai dans l'idée de tester la taille de la fenêtre du navigateur, la position puis de calculer les images a afficher.

Merci.
A+
Bon j'ai suivi mon idée, j'ai créé des tuiles de 252 * 204 (oui, plus grand, c'est moins fatigant Smiley smile ) , pour l'instant je ne m'occupe pas des mouvements de la carte.

Je test la taille de la fenetre du navigateur.
Je veux ajouter le DIV dynamiquement avec la taille de la fentetre.
J'afiche le début de la carte par deux boucle for.

Mais ca bloque quand j'ajoute le DIV, je fait les test sous FF 1.5.0.3.

J'essais ceci :


Voila, si quelqu'un a une idée.

A+
var myStyle = document.styleSheets[0];
myStyle.insertRule("#blanc { color: white }", 0);

J'essais avec la couleur car c'est strictement l'exemple de
developer.mozilla.org

et j'ai l'erreur suivante sous le console javascript :
a écrit :

Erreur : uncaught exception: [Exception... "Not enough arguments [nsIDOMWindowInternal.alert]" nsresult: "0x80570001 (NS_ERROR_XPC_NOT_ENOUGH_ARGS)" location: "JS frame :: http://127.0.0.1/testjs/map.html :: <TOP_LEVEL> :: line 30" data: no]


Ma pauv'page :

<html>
<head>

<link rel="stylesheet" id="csspersolink" type="text/css" href="carte.css">
<script language="javascript">

var fen_haut = 0, fen_large = 0;

function taille_fenetre() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) 
  {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } 
  else ( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) 
  {
    //IE
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } 

  fen_haut =  myHeight;
  fen_large = myWidth;
}

var myStyle = document.styleSheets[0];
myStyle.insertRule("#blanc { color: white }", 0); 
 alert();


</script>


</head>
<body>

<div Id=c1><div Id="carte"></div></div>
      <script language="javascript">
      taille_fenetre();
           
      var nb_haut = Math.floor(fen_haut / 204);
      var nb_large = Math.floor(fen_large / 252);
      
      var txt = '';
      for(var x=0;x<nb_haut;x++)	
      {
	 for(var y=0;y<nb_large;y++)	
         {
	    txt = txt + '<img src="' + x + y + '.jpg">';
         }
      }

document.getElementById("carte").innerHTML = txt;
      </script>
   </body>
</html>
Sujet clos
Aller à