Image Size 2

Creating a new image object allows you to get the height and width of an image without actually loading it into your page.

myImage = new Image()
myImage.src = "image.jpg"
myImageWidth=myImage.width
myImageHeight=myImage.height

Mousing over a thumbnail below displays the size of the larger image even though it has not been loaded into the page.

myImageWidth =  
myImageHeight =  

A typical example of this would be to have a window open and resized to the dimensions of the image being shown.
Click an example thumbnail.

Size of image in the popup
Width =
Height = 

<script type="text/javascript">

<!--
function init(){

myimg=new Array("bigpic01.jpg","bigpic02.jpg","bigpic03.jpg","bigpic03.jpg","bigpic05.jpg","bigpic04.jpg")

newImg=new Array() // create a new array

for(i=0;i<myimg.length;i++){
newImg[i] = new Image() // create a new image object for each image
newImg[i].src =myimg[i] // assign src to new image object
}

Width=screen.availWidth  // for centering window
Height=screen.availHeight // for centering window
}

picWin=null
close_win=""
function showme(n){
if(picWin){picWin.close()} // if window exists close it
clearTimeout(close_win)

posx= (Width-newImg[n].width)/2 // for centering window
posy= (Height-newImg[n].height)/2 // for centering window

var winProps = "left= "+posx+", top = "+posy+", width="+(newImg[n].width)+", height="+(newImg[n].height)
+", scrollbars=no, toolbar=no, directories=no, menu bar=no, resizable=yes, status=no"
picWin=window.open("","picWin",winProps)
picWin.document.write("<HTML><HEAD><TITLE></TITLE></HEAD>")
picWin.document.write("<BODY bgcolor='black' topmargin=0 leftmargin=0>")
picWin.document.write("<center><img src='"+newImg[n].src+"'></center>")
picWin.document.write("</BODY></HTML>")
close_win=setTimeout("picWin.close()",3000) // close window in 3 seconds

}

// add onload="init()" to the opening BODY tag

// -->
</script>

<img src="smallpic01.jpg" alt="" style="width:50px;height:50px" onclick="showme(0)">
<img src="smallpic02.jpg" alt="" style="width:50px;height:50px" onclick="showme(1)">
<img src="smallpic03.jpg" alt="" style="width:50px;height:50px" onclick="showme(2)">
<img src="smallpic04.jpg" alt="" style="width:50px;height:50px" onclick="showme(3)">
<img src="smallpic05.jpg" alt="" style="width:50px;height:50px" onclick="showme(4)">
<img src="smallpic06.jpg" alt="" style="width:50px;height:50px" onclick="showme(5)">