bvoegele
01-21-2005, 05:45 PM
I'm new to HTML, so someone can probably answer this quite easily, but here goes...
I have a page which will have 24 thumbnails. In my browser, I get approximately 12/page, which means I have to scroll down one page to get to the second 12. I have two scripts in the <head> of my code - the first deals with displaying the thumbnail as an enlarged picture on mouseover, and the second figures out position on my screen, as the enlarged picture goes to a 'static' location in the upper right corner.
I want to make it easier on users, and so want them to be able to see enlarged pictures before all thumbnails have loaded. It seems that the second script, which determines the location of my 'static' window (div id=dynloadarea), doesn't know the position until after the page loads. I've been able to get around this by putting some absolute position for the div tag (<div id="dynloadarea" style="position: absolute; left: 57%; top: 10 px;"> </div>
). This allows me to check out the first page of thumbnails in the upper right corner, even while other thumbnails are loading. However, it obviously doesn't work when I scroll down to the next screen. Everything works as I want after the page loads completely and the second script can determine the coordinates of the upper right corner of the screen.
I've included the code, though it only has 2 photos rather than the 24 which I'll eventually use.
Thanks in advance for any help you can give this newbie - all suggestions are appreciated.
Brett
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<!-- ********** Insert below <title>Photos - Cambodia Page 1</title>-->
<title>Test Photos - Cambodia Page 1</title>
<meta content="Me" name="author">
<script type="text/javascript">
/***********************************************
* Image Thumbnail Viewer II script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
* Add this to <head> section
* Address of script is: http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm
***********************************************/
//Specify image paths, optional link (set link to "" for no link), and image description:
var dynimages=new Array()
//********** Insert below dynimages[0]=["path to pic","link","description of pic"]
dynimages[0]=["Pictures/Cambodia/Angkor, Cambodia - Angkor Thom 08.jpg","","Angkor, Cambodia - Angkor Thom"]
dynimages[1]=["Pictures/Cambodia/Angkor, Cambodia - Angkor Thom 09.jpg","","Angkor, Cambodia - Angkor Thom"]
//Preload images ("yes" or "no"):
var preloadimg="no"
//Set optional link target to be added to all images with a link:
var optlinktarget=""
//Set image border width
var imgborderwidth=10
//Optionally, change 1.0 and 0.7 below to affect Wipe gradient size and duration in seconds in IE5.5+:
var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"
///////No need to edit beyond here/////
if (preloadimg=="yes"){
for (x=0; x<dynimages.length; x++){
var myimage=new Image()
myimage.src=dynimages[x][0]
}
}
function returnimgcode(theimg){
var imghtml=""
if (theimg[1]!="")
imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
imghtml+='<center><font size="-1"><span style="font-family: Comic Sans MS;">'+theimg[2]+'</span></font></center>'
imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'">'
if (theimg[1]!="")
imghtml+='</a>'
return imghtml
}
function modifyimage(loadarea, imgindex){
if (document.getElementById){
var imgobj=document.getElementById(loadarea)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()
}
imgobj.innerHTML=returnimgcode(dynimages[imgindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false
}
}
</script>
<script language="JavaScript">
/***********************************************
* Original: Randy Bennett (rbennett@thezone.net)
* Web Site: http//home.thezone.net/~rbennett/utility/javahead.htm
*
* This script and many more are available free online at
* The JavaScript Source!! http://javascript.internet.com
* Script to 'float' image in upper right corner of page
* Need to add script to <head>, do <body> onload, and have <div>
************************************************/
function setVariables() {
imgwidth=300; // logo width, in pixels
imgheight=400; // logo height, in pixels
if (navigator.appName == "Netscape") {
horz=".left";
vert=".top";
docStyle="document.";
styleDoc="";
innerW="window.innerWidth";
innerH="window.innerHeight";
offsetX="window.pageXOffset";
offsetY="window.pageYOffset";
}
else {
horz=".pixelLeft";
vert=".pixelTop";
docStyle="";
styleDoc=".style";
innerW="document.body.clientWidth";
innerH="document.body.clientHeight";
offsetX="document.body.scrollLeft";
offsetY="document.body.scrollTop";
}
}
function checkLocation() {
objectXY="dynloadarea";
var availableX=eval(innerW);
var availableY=eval(innerH);
var currentX=eval(offsetX);
var currentY=eval(offsetY);
/*************************************
* For static image in upper left:
* x=currentX+10;
* y=currentY+10;
* For static image in upper right:
* x=availableX-(imgwidth+30)+currentX;
* y=currentY+10;
* For static image in lower left:
* x=currentX+10;
* y=availableY-(imgheight+20)+currentY;
* For static image in lower right:
* x=availableX-(imgwidth+30)+currentX;
* y=availableY-(imgheight+20)+currentY;
*************************************/
x=availableX-(imgwidth+30)+currentX;
y=currentY+10;
evalMove();
setTimeout("checkLocation()",10);
}
function evalMove() {
eval(docStyle + objectXY + styleDoc + horz + "=" + x);
eval(docStyle + objectXY + styleDoc + vert + "=" + y);
}
</script>
</head>
<body onload="setVariables(); checkLocation();"
style="color: rgb(238, 238, 0); background-color: rgb(161, 0, 0);"
link="#ea0000" alink="#ea0000" vlink="#4b0000">
<!-- ********** Insert below <a href="#" onmouseover="modifyimage('dynloadarea',0)"> <img src="Path of Pic" hspace="2" vspace="2" border="0" width="100"></a>-->
<a href="javascript:void(0)" onmouseover="modifyimage('dynloadarea',0)"><img src="Pictures/Cambodia/Angkor, Cambodia - Angkor Thom 08.jpg" hspace="2" vspace="2" border="0" width="100"></a>
<a href="javascript:void(0)" onmouseover="modifyimage('dynloadarea',1)"><img src="Pictures/Cambodia/Angkor, Cambodia - Angkor Thom 09.jpg" hspace="2" vspace="2" border="0" width="100"></a>
<br>
<div id="dynloadarea" style="position: absolute; left: 57%; top: 10 px;"> </div>
</body>
</html>
I have a page which will have 24 thumbnails. In my browser, I get approximately 12/page, which means I have to scroll down one page to get to the second 12. I have two scripts in the <head> of my code - the first deals with displaying the thumbnail as an enlarged picture on mouseover, and the second figures out position on my screen, as the enlarged picture goes to a 'static' location in the upper right corner.
I want to make it easier on users, and so want them to be able to see enlarged pictures before all thumbnails have loaded. It seems that the second script, which determines the location of my 'static' window (div id=dynloadarea), doesn't know the position until after the page loads. I've been able to get around this by putting some absolute position for the div tag (<div id="dynloadarea" style="position: absolute; left: 57%; top: 10 px;"> </div>
). This allows me to check out the first page of thumbnails in the upper right corner, even while other thumbnails are loading. However, it obviously doesn't work when I scroll down to the next screen. Everything works as I want after the page loads completely and the second script can determine the coordinates of the upper right corner of the screen.
I've included the code, though it only has 2 photos rather than the 24 which I'll eventually use.
Thanks in advance for any help you can give this newbie - all suggestions are appreciated.
Brett
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<!-- ********** Insert below <title>Photos - Cambodia Page 1</title>-->
<title>Test Photos - Cambodia Page 1</title>
<meta content="Me" name="author">
<script type="text/javascript">
/***********************************************
* Image Thumbnail Viewer II script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
* Add this to <head> section
* Address of script is: http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm
***********************************************/
//Specify image paths, optional link (set link to "" for no link), and image description:
var dynimages=new Array()
//********** Insert below dynimages[0]=["path to pic","link","description of pic"]
dynimages[0]=["Pictures/Cambodia/Angkor, Cambodia - Angkor Thom 08.jpg","","Angkor, Cambodia - Angkor Thom"]
dynimages[1]=["Pictures/Cambodia/Angkor, Cambodia - Angkor Thom 09.jpg","","Angkor, Cambodia - Angkor Thom"]
//Preload images ("yes" or "no"):
var preloadimg="no"
//Set optional link target to be added to all images with a link:
var optlinktarget=""
//Set image border width
var imgborderwidth=10
//Optionally, change 1.0 and 0.7 below to affect Wipe gradient size and duration in seconds in IE5.5+:
var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"
///////No need to edit beyond here/////
if (preloadimg=="yes"){
for (x=0; x<dynimages.length; x++){
var myimage=new Image()
myimage.src=dynimages[x][0]
}
}
function returnimgcode(theimg){
var imghtml=""
if (theimg[1]!="")
imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
imghtml+='<center><font size="-1"><span style="font-family: Comic Sans MS;">'+theimg[2]+'</span></font></center>'
imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'">'
if (theimg[1]!="")
imghtml+='</a>'
return imghtml
}
function modifyimage(loadarea, imgindex){
if (document.getElementById){
var imgobj=document.getElementById(loadarea)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()
}
imgobj.innerHTML=returnimgcode(dynimages[imgindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false
}
}
</script>
<script language="JavaScript">
/***********************************************
* Original: Randy Bennett (rbennett@thezone.net)
* Web Site: http//home.thezone.net/~rbennett/utility/javahead.htm
*
* This script and many more are available free online at
* The JavaScript Source!! http://javascript.internet.com
* Script to 'float' image in upper right corner of page
* Need to add script to <head>, do <body> onload, and have <div>
************************************************/
function setVariables() {
imgwidth=300; // logo width, in pixels
imgheight=400; // logo height, in pixels
if (navigator.appName == "Netscape") {
horz=".left";
vert=".top";
docStyle="document.";
styleDoc="";
innerW="window.innerWidth";
innerH="window.innerHeight";
offsetX="window.pageXOffset";
offsetY="window.pageYOffset";
}
else {
horz=".pixelLeft";
vert=".pixelTop";
docStyle="";
styleDoc=".style";
innerW="document.body.clientWidth";
innerH="document.body.clientHeight";
offsetX="document.body.scrollLeft";
offsetY="document.body.scrollTop";
}
}
function checkLocation() {
objectXY="dynloadarea";
var availableX=eval(innerW);
var availableY=eval(innerH);
var currentX=eval(offsetX);
var currentY=eval(offsetY);
/*************************************
* For static image in upper left:
* x=currentX+10;
* y=currentY+10;
* For static image in upper right:
* x=availableX-(imgwidth+30)+currentX;
* y=currentY+10;
* For static image in lower left:
* x=currentX+10;
* y=availableY-(imgheight+20)+currentY;
* For static image in lower right:
* x=availableX-(imgwidth+30)+currentX;
* y=availableY-(imgheight+20)+currentY;
*************************************/
x=availableX-(imgwidth+30)+currentX;
y=currentY+10;
evalMove();
setTimeout("checkLocation()",10);
}
function evalMove() {
eval(docStyle + objectXY + styleDoc + horz + "=" + x);
eval(docStyle + objectXY + styleDoc + vert + "=" + y);
}
</script>
</head>
<body onload="setVariables(); checkLocation();"
style="color: rgb(238, 238, 0); background-color: rgb(161, 0, 0);"
link="#ea0000" alink="#ea0000" vlink="#4b0000">
<!-- ********** Insert below <a href="#" onmouseover="modifyimage('dynloadarea',0)"> <img src="Path of Pic" hspace="2" vspace="2" border="0" width="100"></a>-->
<a href="javascript:void(0)" onmouseover="modifyimage('dynloadarea',0)"><img src="Pictures/Cambodia/Angkor, Cambodia - Angkor Thom 08.jpg" hspace="2" vspace="2" border="0" width="100"></a>
<a href="javascript:void(0)" onmouseover="modifyimage('dynloadarea',1)"><img src="Pictures/Cambodia/Angkor, Cambodia - Angkor Thom 09.jpg" hspace="2" vspace="2" border="0" width="100"></a>
<br>
<div id="dynloadarea" style="position: absolute; left: 57%; top: 10 px;"> </div>
</body>
</html>