[VML] créer un element v:textbox par JavaScript

**loacast** · 20/11/2010, 17h44

Salut,

J'essaye en vain de créer dynamiquement par JavaScript un texte dans une page VML.
La communauté VML étant pauvre, les ressources sur Internet le sont aussi, donc me voilà ^^

J'ai réaliser un exemple tout spécialement pour cette question, vous pourrez éventuellement tester sur votre ordi si le coeur vous en dit

.

textbox.html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<script src="textbox.js" type="text/javascript"></script>
 
	<link rel="stylesheet" href="css/style.css" type="text/css" />  
	<title>Test ajout element textbox pour VML</title>
 
</head>
 
<body onload="loadVML();">
 
	<div id="ma_div" style="max-width: 400px; width: 400px; max-height: 300px; height: 300px; background-color: #000; overflow: hidden;" ></div>
 
</body>
</html>

textbox.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
function loadVML() {
 
		// Init VML
	document.namespaces.add( "v" , "urn:schemas-microsoft-com:vml" );
	vmlStyleSheet = document.createStyleSheet();
	vmlStyleSheet.cssText = "v\\:* {behavior:url(#default#VML);display:inline-block;}";
 
		// Insertion d'un élément VML dans une div HTML
	viewVML = document.createElement( 'v:group' );
	elementDiv = document.getElementById( 'ma_div' );
 
	viewVML.style.width = 400;
	viewVML.style.height = 300;
	viewVML.coordorigin = '0,0';
	viewVML.coordsize = '400,300';
	elementDiv.appendChild( viewVML );
 
		// Insertion d'un rectangle dans l'élément VML
	elementRect = document.createElement( 'v:rect' );
 
	elementRect.style.position = 'relative';
	elementRect.style.left = 100;
	elementRect.style.top = 200;
	elementRect.style.width = 150;
	elementRect.style.height = 50;
 
	elementRect.fillcolor = 'rgb(255,165,0)';
	viewVML.appendChild( elementRect );
 
		// Insertion d'un texte dans l'élément VML
		// C'est ce code qui ne fonctionne pas
	elementText = document.createElement( "v:textbox" );
 
	elementText.style.left = 100;
	elementText.style.top = 100;
	elementText.appendChild( document.createTextNode( "test" ) );
 
	viewVML.appendChild( elementText );
}

Problématique, le rectangle s'affiche, mais pas le texte.

Vous remerciant à l'avance de l'aide que vous pourrez m'apporter.

Note : Le VML ne fonctionne que sous Internet Explorer alors ne testez pas sous firefox.

EDIT : résolu ^^

Il fallait contenir le v:textbox dans un v:shape.

**sekaijin** · 20/11/2010, 21h52

VML est un format propre à Microsoft qui n'est implémenté que par IE donc pas portable
la doc est très complète sur MSDN comme pour tout les produits Microsoft.

par contre pour faire la même chose de façon plus large il y a SVG qui reprend du poil de la bête.

mais lui n'est pas supporté par IE (enfin dans la dernière version il arrive)

mais il y a un petit nouveau qui peut intéresser tout le monde
http://raphaeljs.com/
ce jeune projet déjà inclus dans diverses lib comme jQuery et Extjs offre une API simplifié pour créer en javascript des dessins et animations

ce qui est intéressant c'est que raphaël utilise SVG ou VML suivant la plate-forme

A+JYT

**loacast** · 22/12/2010, 10h14

VML est un format propre à Microsoft qui n'est implémenté que par IE donc pas portable
la doc est très complète sur MSDN comme pour tout les produits Microsoft.

Merci pour ta réponse !

Je l'ai parcouru et le moins qu'on puisse dire c'est qu'il y a beaucoup d'articles pour ne rien dire ... même si msdn m'a tout de même aidé sur de nombreux points.

par contre pour faire la même chose de façon plus large il y a SVG qui reprend du poil de la bête.

Je sais bien

ce jeune projet déjà inclus dans diverses lib comme jQuery et Extjs offre une API simplifié pour créer en javascript des dessins et animations

ce qui est intéressant c'est que raphaël utilise SVG ou VML suivant la plate-forme

C'est loin d'être le seul ! Les projets équivalents sont nombreux. D'ailleurs j'en fais actuellement un avec le framework javascript prototype.js, cf ma signature.

[VML] créer un element v:textbox par JavaScript

JavaScript

Discussions similaires

Partager

Partager