Tirer des traits en XHTML

Programmation
#1

Bonjour à tous

Je cherche un moyen de tirer des traits sur une page web en XHTML. J’utilise du CSS pour la mise en forme.

J’ai bien trouvé ceci qui correspond exactement à ce que je recherche : codessources.votre-web.com/js/drawLine/demo.html

mais :

  1. le code est très lourd lors de l’exécution ;
  2. c’est du JavaScript et je n’aime pas ça.

J’aimerais également pouvoir faire bouger mes traits, les animer.

A vrai dire je ne vois pas vraiment comment faire mieux, mais peut être avez-vous d’autres solutions à me proposer ? Le vrai problème vient surtout de la lourdeur du code, ça pourri totalement les performances de ma page si je le mets en place (quand il y a un trait ça va, c’est quand il y en a beaucoup que ça pose des problèmes [patapé]).

A noter qu’il est hors de question que j’utilise une technologie moisie comme Flash par exemple.

Si j’arrivais au moins à alléger le code ça pourrait le faire. Il n’existe rien qui permette de faire ça autrement ? J’ai cherché et pour l’instant je n’ai rien trouvé de mieux.

Merci à vous !

#2

Bon j’ai trouvé une amélioration ici :

p01.org/releases/Drawing_lin … avaScript/

L’idée consiste à utiliser une image de 1 pixel qui sera utilisée pour dessiner les points des lignes. Astucieux.

Sinon il y a ceci, qui me plaît beaucoup plus (puisque sans JavaScript) : erezsh.wordpress.com/2008/07/31/ … -with-css/

mais il y a des limites qui ne sont pas forcément sympas (pas possible de mettre une image de fond par exemple, les lignes ne peuvent pas se croiser,…).

#3

[quote=“Cluxter”]Bonjour à tous

Je cherche un moyen de tirer des traits sur une page web en XHTML. J’utilise du CSS pour la mise en forme.
Merci à vous ![/quote]

Bonjour

<hr />

???

–> [] :mrgreen:

#4

[quote=“eol”][quote=“Cluxter”]Bonjour à tous

Je cherche un moyen de tirer des traits sur une page web en XHTML. J’utilise du CSS pour la mise en forme.
Merci à vous ![/quote]

Bonjour

<hr />

???

–> [] :mrgreen:[/quote]

+1 :smiley:

C’est le seul moyen de le faire en HTML .

#5

J’ai trouvé mieux :stuck_out_tongue:

Mon idée consiste à créer un fichier PNG avec un trait oblique de la couleur souhaitée et d’un fond transparent. Ainsi, on est sûr que la transparence est gérée sur tous les navigateurs dignes de ce nom et pas trop anciens (même Internet Explorer 7 le gère, alors qu’il ne gère pas la transparence des blocks HTML), et on peut très facilement redimensionner l’image selon l’inclinaison de la ligne que l’on souhaite. De plus on a automatiquement un lissage de la ligne.

Les problèmes sont les suivants :

  • il faut gérer les lignes verticales et horizontales séparément ;
  • les lignes obliques nord-est/sud-ouest doivent être gérées séparément des lignes nord-ouest/sud-est ;
  • si l’image PNG est petite, on a un truc dégueulasse lorsqu’on dessine une ligne un peu grande ; si l’image PNG est grande, la ligne n’est plus visible lorsqu’on dessine une petite ligne… Il faut donc trouver le juste milieu selon les besoins du site.

Après pour animer les lignes je pense que je vais bien être obligé de passer par un petit script en JavaScript. Mais si c’est pour faire des lignes fixes, on peut très bien n’utiliser que le XHTML/CSS !

Si vous ne voyez pas très bien ce que je veux dire, dites-le moi, je vous détaillerai ça.

#6

En fait j’ai trouvé encore beaaaaucoup mieux : utiliser le format de dessin SVG !! Ca lève toutes les contraintes que j’ai donné précédemment et le résultat est juste magnifique. Apparemment il est même possible de faire des animations, je ne sais pas comment, mais si c’est faisable nativement (= sans script) alors c’est juste terrible !! :stuck_out_tongue:

Si vous avez des liens utiles là dessus n’hésitez pas.

EDIT : bon et bien une fois de plus je me réfère à ce site qui explique tout ce qu’il faut sur le SVG, y compris les animations : siteduzero.com/tutoriel-3-14 … u-svg.html
Parfait !!! :041 :happy-bouncymagenta: :romance-heartbeating: