CSS RollOver

26.06.2004

За разлика от масово използваните JavaScript методи за презареждане на картинка, CSS презареждането се отличава с чистия HTML и с простотата му на описване. При JavaScript-a, често се случва така, че обикновеният уеб дизайнер не може да го напише сам и използва Swap Image от Behaviors на DreamWeaver или някой съмнителен скрипт, а при CSS му е необходимо да знае само теорията как да постигне този резултат.

Моето решение е следното. Първо зареждам неактивната картинка, тази която се показва при събитието OnMouseOver, а след това тази, която е в активно състояние. Последователността е такава, за да се избегне премигването от зареждането на неактивната картинка.

Едно от условията е, на всеки елемент (в случая li) да се зададе ID.

<ul id="menu">
  <li id="menu_1">
    <a href="menu_1.html"><span>Name 1</span></a>
  </li><li id="menu_2">
    <a href="menu_2.html"><span>Name 2</span></a>
  </li><li id="menu_3">
    <a href="menu_3.html"><span>Name 3</span></a>
  </li>

</ul>

пример

Използвам SPAN, за да скрия описанието Name 1—n след визуализацията, която в най-общия случай изглежда така:

#menu {
  padding: 0;
  margin: 0;
  list-style: none;
}

#menu span {
  display: none;
}

#menu li, #menu a {
  display: block;
  width: 60px;
  height: 30px;
}

#menu_1, #menu_1 a:hover {
  background: url(img/menu_1on.gif);
}

#menu_2, #menu_2 a:hover {
  background: url(img/menu_2on.gif);
}

#menu_3, #menu_3 a:hover {
  background: url(img/side_m03-on.gif);
}

#menu_1 a {
  background: url(img/menu_1.gif);
}

#menu_2 a {
  background: url(img/menu_2.gif);
}

#menu_3 a {
  background: url(img/menu_3.gif);
}

пример

За състоянието OnMouseDown е необходимо само да се добави:

#menu_1 a:active {
  background: url(img/menu_1down.gif);
}

#menu_2 a:active {
  background: url(img/menu_2down.gif);
}

#menu_3 a:active {
  background: url(img/menu_3down.gif);
}

пример

За да не бъда голословен, ето как този метод работи на практика: Scoba, Minority Report, Anastacia.

← →

CSS RollOver

Категории