Member Avatar for 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

  • 2 Contributors
  • 3 Replies
  • 137 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by daulex

Dani AI

Generated

A concise plan to fix the three issues raised by and to avoid brittle techniques shown earlier:

  • Stop relying on implicit globals like sub1 and on inline onmouseover/onmouseout. Use CSS classes for the visual state and attach event listeners in script. Use a real color (hex or standard name) instead of legacy system names like appworkspace. Keep the popup element managed explicitly with document.getElementById(...).

  • Make the popup appear for the row being hovered, keep the row highlighted while the pointer moves into the popup, and hide everything only when the pointer leaves both. Use a per-row data attribute for the message so the popup shows “mouse on link2”, etc.

Example (CSS + plain JS — not jQuery):

/* add to your stylesheet */
.row-highlight { background: #eee; }
.popup { display: none; position: absolute; background: #fff; border: 1px solid #ccc; padding: 8px; z-index: 1000; }
// plain JS pattern: attach once, use dataset for message
const popup = document.getElementById('sub1');

document.querySelectorAll('#table1 tr').forEach(row => {
  row.addEventListener('mouseenter', () => {
    row.classList.add('row-highlight');
    popup.textContent = row.dataset.msg || row.querySelector('a').textContent;
    const r = row.getBoundingClientRect();
    popup.style.left = (window.scrollX + r.right + 8) + 'px';
    popup.style.top  = (window.scrollY + r.top) + 'px';
    popup.style.display = 'block';
  });

  row.addEventListener('mouseleave', e => {
    const to = e.relatedTarget;
    if (!to || !popup.contains(to)) {
      row.classList.remove('row-highlight');
      popup.style.display = 'none';
    } else {
      // if pointer moved into popup, hide when it leaves popup back to outside
      const onLeave = ev => {
        if (!row.contains(ev.relatedTarget)) {
          row.classList.remove('row-highlight');
          popup.style.display = 'none';
          popup.removeEventListener('mouseleave', onLeave);
        }
      };
      popup.addEventListener('mouseleave', onLeave);
    }
  });
});
  • For the invisible image: ensure every table row has the same number of cells or use colspan to keep columns consistent; check image path, check parent overflow/z-index and that table widths (150%) are not pushing cells off-screen. Use DevTools to inspect computed layout. As mentioned, a library like jQuery can shorten the code, but the above pattern works reliably without external libraries. For details on relatedTarget and positioning, see MDN: MouseEvent.relatedTarget and Element.getBoundingClientRect.

Recommended Answers

All 3 Replies

Member Avatar for 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 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.

Member Avatar for 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 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

Member Avatar for daulex

did you include the jquery library?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.