Dreamweaver 8: Java script in Design Mode

Question

Mac OS 10.4.11 Dreamweaver 8
I have a web page with a java script that displays a random picture from a list of images each time you reload the page.
http://www.irises.org
It renders fine when viewed in a browser, but the image does not display when viewed in Dreamweaver Design mode. The random image does not display and lacking the image other things are out of place.
The script that sets up the image array:
<!-- Begin
// Set up the image files to be used.
var theImages = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array.
theImages[0] = 'images/home-rotate-1.jpg'
theImages[1] = 'images/home-rotate-2.jpg'
theImages[2] = 'images/home-rotate-3.jpg'
theImages[3] = 'images/home-rotate-4.jpg'
theImages[4] = 'images/home-rotate-5.jpg'
theImages[5] = 'images/home-rotate-6.jpg'
theImages[6] = 'images/home-rotate-7.jpg'
theImages[7] = 'images/home-rotate-8.jpg'
theImages[8] = 'images/home-rotate-9.jpg'
theImages[9] = 'images/home-rotate-10.jpg'
theImages[10] = 'images/home-rotate-11.jpg'
theImages[11] = 'images/home-rotate-12.jpg'
theImages[12] = 'images/home-rotate-13.jpg'
theImages[13] = 'images/home-rotate-14.jpg'
theImages[14] = 'images/home-rotate-15.jpg'
theImages[15] = 'images/home-rotate-16.jpg'
theImages[16] = 'images/home-rotate-17.jpg'
// do not edit anything below this line
var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
   preBuffer[i] = new Image()
   preBuffer[i].src = theImages[i]
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img src="'+theImages[whichImage]+'">');
//  End -->
The code (further down the page after the all the list elements) that generates the image:
           <SCRIPT LANGUAGE="JavaScript">
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
showImage();
//  End -->
</script>
Is there a way to get it to display correctly in the Design mode?
Thanks
<br />
</script>

Answer 1

Is there a way to get it to display correctly in the Design mode?
I don't think so, at least not with this script.  What you need is for an image to be displayed on the page by default, and for the javascript to only change the src attribute's value.  Something like this -
At the point where you want the image have -
<img src="the_path_to_some_default_image.jpg" id="rotation" />
and in the javascript, change this -
document.write('<img src="'+theImages[whichImage]+'">');
to this -
document.getElementById('rotation').src='theImages[whichImage]';
See if that works....