Dobrovoi Master
сделано с душой
В состоянии постоянного подключения...

Фоновое выделение ссылки с помощью JavaScripts

Фоновое выделение ссылки с помощью JavaScripts

Сегодня продолжу начатое в предыдущей статье рассказывающей о простом способе подсветки активной ссылки с помощью .
В этой статье расскажу, как добиться эффекта выделения активной ссылки различными оттенками цветовой палитры.
Используйте этот отличный сценарий для добавления эффекта освещения, с возможностью изменения цвета подсветки для каждой ссылки. Эффект полностью настраиваемый. Прекрасный способ добавить акцент в частности на ссылки присутствующие на вашем сайте!
 
16.12.2016 : Информацию в статье можно считать безнадёжно устаревшей. Сейчас всё это делается элементарно на чистом CSS. Но тем кого по-прежнему вставляет javascript по любому поводу, статья может пригодится ))).
 
Для начала, как всегда смотрим пример работы скрипта:
 

Dobrovoi Navigator

Rabotaem Net — Возможности заработка

Надежный софт

Java-scripts.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 и поделитесь ссылкой на запись в своих соц-сетях:

Всего комментариев: 12

  • Сергей: 23 сентября, 2010 в 01:53

    Как сделать чтоб кнопка меню была выделена когда я нахожусь на странице к примеру:
    index.php = Главная // была выделена, а все остальные нет
    index2.php = Галерея // стала выделенной, а все остальные нет
    index3.php = Программы // стала выделенной, а все остальные нет
    и так.дал…….?
    Вот у Вас такое реализовано в верхнем меню.
    Заранее благодарен за ответ

    Ответить
    • driver: 23 сентября, 2010 в 11:33

      Оформление меню происходит через стили .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>

      Ответить
  • Сергей: 23 сентября, 2010 в 21:13

    Извините но я не черта не понял. куда и как создавать .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>

    Это кусок ссылок только.
    Вот как, куда и что добавлять чтоб работало.

    Ответить
    • driver: 24 сентября, 2010 в 01:21

      Извините но я не черта не понял. куда и как создавать .active или .current page
      Сергей. Вы мне ссылку на свой сайт пропишите в коменте, я на месте разберусь и отпишусь Вам по почте, а так нам не хватит ни сил не времени. Можете через контактную форму адрес своего сайта забить, если светить не желаете.

      Ответить
  • Сергей: 24 сентября, 2010 в 10:11

    driver
    Это игровой сайт чтоб увидеть меню надо зарегистрироваться.

    Ответить
    • driver: 24 сентября, 2010 в 16:18

      Сергей
      Сайт Ваш посмотрел, пример кода для меню и скрин отправил вам на мыло, получилось даже два письма, Gmail и черновик к вам отослал, бывает и такое 🙂

      Ответить
  • Сергей: 1 октября, 2010 в 17:35

    Я сделал все таки меню по Вашем советам и урокам.
    Спасибо ОГРОМНОЕ за помощь!!!
    Я просто думал что есть скрипт какой нибудь для меню и не придется мне в каждую страницу запихивать меню но оказалось что нет, но мне и так нравится.
    Спасибо ещё раз можете зайти и за ценить как сделал.

    Ответить
  • evgeniy: 2 октября, 2010 в 10:45

    А что если выделить ссылку просто Css-кодом.
    a:hover{
    background:#000000;
    font-size:12px;
    color:#e1e6ec;
    }
    Таким оброзом, при наведении на ссылку,она будет в чёрном фоне.

    Ответить
  • Ильдар: 2 февраля, 2014 в 01:49

    У меня сайт на вордпресе…не знаю куда мне вписать код между тегами head…Где они?
    Захожу внешний вид-редактор и сбоку там шаблоны страниц моей темы…какую выбирать?

    Ответить
    • driver: 2 февраля, 2014 в 13:27

      Ильдар
      Теги head, находятся в файле header.php вверху, размещаете javascript перед закрывающим тегом /head, так же можете прописать скрипт в footer.php перед тегом </body>
      А лучше всего, если вам необходимо оформить выделение фона сразу у всех ссылок определенным цветом, делать это средствами CSS в файле стилей темы style.css.

      Ответить
  • Ильдар: 2 февраля, 2014 в 14:49

    А лучше всего, если вам необходимо оформить выделение фона сразу у всех ссылок определенным цветом, делать это средствами CSS в файле стилей темы style.css.

    Это предпочтительнее конечно…Но мне хотелось бы чтобы выделялся фон ссылок в постах только…а все остальные ссылки как обычно…такое тоже возможно?

    Ответить
    • driver: 2 февраля, 2014 в 16:18

      Конечно возможно.
      Учитывая структуру вашего шаблона можно сформировать внешний вид ссылок внутри блока div с классом entry.
      У вас ссылки с подчеркиванием и красного цвета, если вам нужно изменить фон или цвет текста при наведении у ссылок в записях, в style.css необходимо добавить следующее:

      .entry a:hover {
      background: #009106;
      color: #fff;
      text-decoration: none;
      }
      В этом случае при наведении на ссылку в записи, фон будет зелёным а цвет текста ссылки белый, подчёркивания не будет. Как вы понимаете это только пример, как вы разукрасите ссылки, всё зависит от вашей фантазии. А вообще то не мешало бы вам этот минимум изучить, так как стандартная и не самая трудная функция породила у вас столько вопросов.
      PS: Не моё дело конечно, но ссылки у вас гармонично смотрятся и в записях и в отдельных блоках, выражены достаточно для того чтобы из заметили

      Ответить

Оставить комментарий

Ваш email не будет опубликован.

Вы можете использовать следующие HTML тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>