Изменение текста ссылки
Изменение теста ссылки очень похоже на изменение цвета ссылки в Internet
Explorer 4.0. С помоцью Netscape Navigator-а достаточно тяжело после
загрузки изменять произвольно расположенный текст, поэтому этот
браузер не будет рассмотрен в этой части статьи.
Динамическое изменение кода HTML после загрузки очень просто в Internet
Explorer-e 4.0. Для этого надо адресовать нужный HTML-элемент и
присвоить новый код его свойству innerHTML. Если вам нужно поменять
просто текст, без тэгов, лучше использовать свойство innerText. Более
подробная информация - в следующей статье, "Dynamic Content in IE4".
Следующий сегмент кода меняет тест ссылки когда пользователь помещает
указатель мыши на неё:
<A HREF="http://www.microsoft.com/">
<FONT onMouseOver="this.innerHTML = 'The Software Tycoon'"
onMouseOut="this.innerHTML = 'Microsoft'">Microsoft</FONT></A>
В результате ссылка работает вот так : Microsoft . В Netscape
Navigator и других браузерах, не поддерживающих подобных
возможностей, эта ссылка работает как совершенно обычная. Однако
стоит помнить, что Internet Explorer динамически переформатирует тест, т.к.
одна из надписей, Microsoft, короче другой, The Software Tycoon.
Однако, если ссылка не будет окружена тестом и(или) изображениями,
динамического переформатирования, которое может достаточно
нервирующе воздействовать на просматривающих вашу страницу, не
потребуется.
Однако, альтернативный текст (в данном случае "The Software Tycoon") должен быть длиннее исходного. В противном случае, если эта надпись
короче, как только пользователь помещает указатель мыши на текст,
срабатывает хэндлер onMouseOver и текст меняется на новый. Однако,
поскольку активная область “уезжает” из под мыши и очень вероятно, что
указатель мыши уже не на тексте и срабатывает хэндлер onMouseOut,
возвращая исхдный текст, при этом указатель мыши опять оказывается на
тексте - и как результат, эта надпись будет мигать. Вот пример :
Microsoft Corporation
Если просмотр ведется с помощью Internet Explorer 4.0+ - подойдите
указателем мыши с левого края надписи - и увидите, что всё прекрасно
работает. Но если подойдете правого края - тут возникнут проблемы.
В предыдущей части мы изменяли цвет ссылки при подведении к ней.
Используя материал этой части, мы можем комбинировать код, меняя при
подведении указателя мыши не только цвет, но и саму надпись - что
выглядит гораздо более привлекательным. Код для такого случая таков :
<A HREF="http://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>
В результате получаем :
Microsoft
