Главная » Javascript » Фоновое выделение ссылки с помощью JavaScripts

Фоновое выделение ссылки с помощью 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>

 
Ну и чтобы оформить саму ссылку нам понадобиться не очень хитрый сценарий, типа:
 

<a href="http://ursite.ru/" onMouseover=highlight(this,'#6CFFFF') onMouseout="highlight(this,document.bgColor)">Ваша ссылка с подсветкой</a>

 
Фон подсветки настраивается проще-простого, в строке onMouseover=highlight<u>(this,'#6CFFFF') меняете цветовой код на свой и любуетесь результатом.

На этом все! По моему дешево и сердито, ничего лишнего и внимание пользователей обязательно будет привлечено с помощью такого эффекта.

Удачи в начинаниях!

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

12 комментариев
  1. Сергей:

    Как сделать чтоб кнопка меню была выделена когда я нахожусь на странице к примеру:

    index.php = Главная // была выделена, а все остальные нет

    index2.php = Галерея // стала выделенной, а все остальные нет

    index3.php = Программы // стала выделенной, а все остальные нет

    и так.дал.......?

    Вот у Вас такое реализовано в верхнем меню.

    Заранее благодарен за ответ

    Ответить
    • driver:

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

      Ответить
  2. Сергей:

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

      Извините но я не черта не понял. куда и как создавать .active или .current page

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

      Ответить
  3. Сергей:

    driver

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

    Ответить
    • driver:

      Сергей

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

      Ответить
  4. Я сделал все таки меню по Вашем советам и урокам.

    Спасибо ОГРОМНОЕ за помощь!!!

    Я просто думал что есть скрипт какой нибудь для меню и не придется мне в каждую страницу запихивать меню но оказалось что нет, но мне и так нравится.

    Спасибо ещё раз можете зайти и за ценить как сделал.

    Ответить
  5. evgeniy:

    А что если выделить ссылку просто Css-кодом.

    a:hover{

    background:#000000;

    font-size:12px;

    color:#e1e6ec;

    }

    Таким оброзом, при наведении на ссылку,она будет в чёрном фоне.

    Ответить
  6. У меня сайт на вордпресе...не знаю куда мне вписать код между тегами head...Где они?

    Захожу внешний вид-редактор и сбоку там шаблоны страниц моей темы...какую выбирать?

    Ответить
    • driver:

      Ильдар

      Теги head, находятся в файле header.php вверху, размещаете javascript перед закрывающим тегом /head, так же можете прописать скрипт в footer.php перед тегом </body>

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

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

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

    Ответить
    • driver:

      Конечно возможно.

      Учитывая структуру вашего шаблона можно сформировать внешний вид ссылок внутри блока div с классом entry.

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

      .entry a:hover {
      background: #009106; 
      color: #fff; 
      text-decoration: none;
      }

      В этом случае при наведении на ссылку в записи, фон будет зелёным а цвет текста ссылки белый, подчёркивания не будет. Как вы понимаете это только пример, как вы разукрасите ссылки, всё зависит от вашей фантазии. А вообще то не мешало бы вам этот минимум изучить, так как стандартная и не самая трудная функция породила у вас столько вопросов.

      PS: Не моё дело конечно, но ссылки у вас гармонично смотрятся и в записях и в отдельных блоках, выражены достаточно для того чтобы из заметили

      Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru