Generation d'image en JS

14 réponses

Guillaume JAY

18/10/2005 à 22:59

Toujours dans GreaseMonkey (et Trixie, son equivalent IE), je me
demande s'il est possible de creer (et d'afficher) des images par le
javascript.

Par image, j'entends juste une barre de hauteur entre 1 et 46 pixels.

C'est pour inserer a l'interieur d'un <TD>

Guillaume

4 réponses

1 2

19/10/2005 à 22:01

On Tue, 18 Oct 2005 23:33:39 +0200, YD
wrote:

Par image, j'entends juste une barre de hauteur entre 1 et 46 pixels.
C'est pour inserer a l'interieur d'un <TD>

Alors ne cherche pas midi à 14 h ;-)
Crée une DIV avec la hauteur kivabien et attribue la background-color idoine.

Certes, mais si je veux qu'il y ait deux couleurs dans ma barre (dans
le sens vertical) ? Je fais un tableau de deux lignes dans le div ?)

Et ce genre de code ne te convient pas (à rationaliser avec une feuille
de style si c'est possible) ?

<table><tr><td>
<div style="position:absolute; height: 43px; width: 5px; margin-left: 0; background-color: red"></div>
<div style="position:absolute; height: 43px; width: 5px; margin-left: 5px; background-color: yellow"></div>
<div style="position:absolute; height: 43px; width: 5px; margin-left: 10px; background-color: blue"></div>
</td></tr></table>

--
Y.D.

ASM

19/10/2005 à 22:49

On Tue, 18 Oct 2005 23:33:39 +0200, YD
wrote:

Par image, j'entends juste une barre de hauteur entre 1 et 46 pixels.
C'est pour inserer a l'interieur d'un <TD>

cf plus bas
qui ne fonctionne pas dans mon IE (tiens ? comme c'est curieux !)

C'est un peu pareil pour la
librairie graphique JS, surtout que je vois pas comment transferer
trouver les x et y.

je n'ai pas regardé comment c'était foutu
mais pour uniquement 2 bandes de couleurs
ce n'est peut-être pas la peine de charger toute une usine.

exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Untitled</title> <style type="text/css">
#test { width: 100%; border: 2px solid maroon; }
#test tr { height: 60px; }
#test td { width: 25%; text-align: center; border: 1px solid black;}
#test td.bi { background: yellow; vertical-align: bottom;}
#test td.bi div { height: 66%; background: gold; }
#test td.bu { background: skyblue; vertical-align: bottom;}
#test td.bu div { height: 30%; background: lime; }
</style>
</head>
<body>
<table id="test">
<tr>
<td class="bi">
petit essai
<div>
autre essai
</div>
</td>
<td>
cellule blanche
</td>
<td class="bu">
pour voir
<div>
un autre essai
</div>
</td>
<td>
</td>
</tr>
</table>
</body>
</html>

--
Stephane Moriaux et son [moins] vieux Mac

ASM

20/10/2005 à 00:09

Et ce genre de code ne te convient pas (à rationaliser avec une feuille
de style si c'est possible) ?

tu as essayé cette rustine ?
Les éléments suivants se foutent de
la hauteur précisée et chevauchent le table

--
Stephane Moriaux et son [moins] vieux Mac

20/10/2005 à 08:30

Et ce genre de code ne te convient pas (à rationaliser avec une feuille
de style si c'est possible) ?

tu as essayé cette rustine ?
Les éléments suivants se foutent de
la hauteur précisée et chevauchent le table

Oups !

C'était une piste, mais si on veut que les éléments restent dans la table,
mieux vaut oublier le positionnement absolu.

Alors, avec float, le code est plus simple et j'ai testé cette fois :

<table><tr><td>
<div style="float: left; height: 43px; width: 5px; background-color: red"></div>
<div style="float: left; height: 43px; width: 5px; background-color: yellow"></div>
<div style="float: left; height: 43px; width: 5px; background-color: blue"></div>
</td></tr></table>

--
Y.D.

1 2

Generation d'image en JS

4 réponses

Veuillez sélectionner un problème