|
|
|
Ссылка ввиде кнопки с подсветкой при наведении
|
|||
|---|---|---|---|
|
#18+
Здравствуйте! Есть задача зделать ссылку ввиде кнопки с подсветкой при наведении, реализовал! <style type="text/css"> .bn{background-image:url("images/bg-bn.png");width:238px;height:26px;visibility:hidden;} <!--рисунок подсветки --> .bn-capt{visibility:visible;top:1px;left:3px} .content, .bn-capt, .gp-bn{position:relative; } .bn-capt, .gp-bn{border:none;} </style> . . . <table class="gp-bn"> <tr> <td onMouseOver="getElementById('bn1').style.visibility='visible';return false" onmouseout="getElementById('bn1').style.visibility='hidden';return false"> <a href="index.html"> <div class="bn" id="bn1"><img src="images/bn1.png" <!--основной рисунок кнопки--> class="bn-capt"></div> </a> </td> </tr> </table> Но! изчезла рука (анкер перестал работать как ссылка), при наведении на кнопку обновляеться вся страница создавая неприятное мерехтение!!! Подскажите пожалуйста как бароться? ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 27.10.2008, 00:17 |
|
||
|
Ссылка ввиде кнопки с подсветкой при наведении
|
|||
|---|---|---|---|
|
#18+
Лучше всего бороться путем использования внутри нужного объекта ссылки (<a>) - у него есть псевдостиль :hover, единственный, работающий во всех браузерах. А если объекту <a> установить блочный стиль, то в него можно помещать и картинки на бекграунд. Это наиболее правильное и наименее энергоемкое решение. Ну, естественно, "мерехтения" (мерехтіння, я так розумію?) не будет. ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 27.10.2008, 01:09 |
|
||
|
Ссылка ввиде кнопки с подсветкой при наведении
|
|||
|---|---|---|---|
|
#18+
IDVsbruck, А вот и нифига... Текст на всей странице дергается вместе с подсветкой :( Код: plaintext 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. броузер перегружает всю страницу :( .... при большом количестве графики и неблагоприятных цветах особенно заметно... ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 27.10.2008, 02:03 |
|
||
|
Ссылка ввиде кнопки с подсветкой при наведении
|
|||
|---|---|---|---|
|
#18+
используйте DOM ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 27.10.2008, 05:36 |
|
||
|
Ссылка ввиде кнопки с подсветкой при наведении
|
|||
|---|---|---|---|
|
#18+
Код: plaintext 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. Кстати, ты не сделал так, как я говорил выше - у тебя в ссылке по умолчанию стоит имидж, а при наведении изображение появляется не в нем, а как бекграунд ссылки - вот и получается мелькание. Нужно просто всегда иметь бекграунд в ссылке, подменяя его при наведении, причем, оба изображения лучше держать в одном файле, "сдвигая" его при наведении/убирании. ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 27.10.2008, 13:58 |
|
||
|
Ссылка ввиде кнопки с подсветкой при наведении
|
|||
|---|---|---|---|
|
#18+
IDVsbruck Код: plaintext 1. Кстати, ты не сделал так, как я говорил выше - у тебя в ссылке по умолчанию стоит имидж, а при наведении изображение появляется не в нем, а как бекграунд ссылки - вот и получается мелькание. Нужно просто всегда иметь бекграунд в ссылке, подменяя его при наведении, причем, оба изображения лучше держать в одном файле, "сдвигая" его при наведении/убирании. 1) несовсем понятно как совместить два изображения в одном? это одна многослойная картинка в фотошопе, с видимыми и невидимыми слоями. Тобиш надо зделать картинку в 2 раза больше, где на одном фрагменте будет неподсвеченая кнопка, а на втором подсвеченая? и просто перемещять фон? Цікава трава, я теж таку хочу :) 2)Анкер без текста и картинки игнорируется браузером :( IDVsbruck Код: plaintext ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 28.10.2008, 00:18 |
|
||
|
Ссылка ввиде кнопки с подсветкой при наведении
|
|||
|---|---|---|---|
|
#18+
Свят2)Анкер без текста и картинки игнорируется браузером :( Гоню, неправильно путь прописал, анкер откликаеться но изображения нету ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 28.10.2008, 00:22 |
|
||
|
Ссылка ввиде кнопки с подсветкой при наведении
|
|||
|---|---|---|---|
|
#18+
1. Там съелось форумом - вместо пробела в тэге <a> стоит "& n b s p ;" (без пробелов, конечно). 2. Да, естественно однослойная картинка, увеличенная в два раза - это оптимальное решение: очень быстро меняется, быстрее загружается, чем две и гарантийно нет подгрузки вне зависимости, кешируются ли картинки или нет. 3. Забыл. В стилях желательно еще указать background-repeat: no-repeat; 4. Нет возможности сейчас проверить на ИЕ6 (у меня ИЕ7 и ФФ3), там есть небольшие отличия, но на функциональность повлиять не должно. 5. У меня если указывать в <img> src="images/file.jpg", но для стилей работает только url("../images/file.jpg") - возможно, не надо, но может и помочь ... Кстати, где-то в середине-конце весны были дебаты на эту тему - обсуждались варианты. Однозначно этот вариант признался наилучшим (я, кстати, тогда его тоже стал использовать). Не помню его название, может, заходящие поскажут, чтобы в инете проще было посмотреть. А еще лучше выложи код, который ты сделал - зачастую ошибки появляются даже после советов. ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 28.10.2008, 01:14 |
|
||
|
Ссылка ввиде кнопки с подсветкой при наведении
|
|||
|---|---|---|---|
|
#18+
IDVsbruck, АФИГЕНАЯ ТРАВА, УЖЕ ПРЕТ ) Код: plaintext 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. И того было рисунков: 1х2.81кб+5х4.81кб стало: 5х10кб нелогично неэкономично, но работает )))))))))))))))))))))))) возник глюк: Код: plaintext Огромное спасибо IDVsbruck и всем кто мыслено Нас подерживал :) интересно узнать как можно было зделать с помощью DOM, видимо не в этот раз :) P.S. "Хорошая трава" - это, напервый взгляд, нелогичное непонятное решение поставленой задачи, но приетом железно работающее )))))))))))) ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 28.10.2008, 01:51 |
|
||
|
Ссылка ввиде кнопки с подсветкой при наведении
|
|||
|---|---|---|---|
|
#18+
Свят возник глюк: ... данный код выстраил кнопки в столбик, а должен был в строчку, интересно почему? очевидно потому что ему ясно сказали: display: block. Если бы ему не сказали этого, то не удалось бы задать размеры. Чтоб было в строчку, допишите flaot:left. Святинтересно узнать как можно было зделать с помощью DOM, видимо не в этот раз :) с помощью ДОМ - юзать js, но зачем, если можно чистым CSS обойтись? СвятP.S. "Хорошая трава" - это, напервый взгляд, нелогичное непонятное решение поставленой задачи, но приетом железно работающее "хорошая трава" называется CSS Sprites, давно уже широко используется в сети и до вас пока что никто здесь не обзывал эту технологию нелогичной и непонятной - напротив, она позволяет избежать мерцания вследствие ожидания подгрузки рисунка и сократить кол-во походов на сервер. ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 28.10.2008, 02:30 |
|
||
|
Ссылка ввиде кнопки с подсветкой при наведении
|
|||
|---|---|---|---|
|
#18+
СвятИ того было рисунков: 1х2.81кб+5х4.81кб стало: 5х10кб нелогично неэкономично, но работает )))))))))))))))))))))))) Я фигею ... Ситуация: человек просит, как ему удобнее записывать слоников. Отвечают: поставь БД и заноси туда своих слоников. Он сделал, все работает. Потом вопрошает: а зачем было делать такую сложную структуру, если ему надо было к одному слонику добавить другого, к сотне еще десяток и т.д., проще было полученную циферку хранить в определенном месте и без БД. Тут схоже ... Надо задачу ставить корректно! 1. При малых размерах png вставляет любой формат, и в частности, jpeg - за счет грамотной компресси и практически отсутствующему заголовку, который присутствует у jpeg и при малых размерах занимает почти весь объем. Поэтому из файла, собранного из 2.81 и 4.81 кб файл на10кб не получится никак. 2. Что мешает вставить в одну картинку все 6 фреймов? - Во-первых, уменьшится объем - совершенно несущественно как для сущности, но в десятки кб при получении/запросе, а во-вторых, будет отсутствовать неуютность по поводу дубляжа первого фрейма. А разные ссылки <a> идентефицируй разными id, а в стилях прописывай типа такого: Код: plaintext 1. 2. 3. 4. ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 28.10.2008, 03:09 |
|
||
|
Ссылка ввиде кнопки с подсветкой при наведении
|
|||
|---|---|---|---|
|
#18+
IDVsbruck 1. При малых размерах png вставляет любой формат, и в частности, jpeg - за счет грамотной компресси и практически отсутствующему заголовку, который присутствует у jpeg и при малых размерах занимает почти весь объем. Поэтому из файла, собранного из 2.81 и 4.81 кб файл на10кб не получится никак. да у меня, собственно и из jpg так получилось - из интересу щас попробовала. Взяла файлы 3.56кб и 5.39кб, сделала один, получилось 8.35кб. То есть примерно логично получилось - сумма полезной информации минус один заголовок. А как из 2.81 и 4.81 кб получить 10кб - я не очень понимаю. Наверное какой-то хитрый случай, как всегда :-) ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 28.10.2008, 03:47 |
|
||
|
Ссылка ввиде кнопки с подсветкой при наведении
|
|||
|---|---|---|---|
|
#18+
illion, IDVsbruck JPG - классная штука, использующая косинусоидальное (т.е. гармоническое типа Фурье) преобразование. Если отбросить высокие гармоники - получится это самое сжатие. ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 28.10.2008, 09:52 |
|
||
|
Ссылка ввиде кнопки с подсветкой при наведении
|
|||
|---|---|---|---|
|
#18+
ShSergeкосинусоидальное (т.е. гармоническое типа Фурье) преобразование. Если отбросить высокие гармоники эээ... Это ты сейчас с кем тут разговариваешь? :-))) мне знаний о рядах Фурье и прочих странностях мат.анализа хватило недели на две. Неделя перед экзаменом, пока учила, и неделя после - пока не выветрилось. Хотя в школе и физмат класс окончила, и в 10-11 классах умудрилась областные олимпиады по математике выиграть. Все равно - ненужная для жизни неинтересная информация испаряется из головы также быстро, как в нее попадает. А ты тут так... выражаешься... страшно. ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 28.10.2008, 12:21 |
|
||
|
Ссылка ввиде кнопки с подсветкой при наведении
|
|||
|---|---|---|---|
|
#18+
Не знаю, у меня при малых размерах картинки однозначно jpeg больше, чем png, как и положено быть из теории. Понятно, что качество jpeg-картинки должно быть таким же, как и png - без потерь, то есть 100% сжатия (или 0% - как удобнее понимать). Взял сравнил: image 66х26 - png 1967, jpeg 2916; image 200x77 - png 1103, jpeg 4198; image 640x30 - png 1112, jpeg 7987; image 72x108 - png 6674, jpeg 9409. Картинки разные - кнопочка с блуром, хидер для окошка без текста, подложка под кнопку без блура, кнопки (2 вида в 2 положениях) с блуром и тенью. Png не прозрачный, jpeg 100% - для чистоты эксперимента. Чем больше на картинке "мусора" (текст, тень, блур, свеченеие), тем хуже сжатие png - приближается к jpeg. Понятно, что если ставить на jpeg 80%, то в некоторых вариантах сравняется в объеме. Однако есть один "нюанс" - прозрачность :) ... Как в одной истории раннего застоя (из Суворова) ... На стол не то Суслову, не то Громыко попадали вырезки из иностранных газет, подготовленные помощниками. А было это перед каким-то заседанием правительства с учеными. Ну, этот не то Суслов, не то Громыко в какой-то момент заседания достает газетку и "в пыку" ученым: мол, какая-то небольшая американская фирма (или небольшое НИИ) изобрело краску, которая защищает самолет от радиоактивного излучения (РИ), а они, наши родные доблесные советские ученые до этого не додумались. Понятно, машина завертелась: как на дрожжах стали расти институты, НИИ, НИЛы, экспериметальные, а позднее настоящие заводы, экспериментальные аэродромы и так далее ... Защищаются дипломы, диссертации, профессора по этой теме появляются, все классно, одно "НО" - краска очень стойкая к РИ, но совершенно не стойкая к влаге, а так как самолеты летают высоко и без влажности не обойтись, то краски хватает только на один полет ... Расходы сумашедшие - мало того, что краска дорогая, так еще затраты на покраску колоссальные. Прошло пару пятилеток - собираются консилиумы, заседания, публикуются доклады - проблема изучается. И вот, на одной конференции с очень большими чинами (оно и понятно - проект же секретный) происходят выступления докладчиков и в какой-то момент слово просит не то студент, не то аспирант - букашка в этом мире и выходит на трибуну. Говорил он очень мало - атомный взрыв имеет 3 последующих поражающих фактора: взрывная волна, световое излучение и проникающая радиация; и после атомного взрыва самолет, находящийся в радиусе поражения и покрашенный защитной краской, на момент появления радиации будет давно уничтожен - еги собьет взрывная волна и обездвижит магнитная волна светового излучения. На следующий же день был подписан указ закрыть все эти НИИ, КБ и т.д. ... Вот так и у нас - можем спорить сколько угодно по поводу объемов и компрессии, но прозрачность-то только у png! :) А у меня практически все кнопки, подложки и хидеры идут с прозрачностью, так что выбора нет (gif не в счет - терпеть не могу, не пользуюсь и пользоваться не собираюсь, кроме, понятно одного гифчика прозрачного 1х1 для ИЕ6). ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 28.10.2008, 12:49 |
|
||
|
Ссылка ввиде кнопки с подсветкой при наведении
|
|||
|---|---|---|---|
|
#18+
IDVsbruck, Тема получила продолжение :) IDVsbruck Что мешает вставить в одну картинку все 6 фреймов? КАК???? В тут травой неотделаешся, тока грибы, ибо без измененого состояния сознания такое решение увидеть оень сложно, а уж понять, полный инпосыбл... IDVsbruck Поэтому из файла, собранного из 2.81 и 4.81 кб файл на10кб не получится никак. Очень просто -первый слой без подсветки 4.81 + 2(подсветка) и 1(еще раз) вместе 2.81+4.81 и в суме 10.2 ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 28.10.2008, 16:28 |
|
||
|
Ссылка ввиде кнопки с подсветкой при наведении
|
|||
|---|---|---|---|
|
#18+
Ну, сдаюсь ... оказалось, что много муара - сильно возрастает объем. А какая проблема вставить 6 или больше фреймов??? - Можно хоть все имиджи сайта вставить в один файл - объем приличный, зато можно грузануть один и не париться. Вот, у меня сейчас демонстрационный сайтик на 6 языках - для всех свои лайблы и свои кнопки. Вот пример кнопок (без подложки) - 15 фреймов в одном (в оригинале фон прозрачный, а тут выкладываю черный): ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 28.10.2008, 20:24 |
|
||
|
Ссылка ввиде кнопки с подсветкой при наведении
|
|||
|---|---|---|---|
|
#18+
IDVsbruck, А де русский или рiдна мова? Обидно. ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 28.10.2008, 20:34 |
|
||
|
Ссылка ввиде кнопки с подсветкой при наведении
|
|||
|---|---|---|---|
|
#18+
Влаштовує? ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 28.10.2008, 20:40 |
|
||
|
Ссылка ввиде кнопки с подсветкой при наведении
|
|||
|---|---|---|---|
|
#18+
Устраивает? ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 28.10.2008, 20:41 |
|
||
|
Ссылка ввиде кнопки с подсветкой при наведении
|
|||
|---|---|---|---|
|
#18+
Упс ... промазал ... ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 28.10.2008, 20:42 |
|
||
|
Ссылка ввиде кнопки с подсветкой при наведении
|
|||
|---|---|---|---|
|
#18+
Є ще на рідній францусьзькій: ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 28.10.2008, 20:44 |
|
||
|
Ссылка ввиде кнопки с подсветкой при наведении
|
|||
|---|---|---|---|
|
#18+
DVsbruck, Добре, але ж по-французськi можно было всё-таки и без ошибок написать. Не процитировать, чего-то куда-то картинки подевались, пока пишу. Пардон, по-украински писать тяжело - шрифт не установлен. А так вообще-то влаштовує. Угадай с одного раза мою фамилию - в нике первых две буквы. ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 28.10.2008, 21:04 |
|
||
|
Ссылка ввиде кнопки с подсветкой при наведении
|
|||
|---|---|---|---|
|
#18+
не забывайте сохранять png как 8-битные, если не нужно много цветов ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 28.10.2008, 23:14 |
|
||
|
Ссылка ввиде кнопки с подсветкой при наведении
|
|||
|---|---|---|---|
|
#18+
IDVsbruck, Непонятно, как это все работает, дай пожалуйста ссылку, если можно. Нехай рисунок это матрица 5х3, где елементы матрицы это варианты менюшек. Задача: на какое растаяние надо сместить рисунок чтоб при наведении курсора на меню вариант 1.1(белый стиль), изменить на вариант 3.1(зеленый стиль). При этом остальные варианты остались в первом столбце? Тоесть с картинки 1.1 2.1 3.1 4.1 5.1 получить 1.3 2.1 3.1 4.1 5.1. background-position: ? ? ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 29.10.2008, 02:45 |
|
||
|
|

start [/forum/topic.php?fid=22&msg=35621627&tid=1455660]: |
0ms |
get settings: |
6ms |
get forum list: |
10ms |
check forum access: |
2ms |
check topic access: |
2ms |
track hit: |
158ms |
get topic data: |
6ms |
get forum data: |
2ms |
get page messages: |
34ms |
get tp. blocked users: |
1ms |
| others: | 238ms |
| total: | 459ms |

| 0 / 0 |
