| |
|
|
| | Делаю кнопки меню, которые должны "нажиматься" при клике. Прослышал что это можно сделать с помощью CSS:) Но как - пока не понял. Как полумеру, сделал чтобы кнопки нажимались при наведении мышки. Но тут опять грабли: если применяю стиль к ячейке, то не работает нормально в IE, а если к ссылке - в опере.
В общем, прошу взглянуть, может что-то подсказать... да и вообще по реализации: дизайн довольно сложный и чувствую, что пошел я не самым оптимальным путем.
http://test.alna.spb.ru/main.htm | |
| |
|
|
| |
|
|
| |
для: Loki
(18.11.2005 в 15:52)
| | | НУ если меню кнопок не много будет и не будут меняться, почему бональный ролловер из картинок не сделать. | |
| |
|
|
| |
|
|
| |
для: multiBrain
(18.11.2005 в 15:57)
| | | а что это такое? | |
| |
|
|
| |
|
|
| |
для: Loki
(18.11.2005 в 16:08)
| | | Надо две картинки: в холодном состоянии и в событийном (в вашем случае mouseOver).
И ссотвественно подменять картинки
<img src="img_1.jpg" onMouseOver="this.src='img_2.jpg'" onMouseOut="this.src='img_1.jpg'">
|
соответственно картинки должнем образом надо подготовить | |
| |
|
|
| |
|
|
| |
для: multiBrain
(18.11.2005 в 16:24)
| | | а еще желательно предзагрузку ыторых картинок сделать, чтобы они на момент использования в кеше были | |
| |
|
|
| |
|
|
| |
для: multiBrain
(18.11.2005 в 16:24)
| | | Там и так две картинки. Нужно чтобы надписи можно было любые наложить. Как я понимаю, это возможно только если картинка фоновая... | |
| |
|
|
| |
|
|
| |
для: Loki
(18.11.2005 в 15:52)
| | | У меня тоже возник вопрос по теме
Сделал значит стиль для ссылки , по наведению на нее передвигаю фоновый рисунок (в css без JS)В Опере все отлично а в ИЕ проблемы, при наведении на ссылку фон становится белым и осел начинает скачивать картинку фона, только потом показывает ее.
http://p-chertkovo.h14.ru/club/com.html | |
| |
|
|
| |
|
|
| |
для: PantiL
(18.11.2005 в 16:29)
| | | А как вы передвижение фона без JS осуществляете. В первые слышу о таких возможностях css. | |
| |
|
|
| |
|
|
| |
для: multiBrain
(18.11.2005 в 16:32)
| | |
a:link, a:visited { color: #333; font-size: 11px; font-family: Verdana; font-weight: bold; text-decoration: none; background: url(../images/button_bg.png) no-repeat; display: block; padding-top: 5px; padding-left: 14px; width: 100px; height: 25px; border-top: 2px solid #333; border-left: 2px solid #333 }
a:hover { color: #333; background-position: 0px -25px; text-decoration: none }
|
Вот код!
Жирниньки выделен тот самый участок кода который и двигает фон, проще говоря изменяет координаты картинки | |
| |
|
|
| |
|
|
| |
для: PantiL
(18.11.2005 в 16:36)
| | | Я понял, если в a:hover поставить background: url(../images/другой_button_bg.png), то но при наведении начинает его подгружать в IE? А надо обойтись совсем без JS?
Тогда загрузите эти картинки незаметно в поля размером 1х1, они станут подгружены. (А при JS известно как делается.) | |
| |
|
|
| |
|
|
| |
для: PantiL
(18.11.2005 в 16:29)
| | | вопрос: а что, в Чертково хорошо растет конопля? ;) | |
| |
|
|
| |
|
|
| |
для: elenaki
(24.11.2005 в 21:43)
| | | Может просто дизайнер под воздействием был?:) | |
| |
|
|
| |
|
|
| |
для: Loki
(18.11.2005 в 15:52)
| | | На самом деле твоя идея с паддингом очень даже не плохая, и, если её довести до ума, то она очень превосходит вышеописываемые графические кнопки. Использование графических кнопок я вообще считаю грубой ошибкой дизайнера. Хоть прелоад картинок делать, зоть не делать, всёравно графическое меню очень сильно нагружает сайт. | |
| |
|
|
| |
|
|
| |
для: DDK
(18.11.2005 в 17:41)
| | | Механизм понятен, протестируйте кто может на загружабельность картинок:
(здесь работает и по клику, и по наведению)
Я заметил, что при первой загрузке и Опера тормозила с выдачей картинки, так что, может быть, в кэш предварительно не загружается. Тогда выход в дублировании картинки на странице в незаметном месте с указанием маленького размера. Интересен вопрос - принципиально CSS предзагружает картинки или нет? И в каких браузерах?
<style>
a{background-color:#efefef;font-size:6px;text-decoration:none;padding:30px;padding-right:20px;}
a:hover{background:url(http://www.softtime.ru/images2/handbook_forum.jpg)}
a:active{background:url(http://www.softtime.ru/images/bookphp5.gif)}
</style>
<br><br><center><a href=# onClick=return!0> </a>
|
Оно по-разному работает в разных браузерах при клике, как нетрудно увидеть. Скриптом это ещё можно поправить, снимая фокус по onMouseUp в IE. | |
| |
|
|
| |
|
|
| |
для: 12345
(18.11.2005 в 21:59)
| | | Вот тебе простейший пример прелоада картинок для графич. меню на этом же примере:
<div style="display: none;">
<img src="http://www.softtime.ru/images/handbook_forum.gif">
<img src="http://www.softtime.ru/images/bookphp5.gif">
</div>
<style>
a{background-color:#efefef;font-size:6px;text-decoration:none;padding:30px;padding-right:20px;}
a:hover{background:url(http://www.softtime.ru/images2/handbook_forum.jpg)}
a:active{background:url(http://www.softtime.ru/images/bookphp5.gif)}
</style>
<br><br><center><a href=# onClick=return!0> </a>
|
| |
| |
|
|
| |
|
|
| |
для: DDK
(18.11.2005 в 22:45)
| | | Да мне не надо - интересно узнать, работает ли прелоад в CSS без заботы о нём и где. | |
| |
|
|
