add VML elements (images) with javascript
hi I've been trying to add VML image elements using javascript. now here is what I'm using to generate these 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";
}
usually when I generate vml image element the HTML code should look somthing like:
<rvml:image style="POSITION:absolute; WIDTH:55px; HEIGHT:55px; TOP:0px; LEFT:0px; rotation:0;" src="pic.png" id=gogo class=rvml>
now the above javascript function works with HTML elements. but when I use it to generate VML elements. the generated element doesn't show in the browser. but when I check document.body.innerHTML. I can see that the element has been actually created. but its not showing..
any ideas? is there any method I can use to refresh or redraw elements with javascript. or anything I can use to fix this.
thanks
I struggled endlessly with this, and in the end I used a fill instead:
<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>
It seems that position absolute is required, hence the need for a position relative containing div.
For more info check out the superpng plug-in for jQuery which uses this technique for png alpha replacement.
uh. fixed it myself as usual...
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;
}
it seems like the setAttribute function is not changing the status of the element. but still I'm having problem with events. now if I want to use:
elemm.onload = "alert('coco')";
this should be triggered when I run the javascript function which will draw the element. but I'm not getting that alert box to be workin. hmm its kindda weird. I checked the innerHTML i can see it right there.
精彩评论