faqts : Computers : Programming : Languages : JavaScript : DHTML

+ Search
Add Entry AlertManage Folder Edit Entry Add page to http://del.icio.us/
Did You Find This Entry Useful?

22 of 28 people (79%) answered Yes
Recently 6 of 10 people (60%) answered Yes

Entry

How to make a text bold onmouseover?

May 4th, 2000 05:40
Martin Honnen,


With NN4 you need to absolutely position your element to achieve that, 
NN6 and IE4+ can change the style on every element:

<HTML>
<HEAD>
<STYLE>
#aLayer { position: absolute; }
</STYLE>
<SCRIPT>
function highlight (id, yes, content) {
  if (yes) {
    if (document.all)
      document.all[id].style.fontWeight = 'bold';
    else if (document.getElementById)
      document.getElementById(id).style.fontWeight = 'bold';
    else if (document.layers) {
      var ld = document[id].document;
      ld.open();
      ld.write('<B>' + content + '<\/B>');
      ld.close();
    }
  }
  else {
    if (document.all)
      document.all[id].style.fontWeight = 'normal';
    else if (document.getElementById)
      document.getElementById(id).style.fontWeight = 'normal';
    else if (document.layers) {
      var ld = document[id].document;
      ld.open();
      ld.write(content);
      ld.close();
    }
  }
}
function initEventHandling () {
  if (document.layers) {
    document.aLayer.onmouseover = 
      function () { highlight (this.id, true, 'Kibology for all.'); };
    document.aLayer.onmouseout =
      function () { highlight (this.id, false, 'Kibology for all.'); };
  }
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="initEventHandling();">
<DIV ID="aLayer" 
     ONMOUSEOVER="highlight(this.id, true)"
     ONMOUSEOUT="highlight(this.id, false)"
>
Kibology for all.
</DIV>
</BODY>
</HTML>

See also
http://www.faqts.com/knowledge-base/view.phtml/aid/1619/fid/128/lang/en
for a more sophisticated solution.