Text Rollovers: Changing a Link's Text - Doc JavaScript

Changing a Link's Text

Changing a link's text (its content) is much like changing its color in Internet Explorer 4.0. Netscape Navigator 4.0x cannot update relatively-positioned text very well, so we will not deal with this browser in this page.

Modifying HTML code dynamically (after the page has loaded) is fairly simple with Internet Explorer 4.0. You need to address the desired HTML element, and assign the new code to its innerHTML property. Feel free to use innerText if you only want to print plain text, with no tags. For more information on both of these tags, read Webreference's DHTML Lab "Dynamic Content in IE4" column.

The following code segment creates a link that dynamically changes when the user passes the mouse pointer over it:

<A HREF="https://www.microsoft.com/">
<FONT onMouseOver="this.innerHTML = 'The Software Tycoon'"
      onMouseOut="this.innerHTML = 'Microsoft'">Microsoft</FONT></A>

The result of the preceding definition is this link: Microsoft. It acts as a normal link in Navigator 4.0x, and in any other browser that does not support the above features. Notice how Explorer automatically reformats the paragraph due to the additional text ("The Software Tycoon" is longer than "Microsoft"). If your link is not surrounded by text (and images), the browser will not need to perform this reformatting, which may seem annoying at a first glance.

Be aware that the alternative text ("The Software Tycoon" in our example) should be longer than the default text. If it were shorter, and the user placed the mouse over the right-hand side of the link, the onMouseOver handler would fire, and the new text would appear. However, since the new text is shorter than the original one, the link is obviously shorter, so the mouse pointer is no longer located over the link. Therefore, an onMouseOut event handler is immediately fired, and so forth. The result would be a very distracting, flashing link. Here's an example:

Microsoft Corporation

If you're running Internet Explorer 4.0, pass the pointer over the left-hand side of the link. It should work fine. Now pass it over the right-hand side, and you'll notice the problem.

In the previous section we showed you how to change a link's color when the user points at it. You can combine both of these effects, if you like, to create an even more interesting one. The following code segment demonstrates this idea:

<A HREF="https://www.microsoft.com/">
<FONT COLOR="#0000ff"
      onMouseOver="this.innerHTML = 'The Software Tycoon';
                   this.style.color = '#ff0000';"
      onMouseOut="this.innerHTML = 'Microsoft';
                  this.style.color = '#0000ff';">Microsoft</FONT></A>

Finally, take a look at the result:

Microsoft

Created: October 9, 1997
Revised: December 4, 1997
URL: https://www.webreference.com/js/column4/text.html