Фоновое выделение ссылки с помощью JavaScripts
Сегодня продолжу начатое в предыдущей статье рассказывающей о простом способе подсветки активной ссылки с помощью Javascript.
В этой статье расскажу, как добиться эффекта выделения активной ссылки различными оттенками цветовой палитры.
Используйте этот отличный сценарий для добавления эффекта освещения, с возможностью изменения цвета подсветки для каждой ссылки. Эффект полностью настраиваемый. Прекрасный способ добавить акцент в частности на ссылки присутствующие на вашем сайте!
16.12.2016 : Информацию в статье можно считать безнадёжно устаревшей. Сейчас всё это делается элементарно на чистом CSS. Но тем кого по-прежнему вставляет javascript по любому поводу, статья может пригодится ))).
Для начала, как всегда смотрим пример работы скрипта:
Rabotaem Net — Возможности заработка
Все что нам понадобится это сам небольшой скрипт и конечно правильный ввод оформленной ссылки в HTML-код вашей страницы.
И так, для реализации эффекта в тело страницы, перед закрывающим тегом </body>прописываем исполняющий javascript:
<script> function highlight(which,color){ if (document.all||document.getElementById) which.style.backgroundColor=color } </script> |
Ну и чтобы оформить саму ссылку нам понадобиться не очень хитрый сценарий, типа:
Ваша ссылка с подсветкой |
Фон подсветки настраивается проще-простого, в строке onMouseover=highlight<u>(this,'#6CFFFF') меняете цветовой код на свой и любуетесь результатом.
На этом все! По моему дешево и сердито, ничего лишнего и внимание пользователей обязательно будет привлечено с помощью такого эффекта.
Удачи в начинаниях!
Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:
Как сделать чтоб кнопка меню была выделена когда я нахожусь на странице к примеру:
index.php = Главная // была выделена, а все остальные нет
index2.php = Галерея // стала выделенной, а все остальные нет
index3.php = Программы // стала выделенной, а все остальные нет
и так.дал…….?
Вот у Вас такое реализовано в верхнем меню.
Заранее благодарен за ответ
Оформление меню происходит через стили .css шаблона, найдите блок отвечающий за вывод меню, это чаще nav, menu или что то в этом роде. Создаете новый класс для вашего списка li,li a, li a:visited (чаще в форме списка структура) обзываете его например .active или .current page, все от фантазии зависит, и уже в этом классе экспериментируя с параметрами background:, color: и другими, добиваетесь желаемого. В общем и целом и если в двух словах это примерно так, а глубже для каждого шаблона индивидуально, есть структура меню, вот от нее и пляшите. В итоге на странице html или в файле шаблона header.php список меню, начальный пункт, прописываете с классом .active или .current page,примерно так:
<li class="active"><a href="#" rel="nofollow">Главная</a></li>Извините но я не черта не понял. куда и как создавать .active или .current page
У меня вот такой блок:……..
<li><a href="?page=overview">{$lm_overview}</a><&li>
<li><a href="?page=imperium">{$lm_empire}</a></li>
<li><a href="?page=galaxy">{$lm_galaxy}</a></li>
<li><a href="?page=fleet">{$lm_fleet}</a></li>
Это кусок ссылок только.
Вот как, куда и что добавлять чтоб работало.
Извините но я не черта не понял. куда и как создавать .active или .current page
Сергей. Вы мне ссылку на свой сайт пропишите в коменте, я на месте разберусь и отпишусь Вам по почте, а так нам не хватит ни сил не времени. Можете через контактную форму адрес своего сайта забить, если светить не желаете.
driver
Это игровой сайт чтоб увидеть меню надо зарегистрироваться.
Сергей
Сайт Ваш посмотрел, пример кода для меню и скрин отправил вам на мыло, получилось даже два письма, Gmail и черновик к вам отослал, бывает и такое 🙂
Я сделал все таки меню по Вашем советам и урокам.
Спасибо ОГРОМНОЕ за помощь!!!
Я просто думал что есть скрипт какой нибудь для меню и не придется мне в каждую страницу запихивать меню но оказалось что нет, но мне и так нравится.
Спасибо ещё раз можете зайти и за ценить как сделал.
А что если выделить ссылку просто Css-кодом.
a:hover{
background:#000000;
font-size:12px;
color:#e1e6ec;
}
Таким оброзом, при наведении на ссылку,она будет в чёрном фоне.
У меня сайт на вордпресе…не знаю куда мне вписать код между тегами head…Где они?
Захожу внешний вид-редактор и сбоку там шаблоны страниц моей темы…какую выбирать?
Ильдар
Теги
head, находятся в файле header.php вверху, размещаете javascript перед закрывающим тегом /head, так же можете прописать скрипт в footer.php перед тегом</body>А лучше всего, если вам необходимо оформить выделение фона сразу у всех ссылок определенным цветом, делать это средствами CSS в файле стилей темы style.css.
А лучше всего, если вам необходимо оформить выделение фона сразу у всех ссылок определенным цветом, делать это средствами CSS в файле стилей темы style.css.
Это предпочтительнее конечно…Но мне хотелось бы чтобы выделялся фон ссылок в постах только…а все остальные ссылки как обычно…такое тоже возможно?
Конечно возможно.
Учитывая структуру вашего шаблона можно сформировать внешний вид ссылок внутри блока div с классом
entry.У вас ссылки с подчеркиванием и красного цвета, если вам нужно изменить фон или цвет текста при наведении у ссылок в записях, в style.css необходимо добавить следующее:
.entry a:hover {
background: #009106;
color: #fff;
text-decoration: none;
}
В этом случае при наведении на ссылку в записи, фон будет зелёным а цвет текста ссылки белый, подчёркивания не будет. Как вы понимаете это только пример, как вы разукрасите ссылки, всё зависит от вашей фантазии. А вообще то не мешало бы вам этот минимум изучить, так как стандартная и не самая трудная функция породила у вас столько вопросов.
PS: Не моё дело конечно, но ссылки у вас гармонично смотрятся и в записях и в отдельных блоках, выражены достаточно для того чтобы из заметили