Website Design Forum

**missingtime** · 03-22-2008, 03:46 PM

It works but the dark gray overlay is missing. The instructions say to put it in the images folder..and I did.

Any idea why it's not appearing?

Thank you.

**davidhowland14** · 03-22-2008, 04:04 PM

can we see your code? It sounds like you do have the extra .png file required for the overlay.

**missingtime** · 03-22-2008, 04:08 PM

This is a tutorial I'm doing:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Operation Classroom</title>
<link rel="stylesheet" rev="stylesheet" href="css/ocglobal.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" rev="stylesheet" href="css/tabmenu.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" rev="stylesheet" href="css/navlist.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" rev="stylesheet" href="css/gallerystyle.css" type="text/css" media="screen" charset="utf-8" />

<script src="css/motiongallery.js" type="text/javascript" language="Javascript1.2" charset="utf-8"> </script>
<link rel="stylesheet" rev="stylesheet" href="css/gallerystyle.css" type="text/css" media="screen" charset="utf-8" />
<script src="css/lightbox.js" type="text/javascript" language="Javascript1.2" charset="utf-8"></script>


</head>

<body bgcolor="#697172">

<div id="topBorder"> </div>
<div id="header"></div>

<div id="container">

<div id="mainMenu">
<a class="activeMenuItem" style="left: 15px; bottom: -1px;" id="mainMenuItem1" href="index.html">Home</a>
<a class="inactiveMenuItem" style="left: 110px; bottom: -1px;" id="mainMenuItem2" href="programs/index.html">Programs</a>
<a class="inactiveMenuItem" style="left: 198px; bottom: -1px;" id="mainMenuItem3" href="shipping/index.html">Shipping</a>
<a class="inactiveMenuItem" style="left: 293px; bottom: -1px;" id="mainMenuItem4" href="supplies/index.html">Supplies</a>
<a class="inactiveMenuItem" style="left: 388px; bottom: -1px;" id="mainMenuItem5" href="volunteer/index.html">Volunteer</a>
<a class="inactiveMenuItem" style="left: 483px; bottom: -1px;" id="mainMenuItem6" href="resources/index.html">Resources</a>
<a class="inactiveMenuItem" style="left: 578px; bottom: -1px;" id="mainMenuItem7" href="about/index.html">About</a>
</div>
<div style="display: block;" id="submenu">
<div style="padding-left: 15px; position: static; display: none;" id="submenu_1">
</div>
<div style="padding-left: 15px; position: static; display: block;" id="submenu_2">
<a href="programs/schools.html">Schools</a> |
<a href="programs/vocational.html">Vocational</a> |
<a href="programs/watts.html">WATTS</a> |
<a href="programs/medical.html">Operation Doctor</a>
</div>
<div style="padding-left: 15px; position: static; display: none;" id="submenu_3">
<a href="shipping/instructions.html">Instructions</a> |
<a href="shipping/shipform.html">Shipping Form</a>
</div>
<div style="padding-left: 15px; position: static; display: none;" id="submenu_4">
<a href="supplies/kits.html">Kits</a> |
<a href="supplies/needs.html">Supplies Needed</a> |
<a href="supplies/xmasgifts.html">Alternative Christmas Gifts</a>
</div>
<div style="padding-left: 15px; position: static; display: none;" id="submenu_5">
<a href="volunteers/workteams.html">Overseas Workteams</a> |
<a href="volunteers/individuals.html">Overseas Individuals</a> |
<a href="volunteers/domestic.html">Get Involved in the U.S.</a>
</div>
<div style="padding-left: 15px; position: static; display: none;" id="submenu_6">
<a href="resources/blackboard.html">Blackboard</a> |
<a href="resources/speakers.html">Speakers</a> |
<a href="resources/studies.html">Studies</a> |
<a href="resources/consultations.html">Consultations</a> |
<a href="resources/books.html">Books</a> |
<a href="resources/promotional.html">Promotional</a> |
<a href="resources/prayer.html">Prayer</a> |
<a href="resources/weblinks.html">Web Links</a>
</div>
<div style="padding-left: 15px; position: static; display: none;" id="submenu_7">
<a href="about/contact.html">Contact Us</a> |
<a href="about/history.html">History</a>
</div>

</div>

