Importing Macromedia Fireworks HTML into WordPress 2.0
March 21, 2006
8:06 am
Vasken
Web Programming
Tags: blog, editor, Fireworks HTML, HTML, JavaScript, rollover behavior, rollover image, WordPress 2.0, WYSIWYG
To create the previous post, I obviously needed to incorporate some Fireworks HTML into WordPress 2.0’s post editor in order to show the example. Having long since given up on the WYSIWYG editor that shipped with this new release, I started by trying various methods to get the image into the post by cutting and pasting various bits of HTML and JavaScript from the fireworks .html source file. The most important thing to remember is that you need to include Macromedia’s JS functions in the header of your theme, as high up in the code as possible, but at least before the CSS. What you’ll need looks like this:
<script language="JavaScript">
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i
for(i=0;!x&&d.layers&&i
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_goToURL() { //v3.0
var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
So, with functions firmly in place, I began cutting and pasting some more. The main issues with this approach which quickly made themselves apparent were:
- By default, the ‘post’ lives on the blog’s root level directory, but the billions and billions of tiny .jpgs which make up the actual Fireworks-produced rollover image live in whatever directory you put them. Updating the links does nothing, since the rollover behavior is governed by JavaScript, and a simple find/replace can’t help you there.
- Even when you decide you’re willing to dump billions and billions of tiny images into your root blog directory, the image shows up waaaaay down the post, for no apparent reason.
In light of these problems, I finally threw up my hands and decided I’d insert the image into a simple Dreamweaver html page, put it to the server, load the page in a browser, select all, and paste the whole mess into the WordPress editor, only this time with the WYSIWYG turned on. Lo and behold, it works perfectly, rollovers and all (assuming the page with the image you create is in the same directory as the Fireworks HTML and images, and that you’ve added Macromedia’s JavaScript to your header). The fact that the html looks exactly the same as it does when you painstakingly insert it into the html post editor by cut and paste notwithstanding, none of the spacing issues remain. Simple and easy, and finally, a justification (at least for me) for the WYSIWYG (which is back off for this post).
