RSS-подписка

RSS-лента

Новые статьи

Последние комментарии


Получать обновления на эл. почту

Ваш e-mail:

Рассылка новостей от Loco

Замена текста при наведении на него мышью. События onmouseover и onmouseout

Замена текста при наведении на него мышью. События onmouseover и onmouseout Делаем подмену текста при наведении мышью.

Сам текст, который хотим заменить заключаем в тег span и у него прописываем вызов функции по событиям наведения на текст и отведения мыши с текста

<span onmouseover="changeText(this,'текст, на который заменяем')" onmouseout="changeText(this,'изначальный текст')">изначальный текст</a>


И теперь, чтобы этот код оживить, надо добавить функцию-скрипт changeText, её не надо в код страницы вставлять в редакторе - редактор будет его декодировать. Скрипты надо в шаблон вставлять - можно лучше в верх страницы в перед </head> или в самый низ тоже работает. Если кака-то CMS, то обычно есть макет страницы и блоки хедера и футера, вот туда и вставим этот скрипт. А ещё лучше в отдельный файл, где скрипты лежат именно для этого макета страницы у вас и который подключается к макету.

<script language="JavaScript">
 <!-- Begin
 function changeText(theTag,textto) {
  theTag.innerHTML=textto;
 }
 // End -->
</script>

Если хотим, чтобы указатель при наведении на текст показывался - стрелочка или рука - то в файл css можно добавить для всех таких span --> cursor: pointer;

Рабочий код в одном файле целиком

<html>
<head>
<script language="JavaScript">
    <!-- Begin
    function changeText(theTag,textto) {
        theTag.innerHTML=textto;
    }
    // End -->
</script>
</head>
<body>

<span style="cursor: pointer;" onmouseover="changeText(this,'текст, на который заменяем')" onmouseout="changeText(this,'изначальный текст')">изначальный текст</span>

</body>
</html>

 

Источник: loco.ru

almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.

Вы можете почитать все статьи от almix'а.



Другие статьи по этой теме:

Комментарии (0)     Подпишитесь на RSS комментариев к этой статье.