Як змусити людей натискати на ваші посилання

Як змінити колір посилання і фону посилання?

Це можна зробити за допомогою CSS, код буде виглядати так:

Результат роботи буде наступним (в коді ми можемо змінити колір самого тексту, колір фону, на якому написаний текст і ширину поля навколо тексту):

Клікнути по посиланню при наведенні курсору миші

Наводжу приклад створення посилання, але не текстом, як це традиційно, а кнопкою. Іноді потрібно виділити посилання серед тексту, красива кнопка - якраз до речі. Нам на допомогу прийде CSS:

Залишилося застосувати стиль на практиці. Це виглядає приблизно так:

Посилання картинкою

Аналогічний ефект прикрасити посилання за допомогою картинки можна досягти нижченаведених кодом. Зверніть увагу, ми будемо використовувати дві картинки on.gif і off.gif, вони змінюються в залежності від того, підвели до неї миша або прибрали миша:

Показати картинку при наведенні на посилання

Якщо вам знадобилося показати картинку при наведенні на посилання (в якості підказки, ілюстрації і т.д.), можна реалізувати подібне на чистому CSS:

Ось код для реалізації:

Картинка при наведенні миші на посилання

В результаті, при наведенні курсором на посилання, біля неї в спливаючому вікні з'явиться зазначена в настройках картинка.

Показати підказку при наведенні на посилання

Реалізуємо підказку при наведенні курсору миші на засланні за допомогою CSS коду:

tooltip border-bottom: 1px dotted # 000000; color: # 000000; outline: none;
cursor: help; text-decoration: none;
position: relative;
>
.tooltip span margin-left: -999em;
position: absolute;
>
.tooltip: hover span border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
box-shadow: 5px 5px 5px rgba (0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba (0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba (0, 0, 0, 0.1);
font-family: Calibri, Tahoma, Geneva, sans-serif;
position: absolute; left: 1em; top: 2em; z-index: 99;
margin-left: 0; width: 250px;
>
.tooltip: hover img border: 0; margin: -10px 0 0 -55px;
float: left; position: absolute;
>
.tooltip: hover em font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
display: block; padding: 0.2em 0 0.6em 0;
>
.classic
.custom
* Html a: hover
.classic

a.link, a.link: visited, a.link: hover color: # 000;
cursor: text;
text-decoration: none;
>

У HTML-коді сторінки пропіcивается:

текст посилання

Зашифрований анкор посилання

Код посилання можна оформити так само

При наведенні на таку посилання користувач побачить в рядку підказок »не реферальськой посилання", але якщо клацне на таке посилання, то його браузер перейде якраз на "реферальськой посилання".

Власне, це лише деякі популярні приклади зробити посилання на сайті виразними і розмітки. Головне - не перестаратися!

В'ячеслав Скоблей (ака files) - типовий интернетчик. Скитаюсь інтернетом, пишу на PHP, захоплююся створенням веб-сайтів на Wordpress, вирішую численні проблеми, які до появи інтернету не існували.

Спеціалізуюся на безпеки сайтів: захищаю сайти від атак і зломів, займаюся лікуванням вірусів на сайтах і профілактикою.

Напевно у Вас є питання, прохання чи побажання. Не соромтеся запитати, я відповідаю завжди швидко.

Пишіть, якщо виникли питання Сказати СПАСИБО!

Швидка зворотний зв'язок

4 відгуків про "Як змусити людей натискати на ваші посилання? "

ПОКАЗ КАРТИНКИ ПРИ наведенні на посилання ТАКИМ ЧИНОМ

Величезне спасибі, проведу експеримент.

Спасибі, цікава інформація, потрібно спробувати, але ось виникає питання, якщо припустимо виходити з мінімальних знань за таблицями стилів, в якій файл помістити ваші коди, умовно сайт працює на WordPress, в шаблон, single.php або в таблиці стилів? Дякуємо!

Стилі () в стилі (style.css). Можна і в тіло записи / сторінки, але для чистоти коду перший варіант кращий.