| |
|
|
| | Сделал на сайте графическое меню, те пункты меню это не большие (3.8kb) изображения, при наведении курсора мыши они меняются на другие.
Проблема в том что в самом начале они меняються с задержкой где то в 1 сек, это заметно и выглядит не красиво, когда на тот же пукт меню наводишь второй раз, то замена на активное изображение происходит мгновенно, возможно потомучто браузер уже закешировал.
Что сделать чтобы изображение у ссылки на действие hover менялось без задержек ?
вот стили которые я использую:
#header #menu .unic_menu_item1 a {
background: url(/images/home.jpg) no-repeat left bottom;
}
#header #menu .unic_menu_item1 a:hover, #header #menu .unic_menu_item1 a.selected {
background: url(/images/home_act.jpg) no-repeat left bottom;
}
#header #menu .unic_menu_item2 a {
background: url(/images/products.jpg) no-repeat left bottom;
}
#header #menu .unic_menu_item2 a:hover, #header #menu .unic_menu_item2 a.selected {
background: url(/images/products_act.jpg) no-repeat left bottom;
}
|
| |
| |
|
|
| |
|
|
| |
для: asker
(09.09.2009 в 14:33)
| | | нарисовать обаизображения на одной картинке, одно под другим
[ ] - невыбранный пункт
[ * ] - выбранный
|
а через стили сдвигать фоновое изображение
background: url(/images/home.jpg) no-repeat 0 0;
background: url(/images/home.jpg) no-repeat 0 -20px; | |
| |
|
|
| |
|
|
| |
для: AlexSol
(09.09.2009 в 14:40)
| | | Если использовать JavaScript, то можно вот так:
<script language="javascript">//скрипт анимации кнопок меню
p_d = new Array(5);
for(i=1;i<=5;i++){
p_d[i] = new Image();
p_d[i].src = "images/Key/key"+i+"_d.gif";
}
function keys(num){
document.m[num-1].src = p_d[num].src;
}
|
А в меню сделать так:
<img onMouseDown="keys(2)" name=m border="0" src="images/Key/key2_u.gif" width="188" height="46"> | |
| |
|
|
| |
|
|
| |
для: asker
(09.09.2009 в 14:33)
| | | Если все же хотите использовать 2 картинки и без JS, то можно закешировать картинку с использованием псевдоселектора :link
Т.е. по вашему коду так
#header #menu .unic_menu_item1 a {
background: url(/images/home_act.jpg) no-repeat left bottom;
}
#header #menu .unic_menu_item1 a:link {
background-image: url(/images/home.jpg);
}
#header #menu .unic_menu_item1 a:hover, #header #menu .unic_menu_item1 a.selected {
background-image: url(/images/home_act.jpg);
}
|
| |
| |
|
|
| |
|
|
| |
для: Madman
(09.09.2009 в 17:00)
| | | по поводу кештрования через link, чесно говоря эта схема не работает, вы уверены что имеено надо на a link навешивать обычную картинку а на просто a картинку которая должна быть как на hover ?
хотя
#header #menu .unic_menu_item1 a {
background: url(/images/home.jpg) no-repeat left bottom;
}
#header #menu .unic_menu_item1 a:link {
background-image: url(/images/home_act.jpg);
}
#header #menu .unic_menu_item1 a:hover, #header #menu .unic_menu_item1 a.selected {
background-image: url(/images/home_act.jpg);
}
тоже не работает ((( | |
| |
|
|
