Code for importing a swf

[holson]

I have a portfolio website with thumbnails that bring the larger jpg into a container. The URL is www.hansericolson.com

I am wanting to make a Flash page on this on-line portfolio and I need some code that will allow me to click on a thumbnail and import a swf into the container instead of a jpg. Anyone out there know how to do this?

Much appreciatated....HO

[Jesdisciple]

How do you determine the filename of the SWF? A third function (or a modification of the second) needs to implement that.

function makeSwf(url, name, width, height){
    var object = document.createElement('object');
    var embed = document.createElement('embed');
    var param = document.createElement('param');
    object.width = embed.width = width;
    object.height = embed.height = height;
    param.value = embed.src = url;
    param.name = name;
    object.appendChild(embed);
    object.appendChild(param);
    return object;
}
function showSwf(swf){
    var container = document.getElementById('imagecontainer');
    container.appendChild(swf);
}

[holson]

Thanks Chris for taking the time to reply.

Does this code go into my external javascript page? Where would I put it? Also, do I put the name of the SWF where you have:

function showSwf(swf){
var container = document.getElementById('imagecontainer');
container.appendChild(swf);

Thanks

[Jesdisciple]

Does this code go into my external javascript page?

Yes, but it also needs to be "hooked" to the thumbnails somehow, like your current changeimage function.

Also, do I put the name of the SWF where you have:

function showSwf(swf){
var container = document.getElementById('imagecontainer');
container.appendChild(swf);

No, that wouldn't work for more than one movie. Although inline event-handlers are messy, just put the SWF filename into the HTML like you were doing with the image filename.

<td class="thumbnail" onclick="showSwf('images/XX_movie.swf');">
<img src="images/XX_pic_sml.jpg"/>
</td>

Replace the above showSwf function with this:

function showSwf(url){
    var container = document.getElementById('imagecontainer');
    var swf = makeSwf(url, 'movie', 559, 697);
    if(container.hasChildNodes()){
        container.replaceChild(swf, container.firstChild);
    }else{
        container.appendChild(swf);
    }
}

[holson]

Thanks again Chris!

This is the code I have placed into my html doc....

<!-- THUMNAIL 01 -->

<td class="thumbnail" onclick="showSwf('images/fish_and_cat.swf');">
<img src="images/36_pic_sml.jpg"/>
</td
<!-- END THUMNAIL 01 -->


and this is the code I put into my external javascript page:


// MENU LINK FUNCTIONS
function mouseovercolor(thisspan){
thisspan.style.color = '#f00';
}
function mouseoutcolor(thisspan){
thisspan.style.color = '#fff';
}
function pagejump(pageurl){
window.location.href = pageurl;
}
// END MENU LINK FUNCTIONS



// THUMBNAIL CHANGER
function changeimage(imagestring){
var imagecontainer = document.getElementById('imagecontainer');
var newbe ="url('" +imagestring +"')";
imagecontainer.style.background =newbe ;
}

function makeSwf(url, name, width, height){
var object = document.createElement('object');
var embed = document.createElement('embed');
var param = document.createElement('param');
object.width = embed.width = width;
object.height = embed.height = height;
param.value = embed.src = url;
param.name = name;
object.appendChild(embed);
object.appendChild(param);
return object;
}
function showSwf(url){
var container = document.getElementById('imagecontainer');
var swf = makeSwf(url, 'movie', 559, 697);
if(container.hasChildNodes()){
container.replaceChild(swf, container.firstChild);
}else{
container.appendChild(swf);
}
}
// END THUMBNAIL CHANGER

I haven't got it to work....when I refresh, all of the content seems to jump slightly and there is an attempt for the image to change....any more thoughts?

Thanks again for the help
HO

[Jesdisciple]

Can I test this on your site, please? I'd like to look at exactly what the DOM functions are doing, complete with the deployment context.

[holson]

The only problem is that this portfolio site is not on-line yet. You can look at the pages that are on www.hansericolson.com, but this site is the template for my visual design site and it doesn't have a Flash page and there are no SWFs in the folders. Is there any way I can send you files? Let me know what I can do for you to test this for importing the SWF.
Thanks,
HO

[Jesdisciple]

To attach files to your post, zip them up with an archive manager (7-Zip is fantastic) and click "Post Reply" to the left just below my post. Go down and click the button that says "Manage Attachments", "Browse..." to the zip, and "Upload" it.

[holson]

Here are the zipped files you requested.
Thanks,
HO

[Jesdisciple]

Umm... What did you use to zip that up? I get an error when unzipping it; when I peak inside it, I only see a bunch of empty folders. If you used 7-zip, what compression algorithm was/is selected?