IMfO.ru

All God’s chillun got shoes

CSS: rollovers for links // Mash

Задача

Rollover ссылок.

Решение

Средствами JavaScript.

Однако

<p>Some text <a onMouseOver=".." onMouseOut=".."
href="http://.." title="зачитать целиком"><img src=".."
alt="зачитать целиком" width=".." height=".." /></a></p>

<p>Some text <a href="http://.." title="зачитать целиком"
class="more"><span>:: далее &raquo;</span></a></p>

Второй кусок кода выглядит привлекательнее, не так ли?

Как это работает

• Some long-long story and text link for «more» :: read more »
• Some long-long story and image link for «more» :: read more »

CSS:
a.more span {visibility: hidden;}
a.more span {behavior: url('morelnk.htc');}
a.more {background: url('next.gif') no-repeat -18px 51%;}
a.more:hover {background-position: 0px 51%;}

html>body a.more span {display: none;}
a.more:after {content: url('hidden.gif');}

morelnk.HTC:
<public:component />
<public:attach event="oncontentready" onevent="More()" />
<script language="JScript">
  function More(){
    innerHTML='<img width="18" height="10" border="0" />';
  }
</script>

Q: hidden.gif?
A: Прозрачный гиф. Длина равна длине background-image, высота — 1px.

Q: Почему 51%?
A: Обход небольшого глюка Mozilla. Обожаю целые числа.

Q: <img width="18" height="10" border="0" />. А где src?
A: Не нужен.

Q: Есть вопрос.
A: Хороший?

5 сентября 2003