On Jul 16, 2014, at 1:33 AM, JDW wrote:
Walter, thank you.
I followed your previous post precisely. And here is what I have now in TextWrangler (linked to ‘svg-shim.js’ which resides in the same directory that is home to my HTML, CSS and graphics files):
[code]
document.observe(‘dom:loaded’, function(evt){
if(! navigator.userAgent.toLowerCase().match(‘msie’)){
$$(‘img[data-svg]’).each(function(elm){
var svg = new Element(‘object’, {
type:‘image/svg+xml’,
data: elm.readAttribute(‘data-svg’),
width: elm.readAttribute(‘width’),
height: elm.readAttribute(‘height’)
});
elm.insert({after: svg});
svg.insert(elm.remove());
// new code here, use ‘svg’ as the handle to the object
At this point in the code, you do not need to re-acquire a reference to the svg. You already have it, because the script just made it. So the next line is irrelevant and should be removed. Also, getElementById requires that you pass it an actual ID, you have passed the filename, and the function will not work in this case.
The SVG element is being dynamically created inside the code block we are currently within, and the “handle” to that SVG is the local variable svg. This generated SVG element does not have an ID at all.
Critically important thing to understand: that variable is not available in the global context (that’s what a local variable is – i.e.: not global). Outside of the loop that begins on this line: $$('img[data-svg]').each(function(elm){, that variable does not exist, so you have to do all of the following while your variable is available.
var s = document.getElementById("DigiLink_Icon.svg");
Change s in the next line to svg (see the variable we created two lines above?) and you should get a red background. But critically, this item will always have a read background if you do this.
s.style.fill = "FF0000";
If you want the item to respond to a mouseover with a red background, then you will need to attach a handler function to the SVG to respond to that event. Actually, you’ll need to attach two – one to handle the mouseover and one to handle the mouseout (to restore the color).
svg.observe('mouseover', function(evt){
this.style.fill = 'f00';
});
svg.observe('mouseout', function(evt){
this.style.fill = 'fff';
});
You would insert these functions directly in place of the line svg.style.fill = "#ff0000".
});
}
});
[/code]
But Console (in CHROME) coughs up the following error:
Uncaught TypeError: Cannot read property ‘style’ of null
Yup, this is entirely expected, because you don’t actually have a reference to the item at this point.
With regard to getElementById, I’ve tried changing double quotes to single, eliminating quotes, as well as using other references like ‘svg’ and ‘svg_img’ and ‘data-svg’. But I still get the same error.
See above. You are trying to get a reference to an item that is being dynamically created, and does not exist outside of the tight loop where that creation is occurring.
Within the HTML, within the tag, we have the following DIV reference to the SVG:
<div id="DLicon"><img src="dlicon.png" border=0 width=57 height=62 alt="" style="float:left" data-svg="DigiLink_Icon.svg">
> </div>
However, when I used the DIV’s ID, the error vanishes, but there is no Red HOVER color on mouseover:
var s = document.getElementById(“DLicon”);
Here’s my test page:
SVG Test
You are very close here, push forward just a little further, and I will be mailing you a propeller-beanie very soon!
Walter
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options