Please Help with hiding and displaying layers using CSS and Javascript

[rosh1e]

Hi,

I really need some help I hope someone out there can help. Basically I'm designing a web page with the content part of the page made of a table which is scrollable showing thumbnails of fashionitems.
Basically, (I'm trying to make this as clear as I can). Each item is contained within it's own table, which is enclosed within a column in the table. And what I would like to do is cover over part of items picture with a semi tranparent layer containing the item details, when a users mouse passes over the item. All other items on the page should remain in full display. I created the Javascript for this however, it only works for the first item in the table. The other items already have the semi-transparent layer on load of the page. And if I mouse over any of them, then only the first item is affected. I have created a static page to get the layout right at first, but it will eventually be done dynamically. Does that make sense at all? I used the same div repeatedly to create each items table, do they have to be unique and if they are how do I create them dynamically? Also how can I turn this into a dynamically created table, with the javascript working?

Here is the code I have used

The CSS code

Code: Select all

#items{width: 640;}
 
#mainpicture {background-color:#ffffff; position:relative; z-index: 1; height: 160px; width: 160px; top:0; right:0; }
 
#picturedetails {background-color:#ffffff; position:relative; z-index: 2; height:80px; width:160px; top: -120px; filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;}

The Javascript function

Code: Select all

<script language="JavaScript">
function setAllVisible() {
document.getElementById("picturedetails").style.visibility="hidden";
}
</script>

The HTML used to create one row of the table.

Code: Select all

<table bgcolor="#FFFDFD" cellspacing="3">
<tr>
<td>
<table>
<tr>
<td>
<div id="mainpicture" onMouseOver='document.getElementById("picturedetails").style.visibility = 
"visible";' onMouseOut='document.getElementById("picturedetails").style.visibility = "hidden";'>
<a href=""><img src ="../images/products/dresses/dr10164bluefront.jpg" border=0 height="160" width= 
"120" /></a> 
</div>
<div id="picturedetails" onMouseOver='document.getElementById("picturedetails").style.visibility = 
"visible";' onMouseOut='document.getElementById("picturedetails").style.visibility = "hidden";'>
Hello you please work 
<br />Yes
<br />yes
</div> 
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
<div id="mainpicture" onMouseOver='document.getElementById("picturedetails").style.visibility = 
"visible";' onMouseOut='document.getElementById("picturedetails").style.visibility = "hidden";'>
<a href=""><img src ="../images/products/dresses/dr10109blackfront.jpg" border=0 height="160" width= 
"120" /></a> 
</div>
<div id="picturedetails" onMouseOver='document.getElementById("picturedetails").style.visibility = 
"visible";' onMouseOut='document.getElementById("picturedetails").style.visibility = "hidden";'>
Hello you please work 
<br />Yes
<br />yes
</div> 
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
<div id="mainpicture" onMouseOver='document.getElementById("picturedetails").style.visibility = 
"visible";' onMouseOut='document.getElementById("picturedetails").style.visibility = "hidden";'>
<a href=""><img src ="../images/products/dresses/dr10173brownfront.jpg" border=0 height="160" width= 
"120" /></a> 
</div>
<div id="picturedetails" onMouseOver='document.getElementById("picturedetails").style.visibility = 
"visible";' onMouseOut='document.getElementById("picturedetails").style.visibility = "hidden";'>
Hello you please work 
<br />Yes
<br />yes
</div> 
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
<div id="mainpicture" onMouseOver='document.getElementById("picturedetails").style.visibility = 
"visible";' onMouseOut='document.getElementById("picturedetails").style.visibility = "hidden";'>
<a href=""><img src ="../images/products/dresses/dr10198greyfront.jpg" border=0 height="160" width= 
"120" /></a> 
</div>
<div id="picturedetails" onMouseOver='document.getElementById("picturedetails").style.visibility = 
"visible";' onMouseOut='document.getElementById("picturedetails").style.visibility = "hidden";'>
Hello you please work 
<br />Yes
<br />yes
</div> 
</td>
</tr>
</table>
</td>
</tr>

Please I really hope someone can help because I am so stuck right now
Thank you in advance

[Love2Java]

I'm no javascript expert...I do know a little though...I mainly code in JAVA...
its coincidental though, as I am also playing around with <div>'s and their visibility attribute for my web pages.

So here is what I've noticed by briefing over some of your code. You have LOTS of syntax errors:
Here's a snippet of your code to show you what I mean, errors are in bold, and I've added comments in bold as well to explain the error -

Code: Select all

document.getElementById("picturedetails").style.vi  sibility="hidden";
// visibility is one word, no spaces
}
</script>

The HTML used to create one row of the table.

Code: Select all

<table bgcolor="#FFFDFD" cellspacing="3">
<tr>
<td>
<table>
<tr>
<td>
<div id="mainpicture" onMouseOver='document.getElementById("picturedetai  ls").style.visibility = 
"visible";' onMouseOut='document.getElementById("picturedetail  s").style.visibility = "hidden";'>
//again, syntax error, you need to spell picturesdetail as one word, and spell it as you defined it
<a href=""><img src ="../images/products/dresses/dr10164bluefront.jpg" border=0 height="160" width= 
"120" /></a> 
</div>
<div id="picturedetails" onMouseOver='document.getElementById("picturedetai  ls").style.visibility = 
"visible";' onMouseOut='document.getElementById("picturedetail  s").style.visibility = "hidden";'>
//same error again

See where I'm going with this? If the code you posted is the code you are using to run the page, you need to look over the code and check for syntax errors, because there are quite a few...and as with any programming language "syntax errors" are not overlooked. One simple typo can halt the running of an entire application.

Fix the errors and run it again...hope it works!

[ScottR]

Ids have to be unique to each page. Classes do not.


IMO, ditch the layers and run as fast and as far as you can!! I would use css and positioning for the items you want to position.