IMfO.ru

All God’s chillun got shoes

CSS: прозрачные игры // Mash

С места в карьер.

Надпись, глаза, наливающиеся кровью. И всего лишь одна картинка. При наведении на неё мыши меняется цвет фона. Никаких подзагрузок.

HTML:
<a href="..." class="roll">
<img src="..." width="..." height="..." /></a>

CSS:
a.roll, a.roll img {background-color: white;}
a.roll:hover, a.roll:hover img {background-color: red;}

html>body a.roll,
html>body a.roll:hover {background-color: inherit !important;}

В IE смена цвета идёт соответственно значениям свойства background-color для ссылки. В Mozilla, Opera — для элемента img, а цвет фона ссылок устанавливается наследуемым от родительского элемента.

В следующих двух примерах использован тот же принцип. Один PNG-image с несколькими областями различной степени прозрачности. Для IE приходится идти на некоторые хитрости (увы, опять behavior).

6 сентября 2003