each one will have a brief decription, in a layer below it, set to visibility:hidden;
when the user mouse overs each image, the info will be displayed.
i got the first one working using 2 functions, one to apear and one to disapear.
how do i keep my script simple, and just use these functions to do the same effect on the other 4 images.
at the moment, when you mouseover image 2, decription for both images is displayed.
here's the javascript
Expand|Select|Wrap|Line Numbers
- <script language="javascript1.2">
- function tAppear()
- {
- document.getElementById("t1").style.visibility = "visible";
- document.getElementById("t2").style.visibility = "visible";
- }
- function tDisappear()
- {
- document.getElementById("t1").style.visibility = "hidden";
- document.getElementById("t2").style.visibility = "hidden";
- }
- </script>
Expand|Select|Wrap|Line Numbers
- <table width="100%" border="0" cellspacing="5" cellpadding="6">
- <tr>
- <td bgcolor="#f9efda"><span onMouseOver="tAppear()" onMouseOut="tDisappear()"><img src="images/t1.jpg" width="100" height="75" /></span></td>
- <td bgcolor="#f9efda"><span onMouseOver="tAppear()" onMouseOut="tDisappear()"><img src="images/t2.jpg" width="100" height="75" /></span></td>
- <td bgcolor="#f9efda"> </td>
- <td bgcolor="#f9efda"> </td>
- <td bgcolor="#f9efda"> </td>
- </tr>
- <tr>
- <td bgcolor="#f9efda"><div id="t1">Never Forget<br />€10</div></td>
- <td bgcolor="#f9efda"><div id="t2">Viva La Evolución <br />€10</div></td>
- <td bgcolor="#f9efda"> </td>
- <td bgcolor="#f9efda"> </td>
- <td bgcolor="#f9efda"> </td>
- </tr>
- </table>
thanks