# html/javascript remplacer nombre par image



## johny12 (19 Avril 2011)

Bonjour,

Je vous explique le "problème" :

Premièrement, le code source : 

```
<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
  body{
    background-color:#AAF;
  }
  #main{
    width:400px;
    padding:30px;
    margin:auto;
    background-color:#EEE;
  }
  ul{
    list-style-type:none;
  }
  h1{
    margin-top:0;
  }
  </style>
  <script type="text/javascript">
 
    function startWatch(){
      if (navigator.geolocation)
        var watchId = navigator.geolocation.watchPosition(successCallback,
                                  errorCallback,
                                  {enableHighAccuracy:true,
                                  timeout:10000,
                                  maximumAge:0});
      else
        alert("Votre navigateur ne prend pas en compte la géolocalisation HTML5");
    }
 
    function stopWatch(){
      navigator.geolocation.clearWatch(watchId);
    }     
 
    function successCallback(position){
      document.getElementById("lat").innerHTML = position.coords.latitude;
      document.getElementById("long").innerHTML = position.coords.longitude;
      document.getElementById("prec").innerHTML = position.coords.accuracy;
      document.getElementById("alt").innerHTML = position.coords.altitude;
      document.getElementById("precalt").innerHTML = position.coords.altitudeAccuracy;
      document.getElementById("angle").innerHTML = position.coords.heading;
      document.getElementById("speed").innerHTML = position.coords.speed;
      document.getElementById("time").innerHTML = new Date(position.timestamp);
    };  
 
    function errorCallback(error){
      switch(error.code){
        case error.PERMISSION_DENIED:
          alert("L'utilisateur n'a pas autorisé l'accès à sa position");
          break;
        case error.POSITION_UNAVAILABLE:
          alert("L'emplacement de l'utilisateur n'a pas pu être déterminé");
          break;
        case error.TIMEOUT:
          alert("Le service n'a pas répondu à temps");
          break;
        }
    };
 
  </script>
</head>
 
<body>
<div id="main">
  <ul>
    <li>Latitude : <span id="lat"></span></li>
    <li>Longitude : <span id="long"></span></li>
    <li>Précision : <span id="prec"></span></li>
    <li>Altitude : <span id="alt"></span></li>
    <li>Précision altitude : <span id="precalt"></span></li>
    <li>Angle par rapport au Nord : <span id="angle"></span></li>
    <li>Vitesse : <span id="speed"></span></li>
    <li>Date - Heure : <span id="time"></span></li>
  </ul>
  <a href="#" onclick="startWatch()">Démarrer</a>
  <a href="#" onclick="stopWatch()">Arrêter</a>
</div>
</body>
 
</html>
```
Ou le plus simple :

```
<span id="myPosition"></span>
<script>
	function getCoords(position) {
		pos  = "Latitude : " + position.coords.latitude  + "<br/>";
		pos += "Longitude: " + position.coords.longitude + "<br/>";
		pos += "Altitude : " + position.coords.altitude  + "<br/>";
		document.getElementById("myPosition").innerHTML = pos;
	}
	navigator.geolocation.getCurrentPosition(getCoords);
</script>

<!-- Détection automatique -->
<script src="_html5detect.js"></script>
<script>isItemSupported("navigator.geolocation")</script>
```
Ce que j'aimerais, c'est remplacer les valeurs affichées ( lat; long; prec etc ... ) par des images définies, mais ceci pour chaque caractère. ( comme une police d'écriture si vous préférez )

De manière à ce que :

1 soit remplacé par "image1.tiff"
2 par "image2.tiff"
3 pareil
... jusqu'à 9
"." par "point.tiff"
Et que 1.2 soir remplacé par "image1.tiff point.tiff image2.tiff "

Et que le tout reste sur la même ligne.

Si vous avez une idée, je vous écoute =)

N.B.

Un genre de :

set x to 1
set letexte to "il fait beau"
try
repeat
set cha to character x of letexte
if cha = 1
display image1.tiff
end if
if cha = 2
display image2.tiff
end if
if cha = 3
display image3.tiff
end if
...
set x to x+1
end repeat
end try


----------



## grumff (20 Avril 2011)

je vais te le faire en impro donc y'aura sans doute qq coquilles à corriger mais bon :


```
var num = 34345564546;
var strNum = new String(num);
document.getElementById("myDivId").innerHTML="";// bon sang je t'y metterais un jquery moi à la place de cette syntaxe pourrie
for (var i = 0 ; i < strNum.length ; strNum++) {
     document.getElementById("myDivId").innerHTML+="<img src='image'"+strNum[i]+".jpg' alt='"+strNum[i]+"' />";
}
```


----------



## johny12 (20 Avril 2011)

Merci bien =)

Pour les curieux, j'ai utilisé cette solution couplée à une police personnalisée (http://fontstruct.com/)


----------

