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 Link to comment https://forums.phpfreaks.com/topic/126420-javascript-onmouseover-innerhtml/ 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. Link to comment https://forums.phpfreaks.com/topic/126420-javascript-onmouseover-innerhtml/#findComment-653782 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. Link to comment https://forums.phpfreaks.com/topic/126420-javascript-onmouseover-innerhtml/#findComment-653834 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> Link to comment https://forums.phpfreaks.com/topic/126420-javascript-onmouseover-innerhtml/#findComment-654322 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.