DOM img node problem

[kaujot]

I'm building a website, and what I'm trying to do is when I click on an image, my script creates a div node, and then creates an img node, appends the img node to the div node, and then appends the div node to the document's body node. Then, when I click on the div again, the script removes the div entirely.

Right now, the div appears exactly as it should, but there's no sign of the image. Can anyone take a look at my code and see what's wrong with it? I really can't figure any of it out.


function showLarge()
{
// Get HTML document
var myDocument = document;
var htmlDoc = myDocument.documentElement;
var bodyDoc = myDocument.getElementsByTagName("body")[0];

// Create a new DIV that takes up the entire page, but is transparent
var newDiv = myDocument.createElement( "div" );
newDiv.setAttribute( "style", "position: fixed; top: 0px; left: 0px; width: 100%; min-height: 100%; opacity: .5; background-color: rgb(200, 8, 21); z-index: 1;" );
newDiv.setAttribute( "onclick", "remove();" );

var newImage = myDocument.createElement( "img" );
newImage.setAttribute( "src", "./IvansChildhoodSmall.png" );
newImage.setAttribute( "style", "position: fixed; top: 0px; left: 500px; text-align: center; margin-right: auto; margin-left: auto; z-index: 1;" );
newImage.setAttribute( "id", "top" );

// Attach the new IMG to the new DIV
newDiv.appendChild( newImage );

// Attach the new DIV to the BODY element
bodyDoc.appendChild( newDiv );
}

function remove()
{
// Get Document, HTML, BODY
var myDocument = document;
var htmlDocument = myDocument.documentElement;
var bodyDoc = myDocument.getElementsByTagName( "body" )[0];

// Remove newDiv
var divToRemove = myDocument.getElementById ( "top" );
bodyDoc.removeChild( bodyDoc.lastChild );

}



Here's the specific page in question: http://z.cs.utexas.edu/users/cs329e/kaujot/project/movies/ivans_childhood.html
Thank you so much!

[shyam]

function showLarge()
{
newImage.setAttribute( "src", "./IvansChildhoodSmall.png" );
}

looks like the actual image is located "./stills/IvansChildhoodSmall.png"

[Fang]

this does not work in IE newImage.setAttribute( "style", "position: fixed; top: 0px; left: 500px; text-align: center; margin-right: auto; margin-left: auto; z-index: 1;" );
Use newImage.cssText= "position: fixed; top: 0px; left: 500px; text-align: center; margin-right: auto; margin-left: auto; z-index: 1;";
In fact the css is better placed in the css file not the JavaScript.

[kaujot]

looks like the actual image is located "./stills/IvansChildhoodSmall.png"

Here's the point where I slink off, tail between my legs for completely forgetting my directory layout. :P

Thanks for, uh, pointing that out. :)