Jump to content
  • 0

3 картинки, как смастерить?


Quest182
 Share

Question

В общем нужно, чтобы в картинке была кнопка(картинка)-ссылка, которая при наведении+нажатии осветлялась. В интернете нашёл только вариант с бэкграундом. Получается основная картинка должна быть бэкграундом, а остальные 2(затемнённая и осветлённая) я не знаю как прилепить. Ещё эта кнопка должна находится в определённом месте, получается надо задать координаты. К сожалению мои познания в цсс не глубоки, поэтому прошу помощи. Как это реализовать?

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0

Вот короче... Суть в том что дефолтное изображение совмещается с фоном а при наведении поверх появляется новое нужное нам...

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

Link to comment
Share on other sites

  • 0

Да человек спросил, о том как вообще можно отобразить стиль при наведении.

Для этого нужно использовать псевдокласс :hover, для того чтобы назначить стиль при наведении на кнопку, а :activе непосредственно при нажатии. Еще есть псевдокласс :focus он работает, когда кнопку выбрали с помощью клавиатуры.

Итак если у вас кнопка имеет класс, например, .button, то

дожно быть так

.button {background: #999 url(obychnaya_knopka.gif) no-repeat;}
.button:hover {background: #900 url(pri_navedenii.gif) no-repeat;}
.button:focus {background: #900 url(v_fokuse.gif) no-repeat;}
.button:active {background: #900 url(pri_nazhatii.gif) no-repeat;}

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy