Замена текста при наведении на него мышью. События 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>
almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.
Вы можете почитать все статьи от almix'а.
- 0 Yii: Bootstrap tabs, делаем активной вкладку на которую выполняется переход по ссылке (20.03.2014)
- 0 CodeIgniter: Всплывающая форма обратной связи на Ajax в Bootstrap Modal и проверкой Captcha (18.02.2014)
- 0 Opencart: Модуль Filter Product OpenCart_v1.5.x: Как скрывать недоступные опции в фильтре (23.10.2013)
- 0 Twitter Bootstrap Carousel Crossfade (09.09.2013)
- 0 Inline-block vs float (22.08.2013)
- 0 DHTMLX: Фильтрация в колонке типа Subgrid, вложенной в Grid (05.08.2013)
- 0 Список li в две колонки (CSS) (13.03.2013)
- 0 WordPress: Добавить ссылку "Сохранить фото" для галереи на NextGen с эффектом Lightbox (12.04.2013)
- Flip-вращалка на css. Эффект кручения карточки на обратную сторону (25.10.2018)
- Выравниваем div по-центру другого div в меню Bootstrap (12.10.2018)
- Плавная прокрутка на странице (Bootstrap JS Scrollspy) (12.10.2018)
- Настраиваем красивое меню типа гамбургер на мобильных, используя плагин mmenu. На примере 1С-Битрикс (04.02.2018)
- Выдвигающаяся из значка форма поиска на сайте (27.11.2017)
- Выравниваем div внутри другого div по центру (27.11.2017)
- Пробелы между пунктами меню (16.11.2017)
- Как убрать placeholder при клике по input (04.11.2017)
- Свой дизайн кнопок социальных сетей для сайта. Кнопки "Поделиться" (19.06.2017)
- Выравнивание изображения по центру в Bootstrap (11.12.2016)
- Загрузка файлов (картинок) по ajax через форму для Opencart (04.09.2016)
- Замена текста при наведении на него мышью. События onmouseover и onmouseout (25.03.2016) ← вы тут
- Прилипание блока к верху сайта при его прокручивании (17.02.2016)
- Как сделать какую-либо область на сайте кликабельной ссылкой? (11.08.2015)
- Красивое выравнивание характеристик на странице товара с отступами, отмеченными точками (11.07.2015)
- Разделитель тысяч в эффекте наматываемого счётчика jquery countTo (05.04.2015)
- Сделать слайдер на Owl Carousel c текстом справа (03.02.2015)
RSS комментариев к этой статье.
