Hi all,

I have found some code that uses javascript to change the image in a div without reloading the page

I have made a quick test page here http://www.mikecotton.com/test/

HTML Code
Code:
<div id="previewPane">
	<img src="sub1_large.jpg"/>
</div>
<div id="theImages">
	<a href="" onclick="showPreview('sub1_large.jpg');return false"><img src="sub1_thumbnail.jpg"/></a>	
	<a href="" onclick="showPreview('sub2_large.jpg');return false"><img src="sub2_thumbnail.jpg"/></a>			
	<a href="" onclick="showPreview('sub3_large.jpg');return false"><img src="sub3_thumbnail.jpg"/></a>	
</div>
Javascript code
Code:
function showPreview(imagePath)
{
	var subImages = document.getElementById('previewPane').getElementsByTagName('IMG');
	if(subImages.length==0){
		document.getElementById('previewPane').appendChild(img);
	}
	else img = subImages[0];
	img.src = imagePath;
}
My question is how would I do the same thing if I wanted it to work with videos instead of images.
For example the user clicks a thumbnail image and a video would be displayed in the preview pane instead of another image?