inline g:text and addGlow method
Hi everyone,
The addGlow method works perfectly when using it as in :
var mytext = bgid.addTextObject('TEXT',fontfamily,textsize,fontcolor,posx,posy);
mytext.addGlow('white',3,100);
However, I can't seem to have it work when the gText element is "hardcoded" in the document, as in :
<g:text id="mytext" class="..." style="..." onmouseover="handleglow(this)" />
With the function
function handleGlow(obj) {
obj.addGlow('white',3,100);
}
Am i doing something wrong ? Should I prefer the addTextObject method and then attach an event to the object thus created? If so, how?
Thanks for your answers :)
The only way to get a gText object is via addTextObject - I'd be very suprised if you actually got a hard-coded <g:text> element to do anything.
The design target of <g:background> (and any embedded gText objects) is to multiple semi-transparent background layers without that annoying purple haze. Its intended to be static background, not dynamic, and as such, doesn't support much of the DHTML event model - for example, onmouseover.
Could you just use regular DHTML elements and text for this application? That would give you the full power of DHTML to create the dynamic content you want.
I'll add better event support in the gXXX elements to my wishlist for future versions.
What you're doing is correct - although g: elements do not fire events. So the onmouseover will never fire.
If you're not layering on top of a transparent background, use a normal HTML element instead of g:text and apply a glow filter to it.
EDIT: I take it back, <g:image> seems to now fire events on RTM, so I presume <g:text> does as well. So I'm not sure why it doesn't work.
A little update. :)
G:IMAGE
As Jonathan mentioned in his update, this works :
The markup:
<g:image src="path/to/img" onmouseover="applyGlow(this);" onmouseout="removeGlow(this);" />
The JS functions:
function applyGlow(obj) {
obj.addGlow('white',2,30);
}
function removeGlow(obj) {
// 0,0 used to 'cancel' glow radius and transparency
obj.addGlow('white',0,0);
//obj.removeObjects();
}From http://msdn2.microsoft.com/en-us/library/aa359320.aspx, it seems removeObjects could be used in this example ... but exactly how is beyonf me right now. :-p
I guess scripting the same thing does work too. I haven't tried, though.
G:TEXT
<g:text class="myclass" onmouseover="applyGlow(this);" onmouseout="removeGlow(this);">text text text</g:text>
Now here, events do not seem to fire. Does thid confirm your saying, Johnathan?
