The said:
That isn't really what I was after.
I would like to have a page, which I format, that would be a single
page with a placeholder for an image. When you click the thumnail
created by the AutoThumbnail function, I would like it to hyperlink
to the container page and pass the full-sized image (as a variable
value???) along to the container page so that it understands which
image to replace the original placeholder with. Perhaps I am
explaining this poorly.
Rikk.
Rikk,
I have done this on my site.
At least I think that what I have done is what you describe.
When you click on either of the two side pictures on my index page, it calls
the function newWindow() with the image name and a caption as parameters
<a href=''
onclick="newWindow('images/display/trevor.jpg','Trevor');return
false;">
newWindow() retrieves the dimensions of the image and calls
spawnJimcoPopop()
spawnJimcoPopop() loads picture.html to a new window with the dimensions as
extra parameters.
picture.html adds the image as a background to the table with rounded
corners. But it doesn't have to do this - it could just display the image
and the caption.
If this is of use to you, feel free to take the code and modify it to your
use. Other supporting code (e.g. CSS, or any JS I have forgotten tp post
here) is also on my site.
Code follows
/*=================================*/
function newWindow(img,caption)
{
var imageToLoad = new Image()
new function testit()
{
imageToLoad.src = img
// we need a little pause while the script gets the image
setTimeout(loadit,1000)
//--- Internal function ---
function loadit()
{
var h, windh
// check to see if we have the dimensions and if not, go back and wait
another 1 second
var w = imageToLoad.width
if (w == 0)
{
if (confirm('Image did not load.\nPress OK to try again\nPress
Cancel to exit')==true)
testit()
else
return
}
else
{
h = imageToLoad.height
windh = h + 50
spawnJimcoPopup
('picture.html?picture=' + img + '&caption=' + caption
+ '&height=' + h + '&width=' + w, '_blank'
,
'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no'
, windh,w,'center','0','pixel')
}
} //--- End loadit() ---
} //--- End testit() ---
}
/*=================================*/
function spawnJimcoPopup(url, name, options, h, w, x, y, scaleType)
{
if (scaleType == 'percent')
{ h = (h * screen.availHeight) / 100
w = (w * screen.availWidth) / 100 }
if (x == 'center')
x = (screen.availWidth - w) / 2
if (y == 'center')
y = (screen.availHeight - h) / 2
options += ',width=' + w + ',height=' + h
+ ',left=' + x + ',top=' + y
var newWindow = window.open(url, name, options)
newWindow.focus()
}
/*=================================*/
function qsobj(parm)
{
var qpairs = document.location.search.substring(1).split("&")
var qvbl = qpairs[parm].split("=")
return qvbl[1] ? unescape(qvbl[1].replace(/%20|\ +/g," ")) : null
}
/*=================================*/
function getPic(pic, cap, height, width)
{
var T = null
with (document)
{
title = cap
// set table styles
T = getElementById("picname").style
T.background = 'url(' + pic + ')'
T.height = height + "px"
T.width = width + "px"
// set width of table cell "tc" = Row1, Col2
getElementById("tc").style.width = (width - 40) + "px"
// set height of table cell "mc" = Row2, Col1/2/3
getElementById("mc").style.height = (height - 40) + "px"
}
}
/*=================================*/
This is picture.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<!-- picture.html -->
<head>
<title>Picture</title>
<meta name="Author" content="Trevor Lawrence"/>
<meta http-equiv="Content-Language" content="en-au"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!-- External CSS Files -->
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="stylesheet" type="text/css" href="style2.css"/>
<link rel="stylesheet" type="text/css" media="print" href="print.css"/>
<!-- External JS File -->
<script type="text/javascript" src="scripts/external.js"></script>
<!-- In-line JS -->
<script type="text/javascript">
pic_pic = qsobj(0)
pic_cap = qsobj(1)
pic_height = qsobj(2)
pic_width = qsobj(3)
</script>
</head>
<body id="pic" onload="getPic(pic_pic,pic_cap,pic_height,pic_width)">
<table align="center" id="picname" cellpadding="0" cellspacing="0">
<tr>
<td style="height:20px; width:20px">
<img id="tl" src="images/display/silver/tl.gif" alt="" width="20"
height="20"/></td>
<td id="tc"></td>
<td><img id="tr" src="images/display/silver/tr.gif" alt="" width="20"
height="20"/></td>
</tr>
<tr>
<td id="mc" colspan="3"></td>
</tr>
<tr>
<td style="height:20px; width:20px">
<img src="images/display/silver/bl.gif" alt="" width="20"
height="20"/></td>
<td class="red">Copyright © Trevor Lawrence</td>
<td><img src="images/display/silver/br.gif" alt="" width="20"
height="20"/></td>
</tr>
</table>
<input type="button" class="hidden"
value="Print" onclick="print_page()" /><br/>
<input type="button" class="hidden"
value="Close"
onclick="window.opener=self;window.close()" /><br />
<!-- Home link when called directly -->
<a href="index.html">Home</a>
</body>
<!-- -->
</html>
=================================
