Малък трик за презареждане на картинка

Открих съвсем прост начин за зареждане на картинка при RollOver събитие. По стандартната схема имаме две картинки, една в активно състояние и една в пасивно. При минаване с курсора над активната картинка искаме да се показва пасивната. Това е свързано с известно забавяне, понеже пасивната картинка не е заредена в браузъра, и в зависимост от скоростта на връзката се получава пауза, която разваля ефекта. Освен при RollOver събитие, тази картинка трябва да отбелязва избраната страница. Идеята е, пасивната картинка да се зареди първа, а след това върху нея активната.

Това е примерно меню с три връзки. В HTML-а пишем:

<div id="side_menu">
  <ul>
    <li id="about">
	  <span>About</span>
	</li><li id="links">
	  <a href="links/"><span>Links</span></a>
	</li><li id="contact">
	  <a href="contact/"><span>Conact</span></a>
	</li>
  </ul>

</div>

В CSS-а имаме:

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

#side_menu a {
  display: block;
  width: 140px;
  height: 24px;
  border: none;
}

#m01 a {
  background: url(img/side_m01.gif) no-repeat;
}

#m02 a {
  background: url(img/side_m02.gif) no-repeat;
}

#m03 a {
  background: url(img/side_m03.gif) no-repeat;
}

#m01 a:hover {
  background: url(img/side_m01-on.gif) no-repeat;
}

#m02 a:hover {
  background: url(img/side_m02-on.gif) no-repeat;
}

#m03 a:hover {
  background: url(img/side_m03-on.gif) no-repeat;
}

#m01 {
  background: url(img/side_m01-on.gif) no-repeat;
}

#m02 {
  background: url(img/side_m02-on.gif) no-repeat;
}

#m03 {
  background: url(img/side_m03-on.gif) no-repeat;
}

#side_menu span {
  display: none;
}

CSS-ът не е съвсем оптимизиран, понеже се получава малко досадно повторение за #m0x и #m0x a:hover. Резултатът може да се види тук. Неудобството е, че примера не работи, ако на LI се зададе display: inline. Ни най-малко не претендирам аз да съм открил това решение. Положителното в случая е, че стигнах до него сам.

• 
  404
• 
  405