8722 sujets

Développement web côté serveur, CMS

Afficher données sous forme de pictogramme

Bonjour,
Je récupère des données d'un fichier json.
Pour faire apparaitre la direction du vent je fais un : <td>' . $data['vent'] . '</td>
Je souhaite maintenant faire apparaitre cette donnée sous forme d'une flèche et pas "WNW"
J'ai une URL avec l'image .png de toutes les flèches pour toutes les directions.
Mon code css ressemble à cela :

.fleches {
    background: url("http://adressedemesfleches.png") no-repeat top left;
}
.fleche-10{ background-position: 0 0; width: 26px; height: 26px; } 
.fleche-100{ background-position: 0 -52px; width: 26px; height: 26px; } 
.fleche-105{ background-position: 0 -104px; width: 26px; height: 26px; }  // etc...


J'ai tester de faire un 
<td><span class="fleches">' . $record['data']['vent'] . '</span>


Mais je n'ai que l'image "top left" de l'URL (background: url("http://adressedemesfleches.png") no-repeat top left;)

Je ne sais pas comment ajouter les -100 ou - 105 à mon css .fleches ? pour faire apparaître les autres images ?

Si vous pouvez me mettre sur la voie... merci
Salut

Quelque chose du genre devrais fonctionner : 

$class = "fleches";
switch($record['data']['vent']) {

    case "N" :
        
        $class = "fleche-10";
        break;

    case "W" :

        $class = "fleche-100";
        break;
...
}



<td><span class="' . $class . '">' . $record['data']['vent'] . '</span>
Merci,
La condition fonctionne mais elle ne va pas chercher l'image!
J'ai fait comme tu m'as dit :

$f = "msw-swa";

switch ($record['swell']['components']['primary']['compassDirection']) 
{
	case "WNW" :
		$f = "msw-swa-300";
echo '<td><span class="' . $f . '">' . $record['swell']['components']['primary']['compassDirection'] . '</span></td>';
		break;
}


En examinant le code avec firebug, il apparait dans le css que :
.msw-swa-300 {
    background-position: -52px -364px;
    height: 26px;
    width: 26px;
}


Alors que j'ai besoin aussi de : 
.msw-swa {

    background: url("http://adressedemesfleches.png") no-repeat top left;
}


Merci, j'y suis presque, peut être...
Comme je le dis souvent : faites d'abord la page en html pur avant de la faire en php, ça permet d'éviter une grosse quantité de bug.

Pour résumer ton cas. Le html doit faire un truc genre :

<td><span class="msw-swa-300 msw-swa">blabla dynamique</span></td>



"msw-swa-300" étant dynamique; blabla dynamique aussi. Ce sont les deux seules données qui doivent passer en variable php et qui doivent changer dans le echo. Soit un code php qui fournit un truc du genre :

echo '<td><span class="'.$var1.' msw-swa">'.$var2.'</span></td>';


En remplaçant bien sûr $var1 et $var2 par les variables issues de ton php avec des nouveaux un minimum explicatifs (parce que le nommage de variable c'est important Smiley murf )
Merci pour tes conseils et ta réponse qui m'a bien aidée.
Je suis pas encore super rodé au code, mais voilà, en suivant vos conseils, ce que j'ai fait:

$position = "msw-swa";

switch ($record['swell']['components']['primary']['compassDirection']) 
{
	case "WNW" :
		$image = "300";
echo '<td><span class="msw-swa-'.$image.' '.$position.'">'.$position.'</span></td>';
		break;
}

Ma flèche apparaît bien dans la bonne direction dans mon tableau mais j'ai le texte "msw-swa" qui apparaît aussi (je dois pouvoir l'enlever avec une propriété css ? ou alors ai-je mal fait le code ?)
Merci
Il apparaît parce qu'il est au milieu du span :

<span class="msw-swa-'.$image.' '.$position.'">'.$position.'</span>


Je ne sais pas ce que tu voulais mettre dans ton span, sans doute rien si j'ai bien compris le principe.

Il me semble que le html que tu voulais fournir était plutôt :

<img class="msw-swa-300 msw-swa" src='url_image_transparente_taille_pictogramme' alt='WNW'/>


A toi de refaire ça en php ^^ (t'en est juste à coté, il te manque une image par contre)
Merci pour votre aide et vos conseils,
Le dernier message m'a mis sur la voie et avec vos conseils j'ai trouvé quelque chose qui fonctionne :
Mon css 

.msw-swa {
    background: url("http://url_image_transparente_taille_pictogramme") no-repeat top left;
}
.msw-swa-10{ background-position: 0 0; width: 26px; height: 26px; } 
.msw-swa-100{ background-position: 0 -52px; width: 26px; height: 26px; } etc...

Mon code

switch ($record['swell']['components']['primary']['compassDirection']) 
{
	case "WNW" :
		$image = "300";
echo '<td class="msw-swa msw-swa-'.$image.'"></td>';
		break;
}

Smiley smile
Tu pouvais en effet le mettre dans le td ^^

Par contre, par prudence, sur la classe .msw-swa, j'ajouterais un height et un width de la taille du pictogramme ^^ Smiley langue

Et au niveau accessibilité, une image vide à l'intérieur du td avec un alt donnant la direction serait une bonne chose aussi.
Oui, merci! C'est vrai qu'on pense trop peu souvent à l'accessibilité (et référencement aussi j'imagine) !
J'ai rencontré un autre problème mais qui concerne un sujet différent que j'ai posté par conséquent ici
Sujet clos
Aller à