Вы создали сайт и хотите указать на нём свои контакты для связи: адрес, телефоны и адрес электронной почты email.
Через некоторое время, все ваши контакты попадут в руки спамеров, они будут присылать спам вам на электронную почту, а еще хуже звонить с различными коммерческими предложениями.
Как можно от этого защититься?
В этой статье я предложу Вам оригинальный способ защиты.
Спам-боты используют обычные регулярные выражения (regular expession) в своей работе, чтобы распознавать адрес электронной почты на вашем сайте, если адрес опубликован в виде обычного текста, но вы можете обмануть ботов, скрыв ваш адрес электронной почты с помощью простых CSS и JavaScript методов. Также можно вместо адресов размещать на сайте картинки их обозначением.
Я предлагаю совместить два эти варианта.
Как это работает.
При первом заходе на сайт посетитель в место ссылки на телефон или адрес электронной почты видит их изображение.
Когда он кликает по нему, ссылка становиться активной и при повторном клике открывается программа для отправки электронной почты или для телефонного звонка.
Посмотреть пример работы можно на сайте Мастер Ok — Комплекс ремонтных услуг в Нижнем Новгороде
Как же это сделать?
В самом начале вам нужно подготовить небольшие картинки с изображением номера телефона и адресом электронной почты e-mail.
На 90% современных сайтов используется язык JavaScript, а в частности библиотека jQuery.
Для этого нужно в коде страницы найти строку с подключением данной библиотеки:
<script src="jquery/jquery.min.js"></script>
Она должна быть подобного вида, можно поискать сроку jquery.
Мы создаем дополнительный JavaScript-файл следующего вида:
$('#nashemail').click(function() {
$('#nashemail').html('<a href="mailto:ваш@email">ваш@email</a>');
});
$('#nashphone1').click(function() {
$('#nashphone1').html('<a href="tel:номер_телефона">номер_телефона</a>');
});
Здесь #nashemail — id элемента с изображением адреса электронной почты e-mail,
#nashphone1 — id элемента с изображением номера телефона.
А на саму страницу в то место, где должны быть контакты добавляем код:
<div id="nashemail"><img class="img-fluid" src="img/email-remont.jpg" title = "Наш email - кликните два раза" alt="Наш email - кликните два раза"></div>
и
<div id="nashphone1"><img class="img-fluid" src="img/phone1-remont.jpg" title = "Наш первый телефон - кликните два раза" alt="Наш первый телефон - кликните два раза"></div>
Файл JavaScript подключаем к данной странице такой строкой:
<script src="code/js/nashicontakts.js"></script>
Вот и всё.
Если библиотека jQuery не используется, то можно записать файл nashicontakts.js на обычном JavaScript:
document.getElementById('nashemail').onclick = function() {
document.getElementById('nashemail').innerHTML='<a href="mailto:ваш@email">ваш@email</a>';
}
document.getElementById('nashphone1').onclick = function() {
document.getElementById('nashphone1').innerHTML='<a href="tel:номер_телефона">номер_телефона</a>';
}
Используйте данный метод для борьбы со спамом.
Пишите в комментариях, что у Вас получилось.
