![Оптимизация. Да използваме едно изображение вместо две Да използваме едно изображение вместо две](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg26xNHjcPAF-eV_iQVqtKdz5-dtAwTrUqUPcAEaSkRnPID4d2Mt6gsPDiCICEQQgNCMvW2ctAkE2qiLnTiygpfbOiOFfhQgm7jnkFau-zbgjoJSZntMQo1QLgMwr-j1rh0aOz-UHzIYyk/s1600/sprite1-min.png)
И ако вие, скъпи читатели, сте от тях, пропуснете този пост. Останалите нека прочетат и го използват.
И така...
За да получите ефекта от промяната на изображението при задържане на курсора върху него обикновено се използват две изображения:
➤едното за "по подразбиране";
➤второто за позицията "hover", когато курсорът се задържа върху изображението;
Независимо от това, има начин да се използва само едно изображение, което има своите предимства.
Ето как обикновено се осъществява този ефект.
HTML кодът може да изглежда по следния начин:
<a href="#" id=" my-button "></a>
Съответните CSS стилове са следните:
a# my-button {
width: 64px;
height: 64px;
background-image: url('my-button_bw.png');
display: block;
text-decoration: none;
}
a#my-button:hover {
background-image: url('my-button_color.png');
}
Две отделни изображения за двете съответни състояния трябва да бъдат качени на сървъра и могат да изглеждат така например:
![Изображение по подразбиране Изображение по подразбиране](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi8PnsPFynzVjFDu7HQmfs2UNXy2Q1t_H5x6Ud90WGTPZSprv-m1bynhqbcdjTHSczwC91kQW20D749yR4scEKTZL9YuK5ZMuEZi1FSnnnVwL6NPcVt9jniUfggS0DxCfO1lXCcnEpn4U/s1600/s1.png)
![Изображение за позицията "hover" Изображение за позицията "hover"](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_GMMarr3RlCPNzTP1DNwxBXx5F4wLeXjfV1MTpvhGs2UD4k9jCu4jmvrginwqSeOlsIJBNMDytybNV0nEvnTbSiFocLEczf7FOqVRm1M98rjezCPuOEP5M39rimfuphP6TI0inHdnFl8/s1600/s2.png)
Крайният резултат е:
Изображението по подразбиране, което потребителят вижда, е оранжевото изображение (в кода-файл my-button_bw.png). Когато поставите курсора върху него, то се преобразува в синьо на my-button_color.png.
Въпреки това, когато потребителите за първи път посещават страница, на която се използва този ефект, синьото изображение не се кешира, и следователно може да бъде забелязано забавяне при превключване от оранжево към синьо изображение. Забавянето може да зависи от скоростта на интернет връзката и натоварването на сървъра.
Има няколко метода за зареждане на алтернативни изображения, с които да се избегне това неудобство. Но има и съвсем различен, не по-малко ефективен начин и той е изобщо да не използвате алтернативни изображения.
Можете да използвате едно единствено изображение, върху което се комбинират изображенията в двете състояния:
➤по подразбиране;
➤и когато задържите курсора на мишката върху него;
Как ще бъде реализирано
HTML кодът остава същият, само CSS се променя, като този път ще изглежда така:
a#my-button {
width: 64px;
height: 64px;
background-image: url('my-button_bw_color.png');
display: block;
text-decoration: none;
}
a#my-button:hover {
background-position: -64px 0;
}
Използва се само едно изображение:
![Използва се само едно изображение само едно изображение](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhK07i5cctd-TQMBOsS1Pz7tNQHzlSBWSTNt6c19mDLer0vlkvVruVRbIeC-_UUzklKkHq_7Yxns12vPDiWzWEPvkLxY01Ht7Y3d20FzPVfaZIuS6ss49NgUX0s7oLVABrOG_fAuOEnHg/s1600/s3.png)
Крайният резултат се получава, както следва:
По този начин използването на по-малко изображения може леко да ускори времето за зареждане на блога ви, като същевременно намали натоварването на сървъра. Друго по-малко значимо предимство е, че се нуждаете от по-малко на брой изображения, които да качите на сървъра.
Здраве за всички вас! Не забравяйте да правите добро на други хора!
Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:
![Посетете .: BGtop.net :. Топ класацията на българските сайтове и гласувайте за този сайт! BGtop](http://bgtop.net/images/bgtop8831.gif)
Продължение
Няма коментари:
Публикуване на коментар