Как сделать чтобы при наведении на картинку картинка менялась

Как сделать чтобы при наведении на картинку картинка менялась 131

Автор: ARKSEO

подсветка картинки на cssподсветка картинки

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

Так вот, часто у меня в начале, когда я еще не плотно работал со стилями и не использовал DIV верстку (предпочитал таблицы) возникало, как бы сказать, не понимание, как ссылки, на какую-то внутреннюю страницу или другой сайт, сделать в виде кнопки.
Я для этого находил какую-то кнопку на CSS через Гугл и добавлял ее к себе на сайт. Сейчас, когда я более подробно начал изучать CSS и верстку DIV-ами, пришло понимание того, что на самом деле все очень просто.
Сейчас я хочу показать несколько способов подсветить картинку или превратить простую ссылку в кнопку.

Допустим вы нашли где-то обычную картинку и хотите ее использовать как кнопку на странице.
Вот допустим такая картинка:

кнопка бабло

Добавить ее на страницу очень просто. Если закинуть ее в корень сайта, то код такой:

<img src="/knopka_bablo.png" alt="кнопка бабло" title="кнопка бабло" width="100" height="100"/>

Сделать ее ссылкой тоже просто, достаточно обернуть код в тег ссылки

<a href="#ссылка"><img title="кнопка бабло" src="/knopka_bablo.png" alt="кнопка бабло" width="100" height="100" /></a>

 

Результат простой картинки с ссылкой без подсветки:
 кнопка бабло

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

Первое что вам нужно – это сделать еще одну картинку другого цвета или более светлую (темную) и подставлять ее при наведении курсора.

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

Например, картинку, которая выше я открыл через Microsoft Office Picture Manager, сделал ее почти черно-белой и сохранил под именем knopka_bablo-1.png. Получилось две картинки (заливаем их на хостинг; в данном случае залито в корень сайта):
кнопка баблокнопка бабло

Сейчас для того, чтобы при наведении курсора мыши картинка менялась с черно-белой на цветную, используем следующий код в тексте статьи или шаблоне сайта:

<a href="#ссылка"><img title="кнопка бабло" onmouseover="this.src='/knopka_bablo.png ';" onmouseout="this.src='/knopka_bablo-1.png ';" src="/knopka_bablo-1.png " alt="кнопка бабло" /></a>

 

А вот результат (наведите курсор):
кнопка бабло

Можно сделать и по-другому. В таблицу стилей CSS (обычно файл style.css вашего шаблона) добавить код, при этом имя идентификатора можно придумать любое, в маем случае img-bablo:

#img-bablo a {background-image: url('/knopka_bablo-1.png'); width:100px; height:100px;display: block;} / картинка сразу / #img-bablo a:hover {background-image: url('/knopka_bablo.png');} / картинка при наведении курсора /

А нашу ссылку обернуть в тег div с нужным идентификатором (попросту, код ниже вставить в то место, где нужно показать картинку):

<div id="img-bablo"><a href="http://seodnevnik.ru/zarabatyvayu-zdes"></a></div>

 

Результат получаем тот же (наведите курсор)


Как сделать чтобы при наведении на картинку картинка менялась 692


Как сделать чтобы при наведении на картинку картинка менялась 166


Как сделать чтобы при наведении на картинку картинка менялась 772


Как сделать чтобы при наведении на картинку картинка менялась 984


Как сделать чтобы при наведении на картинку картинка менялась 916


Как сделать чтобы при наведении на картинку картинка менялась 370


Как сделать чтобы при наведении на картинку картинка менялась 110


Как сделать чтобы при наведении на картинку картинка менялась 547


Как сделать чтобы при наведении на картинку картинка менялась 857


Как сделать чтобы при наведении на картинку картинка менялась 118


Как сделать чтобы при наведении на картинку картинка менялась 114


Как сделать чтобы при наведении на картинку картинка менялась 293


Как сделать чтобы при наведении на картинку картинка менялась 980


Как сделать чтобы при наведении на картинку картинка менялась 966


Как сделать чтобы при наведении на картинку картинка менялась 215


Как сделать чтобы при наведении на картинку картинка менялась 662


Как сделать чтобы при наведении на картинку картинка менялась 435


Как сделать чтобы при наведении на картинку картинка менялась 768


Как сделать чтобы при наведении на картинку картинка менялась 329


Читать далее:

  • Чем мазать после ожога в домашних условиях
  • Поздравления с днем свадьбы по кавказскому
  • Рецепт шоколада в домашних условиях с фото пошагово
  • Фильтра для обсадных труб своими руками
  • Как сделать чтоб человек разлюбил меня