20.12.2007, 23:35
|
|
Постоянный
Регистрация: 14.01.2007
Сообщений: 459
Провел на форуме:
1469995
Репутация:
589
|
|
В простом случае:
PHP код:
<input type=button style="background: url('img1.jpg')" value=abc id="mybutton">
<script>
var btn = document.getElementById('mybutton');
btn.onMouseOver = function()
{
btn.style.backgroundImage = 'img2.jpg';
}
btn.onMouseOut = function()
{
btn.style.backgroundImage = 'img1.jpg';
}
</script>
Но в этом случае картинка не кешируется, а подгружается каждый раз.
Лучший вариант: сделать две картинки одной
---------
| img1 |
---------
| img2 |
---------
с учетом того, что размеры исходных картинок одинаковы.
После чего в стилях кнопки прописываешь ширину(равна ширине фона) и высоту (половина высоты получившейся картинки):
PHP код:
<style>
#mybutton
{
height: 20px;
width: 100px;
background: #fff url('mybigimage.gif') no-repeat;
background-position: top left;
}
</style>
<input type=button value=abc id="mybutton">
<script>
var btn = document.getElementById('mybutton');
btn.onMouseOver = function()
{
btn.style.backgroundPosition = 'bottom left';
}
btn.onMouseOut = function()
{
btn.style.backgroundPosition = 'top left';
}
</script>
В этом случае катринка одна, загружается один раз, просто "передвигается" под кнопкой => время ни на запрос к кешу, ни к серверу не тратится => работает быстро и не напрягает юзверей (особенно Оперы с всплывающей статусной строкой)
Пример более сложного использования - mootools.net - вкладки вверху страницы и попроще - лого внизу страницы (там же) |
|
|