adding content over an image layer 1

[Pitt]

I have a web page that uses a javascript an layers to slide in manilla folders from the left.&nbsp;&nbsp;My problem is that i want to put content onto those folders without having to edit their images.&nbsp;&nbsp;Everytime i try to use style commands to put content on them, it messes up the whole layout.&nbsp;&nbsp;Here's the url:<br><br><A HREF="

http://www.angelfire.com/pa3/GamerHeaven/ugly/"

TARGET="_new">

http://www.angelfire.com/pa3/GamerHeaven/ugly/</A><br><br>Help

would be appreciated. <p>-Pitt-<br><a href=mailtoitt6969@mindless.com>pitt6969@mindless.com</a><br><a href=

http://www.angelfire.com/pa3/GamerHeaven/>Gamer's

Heaven</a><br>

 

[theEclipse]

interesting. try setting the images as a layer background image. then you can put anything you want over it. <p>theEclipse<br><a href=mailto:eclipse_web@hotmail.com>eclipse_web@hotmail.com</a><br><a href=robacarp.webjump.com>robacarp.webjump.com</a><br>**-Trying to build a documentation of a Javascript DOM, crossbrowser, of course. E-mail me if you know of any little known events and/or methods, etc.

 

[Pitt]

The layer's are defined as follows:<br><br>&lt;div id=&quot;layer1&quot; style=&quot;position: absolute; <br><br>&nbsp;left: -250px; top: 10px; width: 300; z-index: 1&quot;&gt;<br><br>&lt;img src=&quot;xfolder.gif&quot; width=&quot;300&quot; height=&quot;330&quot; /&gt;&lt;/div&gt;<br><br><br><br>Using style commands to set the images as the background for the divisions<br>didn't work.<br><br>Anyone have similar code that works? <p>-Pitt-<br><a href=mailtoitt6969@mindless.com>pitt6969@mindless.com</a><br><a href=

http://www.angelfire.com/pa3/GamerHeaven/>Gamer's

Heaven</a><br>

 

[SandiRae]

It took me some figuring, but I figured this out.<br><br>First of all, you need to create 3 more layers, one for each piece of text you want on the file. Position them where the file lays when open. Then, in your empty.gif a href tag, add the function call show('textlayer1'). In your Java Script, create the show function as shown below:<br><br>&lt;script LANGUAGE=&quot;JAVASCRIPT&quot;&gt;<br>var ns4 = false;<br>var ie4 = false;<br>browser = navigator.appName;<br>version = navigator.appVersion.substring(0,1);<br>if (browser == &quot;Netscape&quot; && version &gt;= 4)<br>&nbsp;&nbsp;&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;ns4 = true;<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br>if (browser == &quot;Microsoft Internet Explorer&quot; && navigator.appVersion.substring(0,2) &gt;= 4)<br>&nbsp;&nbsp;&nbsp;&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;ie4 = true;<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br><br>function show(parent,id) {<br>&nbsp;&nbsp;&nbsp;if (ns4)<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<br>document.layers[parent].layers['page1'].visibility = &quot;hide&quot;;<br>document.layers[parent].layers[id].visibility = &quot;show&quot;;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if (ie4) <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.all[id].style.visibility = &quot;hidden&quot;;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.all[id].style.visibility = &quot;visible&quot;;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>}<br><br><br>Next, alter your z-index. Each folder should have an odd z-index, and it's text should have the corrosponding even z-index. Make your empty.gif z-index all the same layer.<br><br>And there you have it. Oh yeah, if you have any problems with the text still showing up, you can create a function called hide()<br><br>function hide(parent,id) {<br>&nbsp;&nbsp;if (ns4)<br>&nbsp;&nbsp;{<br>document.layers[parent].layers['page1'].visibility = &quot;show&quot;;<br>document.layers[parent].layers[id].visibility = &quot;hide&quot;;<br>&nbsp;&nbsp;&nbsp;} <br>&nbsp;&nbsp;&nbsp;else if (ie4) <br>&nbsp;&nbsp;&nbsp;&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;document.all[id].style.visibility = &quot;visible&quot;;<br>&nbsp;&nbsp;&nbsp;&nbsp;document.all[id].style.visibility = &quot;hidden&quot;;<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br>}<br><br><br>Note: You will want to restrain the height and width of your text by either the layer, or placing a table in the layer. Since I am fairly new to DHTML, I figured a table would be easiest.

 

[Pitt]

Thanx for the help, i've been trying to figure it out for weeks.&nbsp;&nbsp;Now my only problem is the implementation of your help.&nbsp;&nbsp;I tried to add things on my own but i'm very new to dhtml.&nbsp;&nbsp;I just can't seem to get it right.&nbsp;&nbsp;Is it possible to get your html code for the fix??&nbsp;&nbsp;I know it sounds like i'm trying to weasel out of doing it myself, but i really can't get it.&nbsp;&nbsp;If&nbsp;&nbsp;i could see your code, it would help me in implementation of a few other features i'm going to add, as well as this fix.&nbsp;&nbsp;Thanx for all your help. <p>-Pitt-<br><a href=mailtoitt6969@mindless.com>pitt6969@mindless.com</a><br><a href=

http://www.angelfire.com/pa3/GamerHeaven/>Gamer's

Heaven</a><br>