Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2004
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascripts running on different CSS layers

    I found some code off this site for a Image Thumbnail Viewer II script. I have got this script (http://www.dynamicdrive.com/dynamici...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.
    Code:
    <!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>
    Attached Files Attached Files
    Last edited by Spiffy; 06-03-2004 at 05:08 AM. Reason: Adding code

  • #2
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <script type="text/java-script">


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •