Adding a fallback image for a swf in IE8 and lower using createElement?

Question

I'm creating a script that's supposed to create an embedded SWF and also use a image as fallback if the user doesn't have Flash available. Since I'm not allowed to use any other libraries like SWFobject I'm stuck using DOM-techniques like createElement/appendChild/setAttribute.

I've been using this great blog post: http://pipwerks.com/2011/05/30/using-the-object-element-to-dynamically-embed-flash-swfs-in-internet-explorer/ as a guideline, and I have Flash up and running in all the browsers I've tested, but it does not include any solution to how I can inject an link/image-combo into the object in Internet Explorer 8.

Using createElement("a") and likewise for an image and adding that to any other Div-element works fine, but if I try to inject that into the object MSIE8 throws "Invalid Argument".

I also tried creating a bogus param with an id and tried to replace that with my link/image combo and that works in the other browsers I've tested but not in IE8. Any thoughts on this would be much appreciated.

This is my code (I'm using a combo of js and PHP to create the script):

var alink = document.createElement("a");
alink.setAttribute("href", "URL_TO_TARGET_SITE_OR_CLICK_COUNTER");

var alinkImage = document.createElement("img");
alinkImage.setAttribute("src", "URL_TO_IMAGE");
alinkImage.setAttribute("alt", "");
alinkImage.setAttribute("width", "IMAGE_WIDTH");
alinkImage.setAttribute("height", "IMAGE_HEIGHT");

alink.appendChild(alinkImage);

if(!IE8) {
    flashObject.appendChild(alink);
    document.getElementById('ad_filler_placeholder').appendChild(flashObject);
} else {
    /* this code will be executed if IE8 or lower, sadly appending alink into flashobject fails */
    flashObject.appendChild(alink);
    document.getElementById('ad_filler_placeholder').appendChild(flashObject);
}

Answer 1

Ok, so i had to tweak my script abit to match the end result as stated in pipwerks' blogg post. While checking for IE i declared the flashObject with innerHTML like this:

var fallback=false;

flashObject = (isIE) ? createIeObject() : document.createElement("object");

if(!isIE) {
   flashObject.setAttribute("type", "application/x-shockwave-flash");
   flashObject.setAttribute("data", "URL_TO_SWF");
   fallback = true;
}

the createIeObject-function does this:

function createIeObject(){
   var div = document.createElement("div");
   div.innerHTML = "<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'><param name='movie' value='URL_TO_SWF'><a href='URL_FOR_CLICK'><img src='URL_TO_FALLBACK_IMAGE' alt='' width='WIDTH' height='HEIGHT' border='0' /></a></object>";
   return div.firstChild;
}

Note that I added the fallback within this segment. And I also had to use width, height and border on the image, or else IE will add an annoying blue border around everything. OK, will everything work as I planned..? Of course not =) IE8 (maybe also other versions) cannot append any child to the div I initially created using document.write, since the DOM is not fully loaded at that state. This could be solved wrapping the whole (almost) thing in this:

onload = function(){}

I did try it through DFP and it works from at least IE7 and above. The other good guy-browsers gets their fallbakc added through regular appendChild as stated in the original question, I just moved it within the if-statement since it'll be obsolete if IE.