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

#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

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


The HTML used to create one row of the table.

<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

 

[Rieekan]

You'd want to ask this question in the JavaScript forum (forum216).

 

[rosh1e]

Thank you...done