Witam,

jestem w trakcie przerabiania strony i chcę wprowadzić na swoją stronę zamiast js sprites przy grafikach.
Po wielu nieudanych próbach utworzyłem poniższego css`a. I teraz pytanie czy plik graficzny ('img/firmy.jpg'), który jest użyty kilka razu będzie wczytany raz i wyświetlony kilka razy. Czy do każdego wyświetlenia będzie wczytywany oddzielnie?

ps. Kombinuje ponieważ w IE (przykład http://dknet.com.pl/ie3) grafiki po najechaniu znikają (czarno białe) a po chwili około 1-2sek, pojawiają się (kolorowe).

cześć kodu html
  1. <ul>
  2. <li class="bosch"><a href="#1" title="Korzystamy z narzędzi Bosch"><span>Korzystamy z narzędzi Bosch</span></a></li>
  3. <li class="schwaiger"><a href="#3" title="Korzystamy z mierników Schwaiger"><span>Korzystamy z mierników Schwaiger</span></a></li>
  4. <li class="skylotec"><a href="#2" title="Korzystamy z uprzęży Skylotec"><span>Korzystamy z uprzęży Skylotec</span></a></li>
  5. </ul>


cześć kodu css
  1. div#stopka ul{
  2. margin: 0;
  3. padding: 0;
  4. float: right;
  5. }
  6. div#stopka ul li{
  7. display: inline;
  8. margin-left: 10px;
  9. list-style: none;
  10. background: url('img/firmy.jpg') no-repeat;
  11. }
  12. div#stopka ul li.bosch{
  13. background-position: 0px -30px;
  14. float: left;
  15. }
  16. div#stopka ul li.bosch a{
  17. display: block;
  18. width: 150px;
  19. height: 30px;
  20. }
  21. div#stopka ul li.bosch a:hover{
  22. background-image: url('img/firmy.jpg');
  23. background-position: 0px 0px;
  24. }
  25. div#stopka ul li.schwaiger {
  26. background-position: -150px -30px;
  27. float: left;
  28. }
  29. div#stopka ul li.schwaiger a{
  30. display: block;
  31. width: 113px;
  32. height: 30px;
  33. }
  34. div#stopka ul li.schwaiger a:hover{
  35. background-image: url('img/firmy.jpg');
  36. background-position: -150px 0px;
  37. }
  38. div#stopka ul li.skylotec {
  39. background-position: -263px -30px;
  40. float: left;
  41. }
  42. div#stopka ul li.skylotec a{
  43. background-position: -263px -30px;
  44. display: block;
  45. width: 171px;
  46. height: 30px;
  47. float: left;
  48. }
  49. div#stopka ul li.skylotec a:hover{
  50. background-image: url('img/firmy.jpg');
  51. background-position: -263px 0px;
  52. }
  53. diV#stopka ul li a span{
  54. display: none;
  55. }