ajouter des éléments VML (images) avec javascript

Question

hi J'ai essayé d'ajouter des éléments d'image VML en utilisant javascript. maintenant voici ce que je utilise pour générer ces images:

function add_tools() 
{  
var elemm = document.createElement('rvml:image'); 
elemm.setAttribute('src', 'pic.png'); 
elemm.setAttribute('id', 'gogo'); 
elemm.setAttribute('class', 'rvml'); 
document.body.appendChild(elemm); 

document.getElementById('gogo').style.position='absolute'; 
document.getElementById('gogo').style.width=55; 
document.getElementById('gogo').style.height=55; 
document.getElementById('gogo').style.top=200; 
document.getElementById('gogo').style.left=300; 
document.getElementById('gogo').style.rotation=200; 
document.getElementById('gogo').style.display = "block"; 
} 

habituellement lorsque je produis élément d'image VML le code HTML devrait ressembler somthing comme:

<rvml:image style="POSITION:absolute; WIDTH:55px; HEIGHT:55px; TOP:0px; LEFT:0px; rotation:0;" src="pic.png" id=gogo class=rvml> 

maintenant au-dessus de la fonction javascript fonctionne avec Éléments HTML. mais quand je l'utilise pour générer des éléments VML. l'élément généré n'apparaît pas dans le navigateur. mais quand je vérifie document.body.innerHTML. Je peux voir que l'élément a été créé. mais il ne montre pas ..

des idées? existe-t-il une méthode que je peux utiliser pour actualiser ou redessiner des éléments avec javascript. ou tout ce que je peux utiliser pour résoudre ce problème.

merci

Answer 1

uh. fixe moi-même comme d'habitude ...

function add_tools() 
{ 
var elemm = document.createElement('rvml:image'); 
elemm.src = 'pic.png'; 
elemm.className = 'rvml'; 
document.body.appendChild(elemm); 
elemm.id = "gogo"; 
elemm.style.position='absolute'; 
elemm.style.width=55; 
elemm.style.height=55; 
elemm.style.top=200; 
elemm.style.left=300; 
elemm.style.rotation=200; 
} 

il semble que la fonction setAttribute ne change pas l'état de l'élément. mais j'ai toujours des problèmes avec les événements. maintenant, si je veux utiliser:

elemm.onload = "alert('coco')"; 

cela devrait être déclenché quand je lance la fonction javascript qui puisera l'élément. mais je ne reçois pas cette boîte d'alerte à travailler. hmm c'est un peu bizarre. J'ai vérifié l'innerHTML je peux le voir juste là.

Answer 2

Je me suis battu sans cesse avec cela, et à la fin j'ai utilisé un remplissage à la place:

<div style="position:relative"> 
    <vml:rect stroked="f" style="position:absolute"> 
    <vml:fill type="tile" aspect="ignore" src="pathto.png" style="position:absolute"> 
    </vml:fill> 
    <vml:rect> 
</div> 

Il semble que la position est nécessaire absolue, d'où la nécessité d'une position relative contenant div.

Pour plus d'informations, consultez le plug-in superpng pour jQuery qui utilise cette technique pour le remplacement alpha png.