Jesper Posted September 30, 2008 Share Posted September 30, 2008 Hey everyone, In something I'm programming, I have a table cell that I basically want to change it's text from "100" to "<a href="#">check</a>", and then onMouseOut change it back. This, however, makes the text flashing from 100 to check (as a link). It is because check is in a tag (the <a> tag) inside the <td> tag, so when I hover over the link, it doesn't see it as hovering over the table cell. Does anyone know how to fix this? Thanks in advance, Jesper Quote Link to comment Share on other sites More sharing options...
Psycho Posted September 30, 2008 Share Posted September 30, 2008 Showing the code of what you have so far would be helpful. Quote Link to comment Share on other sites More sharing options...
Jesper Posted September 30, 2008 Author Share Posted September 30, 2008 Yeah, sure : function vak_handle(vak_id,actie,vorige) { element=document.getElementById(vak_id); if (actie==0) { element.style.color="black"; element.innerHTML="<a href='#'>Link1</a><br/><a href='#'>Link2</a>"; element.className="kalender_vak_hover"; } if (actie==1) { element.style.color="white"; element.innerHTML=vorige; element.className="kalender_dag_van_maand"; } } Where vak_id is the ID of the cell, actie is wether onmouseover or onmouseout, and vorige is the previous innerHTML, so to set it back. Quote Link to comment Share on other sites More sharing options...
Psycho Posted September 30, 2008 Share Posted September 30, 2008 Hmm, ok after a little trial and error I found a solution. Just put BOTH the text and the link in the table cell and alternate their display states so only one is displayed at a time. Example script <html> <head> <style> .kalender_vak_hover { background-color:#ffffff; } .kalender_dag_van_maand { background-color:#000000; } </style> <script type="text/javascript"> function vak_handle(actie, vak_obj) { document.getElementById(vak_obj.id+'-text').style.display = (actie)?'none':''; document.getElementById(vak_obj.id+'-link').style.display = (actie)?'':'none'; vak_obj.style.color = (actie) ? '#000000' : '#ffffff'; vak_obj.className = (actie) ? 'kalender_vak_hover' : 'kalender_dag_van_maand'; } </script> </head> <body> <table border="1"> <tr> <td id="cell1" onmouseover="vak_handle(true, this);" onmouseout="vak_handle(false, this);" style="color:#ffffff;" class="kalender_dag_van_maand"> <span id="cell1-text"> 100 </span> <span id="cell1-link" style="display:none;"><a href="#">Link1</a></span> </td> <td id="cell2" onmouseover="vak_handle(true, this);" onmouseout="vak_handle(false, this);" style="color:#ffffff;" class="kalender_dag_van_maand"> <span id="cell2-text"> 200 </span> <span id="cell2-link" style="display:none;"><a href="#">Link2</a></span> </td> </tr> </table> </body> </html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.