LittleRed
10-23-2003, 03:39 AM
hi, I'm having trouble with this page:
www.dark-uk.com/john/library.html
it was working fine off-line, but then I tried it on another machine and it didn't work, and now uploaded, it doesn't work on any machine. (I've only tried IE 5 and 6 so far though)
What's supposed to happen was that the image map over the 'looking glass' book would be clicked and a pop-up would be created to simulate the book cover. The image in the parent window would also be changed to simulate it blurring. There's an image map at the bottom of the pop-up, which would then create a second pop-up next to it and the contents of both would be changed to show the first and second page. Clicking the image map in the first pop-up would successively alter each pair of images, until the 24th page, when clicking the image map would close both windows and restore the parent's image.
At anytime closing either window would close the other and restore the parent graphic to the 'unblurred' version.
what seems to be happening is that the second pop-up is created ok, and the image is correct for that, but the image in the first pop-up isn't altered, and clicking the image map on the first pop-up closes both windows.
can anyone see anything wrong with the coding? Any help would be great as I was hoping to build an entire library of these. thanks so much!
(I've just converted these from html 4.01 to xhtml - that wouldn't affect it would it?)
the code for the first pop-up is: (sorry - couldn't seem to get the PHP colour coding to work...)
<!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" xml:lang="en" lang="en">
<head>
<title>::.....................</title>
<!-- embedded styles -->
<style type="text/css">
<!--
.imageplace {
position: absolute; left: 0px; top: 0px;
}
-->
</style>
<script language = "JavaScript" type="text/javascript">
<!-- hide me
function open_popups()
{
var pop_width = 150;
var pop_height = 150;
var screen_width = 760;
var screen_height = 420;
if (((navigator.appName == "Microsoft Internet Explorer") || (navigator.appName == "Netscape")) && (parseInt(navigator.appVersion) >= 4 )) {
screen_width = screen.availWidth;
screen_height = screen.availHeight;
}
var leftbook_left = (((screen_width)/2)-pop_width)-5;
var book_top = (screen_height-pop_height)/2;
leftglass=window.open('looking_glass_book.html','book1','height='+pop_height+',width='+pop_width+',l eft='+leftbook_left+',screenX='+leftbook_left+',top='+book_top+',screenY='+book_top);
}
function display_pages(page_number) {
if (current_page==24) {
window.close();
}
if (current_page==2) {
open_popups();
window.focus();
}
if (current_page<=23) {
leftglass.document.leftpage.src='elements/lookingglass'+page_number+'.jpg'; document.rightpage.src='elements/lookingglass'+page_number+'b.jpg';
current_page++;
}
window.opener.status='click the page number to turn to the next page'
}
// show me -->
</script>
</head>
<body bgcolor="#000000" text="#999966" link="#666666" vlink="#666666" alink="#666666" onunload="window.opener.document.library_bkgrnd.src='elements/library.jpg';window.opener.status='salmacis /library';leftglass.close();">
<script language = "JavaScript" type="text/javascript">
<!-- hide me
current_page = 2;
window.opener.status='click the bottom of the cover to begin reading'
window.opener.document.library_bkgrnd.src="elements/library_dark.jpg";
// show me -->
</script>
<div class="imageplace" align="center">
<img src="elements/lookingglass1b.jpg" height="150" width="150" alt="" name="rightpage" usemap="#nextpage" border="0">
<map name="nextpage" id="nextpage">
<area shape="rect" coords="56,123,90,146" href="#" onclick="display_pages(current_page); return false;" alt="turn the page /">
</map>
</div>
</body>
</html>
and the code for the second is:
<!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" xml:lang="en" lang="en">
<head>
<title>::.....................</title>
<!-- embedded styles -->
<style type="text/css">
<!--
.imageplace {
position: absolute; left: 0px; top: 0px;
}
-->
</style>
</head>
<body onUnload="window.opener.close();">
<div class="imageplace" align="center">
<img src="elements/lookingglass2.jpg" height="150" width="150" border="0" alt="" name="leftpage">
</div>
</body>
</html>
www.dark-uk.com/john/library.html
it was working fine off-line, but then I tried it on another machine and it didn't work, and now uploaded, it doesn't work on any machine. (I've only tried IE 5 and 6 so far though)
What's supposed to happen was that the image map over the 'looking glass' book would be clicked and a pop-up would be created to simulate the book cover. The image in the parent window would also be changed to simulate it blurring. There's an image map at the bottom of the pop-up, which would then create a second pop-up next to it and the contents of both would be changed to show the first and second page. Clicking the image map in the first pop-up would successively alter each pair of images, until the 24th page, when clicking the image map would close both windows and restore the parent's image.
At anytime closing either window would close the other and restore the parent graphic to the 'unblurred' version.
what seems to be happening is that the second pop-up is created ok, and the image is correct for that, but the image in the first pop-up isn't altered, and clicking the image map on the first pop-up closes both windows.
can anyone see anything wrong with the coding? Any help would be great as I was hoping to build an entire library of these. thanks so much!
(I've just converted these from html 4.01 to xhtml - that wouldn't affect it would it?)
the code for the first pop-up is: (sorry - couldn't seem to get the PHP colour coding to work...)
<!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" xml:lang="en" lang="en">
<head>
<title>::.....................</title>
<!-- embedded styles -->
<style type="text/css">
<!--
.imageplace {
position: absolute; left: 0px; top: 0px;
}
-->
</style>
<script language = "JavaScript" type="text/javascript">
<!-- hide me
function open_popups()
{
var pop_width = 150;
var pop_height = 150;
var screen_width = 760;
var screen_height = 420;
if (((navigator.appName == "Microsoft Internet Explorer") || (navigator.appName == "Netscape")) && (parseInt(navigator.appVersion) >= 4 )) {
screen_width = screen.availWidth;
screen_height = screen.availHeight;
}
var leftbook_left = (((screen_width)/2)-pop_width)-5;
var book_top = (screen_height-pop_height)/2;
leftglass=window.open('looking_glass_book.html','book1','height='+pop_height+',width='+pop_width+',l eft='+leftbook_left+',screenX='+leftbook_left+',top='+book_top+',screenY='+book_top);
}
function display_pages(page_number) {
if (current_page==24) {
window.close();
}
if (current_page==2) {
open_popups();
window.focus();
}
if (current_page<=23) {
leftglass.document.leftpage.src='elements/lookingglass'+page_number+'.jpg'; document.rightpage.src='elements/lookingglass'+page_number+'b.jpg';
current_page++;
}
window.opener.status='click the page number to turn to the next page'
}
// show me -->
</script>
</head>
<body bgcolor="#000000" text="#999966" link="#666666" vlink="#666666" alink="#666666" onunload="window.opener.document.library_bkgrnd.src='elements/library.jpg';window.opener.status='salmacis /library';leftglass.close();">
<script language = "JavaScript" type="text/javascript">
<!-- hide me
current_page = 2;
window.opener.status='click the bottom of the cover to begin reading'
window.opener.document.library_bkgrnd.src="elements/library_dark.jpg";
// show me -->
</script>
<div class="imageplace" align="center">
<img src="elements/lookingglass1b.jpg" height="150" width="150" alt="" name="rightpage" usemap="#nextpage" border="0">
<map name="nextpage" id="nextpage">
<area shape="rect" coords="56,123,90,146" href="#" onclick="display_pages(current_page); return false;" alt="turn the page /">
</map>
</div>
</body>
</html>
and the code for the second is:
<!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" xml:lang="en" lang="en">
<head>
<title>::.....................</title>
<!-- embedded styles -->
<style type="text/css">
<!--
.imageplace {
position: absolute; left: 0px; top: 0px;
}
-->
</style>
</head>
<body onUnload="window.opener.close();">
<div class="imageplace" align="center">
<img src="elements/lookingglass2.jpg" height="150" width="150" border="0" alt="" name="leftpage">
</div>
</body>
</html>