<div id="rightColumn">
<div id="navlist">
<h2>More Info</h2>
<ul>
<li><a href="#">Shipping</a></li>
<li><a href="#">Volunteer Overseas</a></li>
<li><a href="#">Speakers</a></li>
<li><a href="#">Gifts</a></li>
</ul>
</div>
</div>

<div id="content">
<div id="pathway"><a href="../index.html">Home</a> / <a href="index.html">Programs</a> / <a href="#">Schools</a> / Trip Report </div>
<div id="pagetitle">Field Trip Report</div>
<div id="pagetitlespacer"></div>
<p>Field Director Charles Smith and Chief Assistant Frank Iota recently had visited the Operation Classroom secondary schools in rural Sierra Leone. Over a two week span, they had a chance to visit over 16 schools, participate in their instruction, and even have a chance to play an occasional soccer game with the students. Here's a photo trip report of what they saw.<br>
</p>

<div id="motioncontainer" style="position:relative;width:400px;height:80px;o verflow:hidden;margin-left:90px;">
<div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">

<nobr id="trueContainer">
<a rel="lightbox" href="images/gallery/DSC00003.JPG"><img src="images/gallery/DSC00003_100.JPG" border=1></a>
<a rel="lightbox" href="images/gallery/DSC00004.JPG"><img src="images/gallery/DSC00004_100.JPG" border=1></a>
<a rel="lightbox" href="images/gallery/DSC00005.JPG"><img src="images/gallery/DSC00005_100.JPG" border=1></a>
<a rel="lightbox" href="images/gallery/DSC00006.JPG"><img src="images/gallery/DSC00006_100.JPG" border=1></a>
<a rel="lightbox" href="images/gallery/DSC00007.JPG"><img src="images/gallery/DSC00007_100.JPG" border=1></a>
<a rel="lightbox" href="images/gallery/DSC00008.JPG"><img src="images/gallery/DSC00008_100.JPG" border=1></a>
<a rel="lightbox" href="images/gallery/DSC00009.JPG"><img src="images/gallery/DSC00009_100.JPG" border=1></a>
<a rel="lightbox" href="images/gallery/DSC00010.JPG"><img src="images/gallery/DSC00010_100.JPG" border=1></a>
<a rel="lightbox" href="images/gallery/DSC00011.JPG"><img src="images/gallery/DSC00011_100.JPG" border=1></a>
<a rel="lightbox" href="images/gallery/DSC00012.JPG"><img src="images/gallery/DSC00012_100.JPG" border=1></a>
</nobr>
</div>
</div>
<p style="text-align:center;font-size:80%;">Scroll the gallery by using your mouse. Then click on an image to enlarge it.</p>

</div>

<div id="footer">
<hr></hr>
<p><a href="about/index.html">About Operation Classroom </a> | <a href="about/contact.html">Contact Us</a><br>
</a>Copyright ©2005 Operation Classroom, All rights reserved.<br />
</div>

<div id="bottomBorder"> </div>
</div>
</body>
</html>

**davidhowland14** · 04:49 PM

If that is all the code used on the site, it looks to me like your missing the code that customizes the lightbox.

#overlay{ background-image: url(overlay.png); }

* html #overlay{
background-color: #000;
back\ground-color: transparent;
background-image: url(blank.gif);
filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(src="o verlay.png", sizingMethod="scale");
}

**missingtime** · 05:38 PM

I found this code in lightbox.js:

#overlay{ background-image: url(../overlay.png); }

* html #overlay{
background-color: #333;
back\ground-color: transparent;
background-image: url(../blank.gif);
filter: progid

XImageTransform.Microsoft.AlphaImageLoader (src="overlay.png", sizingMethod="scale");
}

So, it's there.

I'm not sure why but...

I'm using Dreamweaver..and when I click on "assets" and then choose "images"...I don't see this overlay.png image listed there. Shouldn't I?

**davidhowland14** · 03-22-2008, 05:36 PM

oh, ok. What's the file structure for the folder where the site is? that code is looking for overlay.png in a folder outside of the folder the JS file is. If your image is in a folder located in the folder the JS file is, then you'll need to change the lcoation path.

**missingtime** · 03-22-2008, 05:48 PM

I must have read your mind as you were typing this. Yes, that was the problem. I think I need to go to bed and get some sleep.

**davidhowland14** · 03-22-2008, 05:52 PM

ahaha...sleep usually helps. Glad to (kinda) help.