...

View Full Version : Javascripts running on different CSS layers



Spiffy
06-03-2004, 03:44 AM
I found some code off this site for a Image Thumbnail Viewer II script. I have got this script (http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm)to work on one page and even within a table but I am trying to redesign my site to use layers and for the life of me I cant get the image display to work on seperate layers. I have a bit of Javascripting experience but for the life of me I cannot make this code work. If you view the above link to the main source, I have one layer set up as the preview and have placed the remaining code for the display on another layer. When I view the page I only get "errors on the page" The code for the layer that the image is actually displayed in "should" be

<div id="Display"><!-- name of the "Layer" -->
<h2 class="right">Links</h2>
<hr>
<div id="dynloadarea" style="width:80px;height:225px"></div>
<div id="dynloadarea2" style="width:80px;height:200px"></div>
</div>

Since I am trying to affect this layer with the result of a javascript that is running off of another layer is there anything special that I have to do with this code to make it work? I really appreciate all of your help and look forward to hearing from someone regarding this issue.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
<META NAME="Generator" CONTENT="TextPad 4.6">
<META NAME="Author" CONTENT="?">
<META NAME="Keywords" CONTENT="?">
<META NAME="Description" CONTENT="?">
<style type="text/css">
.xlink {cursor:crosshair}
.hlink{cursor:help}

<!--
body {
color:#333;
background-color:white;
margin:20px;
padding:0px;
font:11px verdana, arial, helvetica, sans-serif;
filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#CEDFF6',
startColorstr='#4B92D9', gradientType='0');
}
h1 {
margin:0px 0px 15px 0px;
padding:0px;
font-size:28px;
font-weight:900;
color:#ccc;
text-align: center;
}
h2 {
font:bold 12px/14px verdana, arial, helvetica, sans-serif;
margin:0px 0px 5px 0px;
padding:0px;
}
p {
font:11px/20px verdana, arial, helvetica, sans-serif;
margin:0px 0px 16px 0px;
padding:0px;
}
p.right {
text-align: right;
font:11px/20px verdana, arial, helvetica, sans-serif;
margin:0px 0px 16px 0px;
padding:0px;
}
.right {
text-aligh: right;
}
.Content>p {margin:0px;}
.Content>p+p {text-indent:30px;}
a {
color:#09c;
font-size:11px;
font-family:verdana, arial, helvetica, sans-serif;
font-weight:600;
text-decoration:none;
}
a:link {color:#09c;}
a:visited {color:#07a;}
a:hover {background-color:#eee;}
.content {
position:relative; /* Position is declared "relative" to gain control of stacking order
(z-index). */
width:auto;
min-width:120px;
margin:0px 210px 20px 170px;
border:1px solid black;
background-color:ghostwhite;
padding:10px;
z-index:3; /* This allows the content to overlap the right menu in narrow windows in good
browsers. */
}
#Background {
position:absolute;
width:800px;
height:600px;
top:10px;
left:10px;
border:1px dashed black;
background-color:#eee;
padding:0px;
z-index:0;
voice-family: "\"}\"";
voice-family:inherit;
width:810px;
}
body>#navAlpha {width:128px;}
#Preview {
position:absolute;
width:260px;
height:580px;
top:20px;
left:20px;
border:1px dashed black;
background-color:#eee;
padding:5px;
z-index:1;
voice-family: "\"}\"";
voice-family:inherit;
width:260px;
}
#Title {
position:absolute;
width:520px;
height:75;
top:20px;
left:290px;
border:1px dashed black;
background-color:#eee;
padding:10px;
z-index:1;
voice-family: "\"}\"";
voice-family:inherit;
width:525px;
}
#Display {
position:absolute;
width:520px;
height:495px;
top:105px;
left:290px;
border:1px dashed black;
background-color:#eee;
padding:10px;
z-index:1;
voice-family: "\"}\"";
voice-family:inherit;
width:525px;
}
body>#navBeta {width:168px;}
-->
</style>
<script type="text/java-script">
<!--


/***********************************************
* Image Thumbnail Viewer II script- (c) 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
***********************************************/
//Specify image paths and optional link (set link to "" for no link):
var dynimages=new Array()
dynimages[0]=["Img_0026.jpg", ""]
dynimages[1]=["Img_0031.jpg", ""]
dynimages[2]=["Img_0032.jpg", ""]

//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=0

//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+='<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>

</HEAD>

<BODY>

<!-------- BACKGROUND ---------->

<div id="Background"><!-- name of the "Layer" -->
<h2 class="right">Links</h2>
<hr>
<a href="http://www.google.ca" class="xlink" target="_self">BACKGROUND </a><br><hr>
<a href="http://www.codeez.com" class="xlink" target="_self">BACKGROUND </a><br><hr>
<a href="http://www.csszengarden.com" class="xlink" target="_self">BACKGROUND </a><br>
</div>

<!-------- PREVIEW ---------->

<div id="Preview"><!-- name of the "Layer" -->
<h2 class="right">Links</h2>
<hr>

<a href="#" onClick="modifyimage('dynloadarea', 2)"><img border="0" src="Img_0026.jpg" width="120"
height="120"

style="margin-bottom: 5px"></a>

<a href="#" onClick="modifyimage('dynloadarea', 2)"><img border="0" src="Img_0031.jpg" width="120"
height="120"

style="margin-bottom: 5px"></a>

<a href="#" onClick="modifyimage('dynloadarea', 2)"><img border="0" src="Img_0032.jpg" width="120"
height="120"

style="margin-bottom: 5px"></a>

</div>

<!-------- TITLE ---------->

<div id="Title">
<!-- name of the "Layer" -->
<h2 class="right">Links</h2>

</div>

<!-------- DISPLAY ---------->

<div id="Display"><!-- name of the "Layer" -->
<h2 class="right">Links</h2>
<hr>
<div id="dynloadarea" style="width:80px;height:225px"></div>
<div id="dynloadarea2" style="width:80px;height:200px"></div>
</div>

</BODY>
</HTML>

Willy Duitt
06-04-2004, 06:14 AM
<script type="text/java-script">



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum