PDA

View Full Version : Frog JS and CSS centering



kryptique
02-21-2010, 12:44 AM
1) Script Title: Frog JS

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/frogjs/index.htm

I am attempting to have a centered image background table that serves as the base layer and layer over top of it a FrogJS slideshow (centered). I have been tweeking the code for hours and am getting nowhere. Any suggestions?

Here's my code:

<html>
<head>
<title>Magic Moonshadows Agate Dream Catcher Gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Preload Script (ADCgalleryTemplate.psd) -->
<script type="text/javascript">
<!--
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}

var preloadFlag = false;
function preloadImages() {
if (document.images) {
viewadc_03_over = newImage("images/viewadc_03-over.jpg");
viewadc_07_over = newImage("images/viewadc_07-over.jpg");
viewadc_10_over = newImage("images/viewadc_10-over.jpg");
viewadc_13_over = newImage("images/viewadc_13-over.jpg");
preloadFlag = true;
}
}

// -->
</script>
<!-- End Preload Script -->

<!-- Frog JS -->
<script type="text/javascript" src="scripts/prototype.js"></script>
<script type="text/javascript" src="scripts/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="scripts/frog.js"></script>

<style type="text/css">
#FrogJS{
width: 635px;
height: 490px;
margin: 0 auto;
top: 160px;
z-inex:1
}
#FrogJSCredit{
text-align: right;
font-size: 80%;
color: #999;
padding: 1px;
}
#FrogJSCaption{
text-align: left;
line-height: 140%;
}
table.displayed {
display: block;
margin-left: auto;
margin-right: auto;
z-index:-1; }
</style>

</head>


<body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="preloadImages();">
<center>
<!-- ImageReady Slices (ADCgalleryTemplate.psd) -->
<table class="displayed" style="position:absolute;" id="Table_01" width="855" height="605" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="7">
<img src="images/viewadc_01.jpg" width="855" height="38" alt=""></td>
</tr>
<tr>
<td rowspan="6">
<img src="images/viewadc_02.jpg" width="8" height="189" alt=""></td>
<td colspan="4">
<a href="http://www.magicmoonshadows.com/main.html" target="_parent"
onmouseover="changeImages('viewadc_03', 'images/viewadc_03-over.jpg'); return true;"
onmouseout="changeImages('viewadc_03', 'images/viewadc_03.jpg'); return true;"
onmousedown="changeImages('viewadc_03', 'images/viewadc_03-over.jpg'); return true;"
onmouseup="changeImages('viewadc_03', 'images/viewadc_03-over.jpg'); return true;">
<img name="viewadc_03" src="images/viewadc_03.jpg" width="71" height="75" border="0" alt="Click to Go Back to Home Page"></a></td>
<td colspan="2" rowspan="6">
<img src="images/viewadc_04.jpg" width="776" height="189" alt=""></td>
</tr>
<tr>
<td colspan="4">
<img src="images/viewadc_05.jpg" width="71" height="35" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/viewadc_06.jpg" width="4" height="40" alt=""></td>
<td>
<a href="http://www.magicmoonshadows.com/new_Vguide.html" target="_parent"
onmouseover="changeImages('viewadc_07', 'images/viewadc_07-over.jpg'); return true;"
onmouseout="changeImages('viewadc_07', 'images/viewadc_07.jpg'); return true;"
onmousedown="changeImages('viewadc_07', 'images/viewadc_07-over.jpg'); return true;"
onmouseup="changeImages('viewadc_07', 'images/viewadc_07-over.jpg'); return true;">
<img name="viewadc_07" src="images/viewadc_07.jpg" width="60" height="26" border="0" alt="Click to Go Back to the Virtual Gallery Guide"></a></td>
<td colspan="2" rowspan="2">
<img src="images/viewadc_08.jpg" width="7" height="40" alt=""></td>
</tr>
<tr>
<td>
<img src="images/viewadc_09.jpg" width="60" height="14" alt=""></td>
</tr>
<tr>
<td colspan="3">
<a href="http://www.magicmoonshadows.com/customorder.html" target="_blank"
onmouseover="changeImages('viewadc_10', 'images/viewadc_10-over.jpg'); return true;"
onmouseout="changeImages('viewadc_10', 'images/viewadc_10.jpg'); return true;"
onmousedown="changeImages('viewadc_10', 'images/viewadc_10-over.jpg'); return true;"
onmouseup="changeImages('viewadc_10', 'images/viewadc_10-over.jpg'); return true;">
<img name="viewadc_10" src="images/viewadc_10.jpg" width="66" height="27" border="0" alt="Click to Make a Custom Order"></a></td>
<td rowspan="2">
<img src="images/viewadc_11.jpg" width="5" height="39" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/viewadc_12.jpg" width="66" height="12" alt=""></td>
</tr>
<tr>
<td colspan="6">
<a href="http://www.magicmoonshadows.com/contactology.html"
onmouseover="changeImages('viewadc_13', 'images/viewadc_13-over.jpg'); return true;"
onmouseout="changeImages('viewadc_13', 'images/viewadc_13.jpg'); return true;"
onmousedown="changeImages('viewadc_13', 'images/viewadc_13-over.jpg'); return true;"
onmouseup="changeImages('viewadc_13', 'images/viewadc_13-over.jpg'); return true;">
<img name="viewadc_13" src="images/viewadc_13.jpg" width="84" height="27" border="0" alt="Questions? Contact Magic Moonshadows"></a></td>
<td rowspan="2">
<img src="images/viewadc_14.jpg" width="771" height="377" alt=""></td>
</tr>
<tr>
<td colspan="6">
<img src="images/viewadc_15.jpg" width="84" height="350" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="8" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="4" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="60" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="2" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="5" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="5" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="771" height="1" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</center>
<div id="FrogJS">
<a href="newMagic/adc3279_1.jpg" title="Original Design by Cynthia Beatty">
<img src="newMagic/adc3279_thumb.jpg"/>
</a>
<a href="newMagic/adc18.jpg" title="Original Design by Cynthia Beatty">
<img src="newMagic/adc18_thumb.jpg" alt="" />
</a>
<a href="newMagic/adc17.jpg" title="Original Design by Cynthia Beatty">
<img src="newMagic/adc17_thumb.jpg" />
</a>
<a href="newMagic/adc10_1.jpg" title="Original Design by Cynthia Beatty">
<img src="newMagic/adc10_thumb.jpg" />
</a>
</div>

</body>
</html>