dispalying msg on div with mouseover on table

[surekhavk]

function setgray( id)// for gray color on mouseover
{
  if( typeof(id) == "string" && id.length > 0 )
  {
    var element = document.getElementById(id);
  // if( element )
   document.getElementById(id).style.backgroundColor ="appworkspace";
   sub1.style.display="block";

  }

}

function setblack(id ) // for black color on mouseover
{
  if( typeof(id) == "string" && id.length > 0 )
  {
    var element = document.getElementById(id);
    

     document.getElementById(id).style.backgroundColor ="black";

  }
 
}

i have this 2 function used on mouseover and mouseout fr changing the color of <tr>
along with changing color when mouse is over a link in <tr> it dispalys a <div> with some data.

this is the table having links

<div style="float:left;width:480px; height:450px;">
    <table width="150%" style="height: 80%;" border="0" cellspacing="3" align="center">
    <tr><td>
        <table cellspacing="0px" style="height:204px;" id="table1"  width="150%"  border="0">
               
            <tr id="td2" class="fstyle" >
                <td style="height: 18px; width: 715px;" >  
                    <a id="lnk2" href='' onmouseover="setgray('td2');" onmouseout=" setblack('td2')"
                      >LINK2</a> &nbsp; 
                   <span style="left:inherit;"><img alt ="" src="Images/indicator.gif" /></span> </td>
            </tr>
            <tr id="td3"  class="fstyle" onmouseout="setblack('td3');">
                <td style="height: 4px; width: 715px;" >
                    <a id="lnk3"   href=''onmouseover="setgray('td3');" >LINK3</a>
                    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                    <span style="left:inherit;">
                    <img alt ="" src="Images/indicator.gif" /></span></td>
            </tr>
       <tr id="td4"  class="fstyle" >
                <td style="width: 715px" >
                    <a id="lnk4" href='' onmouseout=" setblack('td4')" onmouseover="setgray('td4');"
                      >LINK4</a>
                    &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
                    &nbsp;&nbsp;<img   alt =""src="Images/indicator.gif" /></td><td><img  alt="round" src="Images/indicator.gif" /><img  alt="round" src="Images/indicator.gif" /></td>
            </tr>
         <tr id="td5"  class="fstyle"  onmouseout=" setblack('td5')">
                <td style="width: 715px" >
                    <a id="lnk5" href=''  onmouseover="setgray('td5');"
                      >LINK5</a> &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; 
                    <img  alt ="" src="Images/indicator.gif" /></td><td><img  alt="round" src="Images/indicator.gif" /><img  alt="round" src="Images/indicator.gif" /></td>
            </tr>
      
    </table>
    </td></tr></table>
</div>

THIS IS THE DIV THATS DISPLAYED ON MOUSEOVER OF <TR>

<div id="sub1"   style="position: absolute;width:600px;left: 200px;height:300px;top:241px; display:none; background-color:appworkspace;">
<P>TEST MATTER</P>

</DIV>

doubts
1) in the table i want to place <img alt ="" src="Images/indicator.gif" /> in a seperate <td> in the same <tr>, but if i do so its not visible

2) when mouseover suppose link2 color changes and div is displayed
but when mouseout of that link the <div> is displayed but color of that <tr> changes. i want it to remain

3)first when mouseover on link2 div is dispalyed i want that div to display message mouseon link2 if on link 3 then mouse on link3 and so on...

let me knw how can i acheive it or any better way do sugegst

[daulex]

1. Scrap everything.
2. Why do you have table elements in the formating of the page? Table elements are there to display large data tables, not to assist you with your layout. For the data that you have a combination of div + ul/li elements would be sufficient.
3. Stop trying to write up these small js codes for these basic little things, go spend an hour investigating jQuery and achieve whatever you need with just a few lines of code. If I understood what you want done correctly, here is an example of what you can achieve: go to http://sushihouse.eu/ and click on view map (bottom right). A small window will fade in. it's draggable and the x makes it fade away again. Now the code I used to achieve that effect is:

$(document).ready(function(){
	$("#mapbtn").click(function(){
		$("#mapwindow").fadeIn(2000);
	});
	$("#closemapbtn").click(function(){
		$("#mapwindow").fadeOut("slow");
	});
	$("#mapwindow").draggable();

what you will see is that I am using .click(function()... , you would be using .hover . Here is the events page from the jquery documentation.

[surekhavk]

1. Scrap everything.
2. Why do you have table elements in the formating of the page? Table elements are there to display large data tables, not to assist you with your layout. For the data that you have a combination of div + ul/li elements would be sufficient.
3. Stop trying to write up these small js codes for these basic little things, go spend an hour investigating jQuery and achieve whatever you need with just a few lines of code. If I understood what you want done correctly, here is an example of what you can achieve: go to http://sushihouse.eu/ and click on view map (bottom right). A small window will fade in. it's draggable and the x makes it fade away again. Now the code I used to achieve that effect is:

$(document).ready(function(){
	$("#mapbtn").click(function(){
		$("#mapwindow").fadeIn(2000);
	});
	$("#closemapbtn").click(function(){
		$("#mapwindow").fadeOut("slow");
	});
	$("#mapwindow").draggable();

what you will see is that I am using .click(function()... , you would be using .hover . Here is the events page from the jquery documentation.

gone thr' u r code but not able to achieve the desired effect

[daulex]

did you include the jquery library?