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

Ahatomik · 2012-03-07 14:00:21

Подскажите пожалуйста ...
Вот есть картинка - нужно сделать так что бы она подсвечивалась
Пример
Справа подписка на блог
http://digitalplace.ru/
Спасибо ! :)

Отредактировано Ahatomik (2012-03-07 14:00:41)

t3s · 2012-03-07 14:09:52

ну я понимаю что азаров много чего запретил, но ведь глянуть исходный код в примере вроде еще под запрет не попадает?
простейший вариант - 2 картинки, при :hover одна меняется на другую
но в данном случае простота хуже воровства - если картинки "тяжелые" то посетители отчетливо видят как картинка "пропадает" в первую секунду после наведения

поэтому перспективнее юзать CSS-спрайты - т.е. используется одна картинка, которая при :hover смещается на нужное кол-во пикселов
именно так и сделано в примере
а вот и картинка
http://digitalplace.ru/templates/digitalplace-v1/images/sidebar-social-bg.gif

Отредактировано t3s (2012-03-07 14:10:23)

Ahatomik · 2012-03-07 14:13:58

ну я понимаю что азаров много чего запретил, но ведь глянуть исходный код в примере вроде еще под запрет не попадает?

блин ты как всеггда красава
... я просто не правельно написал .
именно как ? вот пример ссылки

<td align=""><a href="" target=_blank><img src="http://shurupov.in.ua/uploads/images/default/shurupov-montag.jpg" border="0" title="Монтажные работы" width=180 height=90></a><a href="#"></a></td>

Как вот сделать так - что бы была подстветка когда ты на нее наводишь ... во :)

t3s · 2012-03-07 14:55:06

картинка ставится бекграундом в цсс

<a href="" target=_blank><!--это начало сцылко-->
<span class="superpuperduperclass"></span><!--это пустота, которая "типа картинка"-->
</a><!--это конец сцылко-->

для superpuperduperclass примерно так

cursor: pointer;
width: 160px;
height: 55px;
background:  transparent url("тут путь к картинГо") no-repeat left top;

а для superpuperduperclass:hover примерно так

cursor: pointer;
width: 160px;
height: 55px;
background:  transparent url("тут путь к картинГо №2") no-repeat left top;/*это если будешь юзать две картинки*/
background:  transparent url("тут путь к картинГо") no-repeat -160px 0px ;/*это если будешь юзать ЦСС-спрайты*/

обрати внимание на то что идет после no-repeat в случае со спрайтами - это координаты, на которые сдвигается картинка при наведении

Ahatomik · 2012-03-07 15:02:05

t3s, Во! спасибо тебе Большое ! ;)

Next Generation CMS :: Форум поддержки

Объявление

#1 2012-03-07 14:00:21

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

#2 2012-03-07 14:09:52

Re: Картинка с подстветкой

#3 2012-03-07 14:13:58

Re: Картинка с подстветкой

#4 2012-03-07 14:55:06

Re: Картинка с подстветкой

#5 2012-03-07 15:02:05

Re: Картинка с подстветкой

Подвал форума