powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Ссылка ввиде кнопки с подсветкой при наведении
25 сообщений из 27, страница 1 из 2
Ссылка ввиде кнопки с подсветкой при наведении
    #35617005
Свят
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Здравствуйте!
Есть задача зделать ссылку ввиде кнопки с подсветкой при наведении, реализовал!

<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>

Но! изчезла рука (анкер перестал работать как ссылка), при наведении на кнопку обновляеться вся страница создавая неприятное мерехтение!!!

Подскажите пожалуйста как бароться?
...
Рейтинг: 0 / 0
Ссылка ввиде кнопки с подсветкой при наведении
    #35617023
IDVsbruck
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Лучше всего бороться путем использования внутри нужного объекта ссылки (<a>) - у него есть псевдостиль :hover, единственный, работающий во всех браузерах. А если объекту <a> установить блочный стиль, то в него можно помещать и картинки на бекграунд. Это наиболее правильное и наименее энергоемкое решение. Ну, естественно, "мерехтения" (мерехтіння, я так розумію?) не будет.
...
Рейтинг: 0 / 0
Ссылка ввиде кнопки с подсветкой при наведении
    #35617036
Свят
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
IDVsbruck,

А вот и нифига...

Текст на всей странице дергается вместе с подсветкой :(

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<HTML>
<HEAD>
<TITLE>Test hover</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css"> 
 a:hover {background-image:url("images/bg-bn.png");}
</style>
</HEAD>
<body>
мапрапрапрапр<br />парапрап<br />апрапрапр<br />апрапрар<br />апрапр
 <a href="main.html"> <img src="images/bn1.png" border="none"></a>
</BODY>
</HTML>

броузер перегружает всю страницу :( .... при большом количестве графики и неблагоприятных цветах особенно заметно...
...
Рейтинг: 0 / 0
Ссылка ввиде кнопки с подсветкой при наведении
    #35617077
Фотография Alex_Ustinov
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
используйте DOM
...
Рейтинг: 0 / 0
Ссылка ввиде кнопки с подсветкой при наведении
    #35617903
IDVsbruck
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<HTML>
<HEAD>
<TITLE>Test hover</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css"> 
    a.yourlink {
        display: block;
        width: ...
        height: ... //высоту и ширину лучше поставить вручную, чтобы не оставлять вычисления на ссылку
        background-image: url("images/bn1.png");
        background-position:  0   0 ;
    }
    a.yourlink:hover {
        background-position: -XXXpx  0 ; // в свой bn1.png добавь bg-bn.png (если справа от основного, то идет первый параметр с "-", если внизу, то второй с "-"
    }
</style>
</HEAD>
<body>
мапрапрапрапр<br />парапрап<br />апрапрапр<br />апрапрар<br />апрапр
    <a href="main.html" class="yourlink"> </a>
</BODY>
</HTML>

Кстати, ты не сделал так, как я говорил выше - у тебя в ссылке по умолчанию стоит имидж, а при наведении изображение появляется не в нем, а как бекграунд ссылки - вот и получается мелькание. Нужно просто всегда иметь бекграунд в ссылке, подменяя его при наведении, причем, оба изображения лучше держать в одном файле, "сдвигая" его при наведении/убирании.
...
Рейтинг: 0 / 0
Ссылка ввиде кнопки с подсветкой при наведении
    #35619206
Свят
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
IDVsbruck
Код: plaintext
1.
// в свой bn1.png добавь bg-bn.png (если справа от основного, то идет первый параметр с "-", если внизу, то второй с "-"

Кстати, ты не сделал так, как я говорил выше - у тебя в ссылке по умолчанию стоит имидж, а при наведении изображение появляется не в нем, а как бекграунд ссылки - вот и получается мелькание. Нужно просто всегда иметь бекграунд в ссылке, подменяя его при наведении, причем, оба изображения лучше держать в одном файле, "сдвигая" его при наведении/убирании.

1) несовсем понятно как совместить два изображения в одном? это одна многослойная картинка в фотошопе, с видимыми и невидимыми слоями. Тобиш надо зделать картинку в 2 раза больше, где на одном фрагменте будет неподсвеченая кнопка, а на втором подсвеченая? и просто перемещять фон? Цікава трава, я теж таку хочу :)
2)Анкер без текста и картинки игнорируется браузером :(
IDVsbruck
Код: plaintext
<a href="main.html" class="yourlink"> </a>
...
Рейтинг: 0 / 0
Ссылка ввиде кнопки с подсветкой при наведении
    #35619216
Свят
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Свят2)Анкер без текста и картинки игнорируется браузером :(

Гоню, неправильно путь прописал, анкер откликаеться но изображения нету
...
Рейтинг: 0 / 0
Ссылка ввиде кнопки с подсветкой при наведении
    #35619237
IDVsbruck
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
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") - возможно, не надо, но может и помочь ...

Кстати, где-то в середине-конце весны были дебаты на эту тему - обсуждались варианты. Однозначно этот вариант признался наилучшим (я, кстати, тогда его тоже стал использовать). Не помню его название, может, заходящие поскажут, чтобы в инете проще было посмотреть.

А еще лучше выложи код, который ты сделал - зачастую ошибки появляются даже после советов.
...
Рейтинг: 0 / 0
Ссылка ввиде кнопки с подсветкой при наведении
    #35619248
Свят
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
IDVsbruck,

АФИГЕНАЯ ТРАВА, УЖЕ ПРЕТ )

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<HTML>
<HEAD>
<TITLE>Test hover</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css"> 
    a.yourlink {
        display: block;
        width: 238px;
        height: 26px; /*высоту и ширину лучше поставить вручную, чтобы не оставлять вычисления на ссылку */
        background-image: url("images/a.png");
        background-position:  0   0 ;
    }
    a.yourlink:hover {
        background-position: 0px -26px;/* в свой bn1.png добавь bg-bn.png (если справа от основного, то идет первый параметр с "-", если внизу, то второй с "-" */
    }
</style>
</HEAD>
<body>
мапрапрапрапр<br />парапрап<br />апрапрапр<br />апрапрар<br />апрапр <!-- шоб було :) -->
    <a href="main.html" class="yourlink"></a><a href="main.html" class="yourlink"></a>
</BODY>
</HTML>

И того было рисунков: 1х2.81кб+5х4.81кб
стало: 5х10кб
нелогично неэкономично, но работает ))))))))))))))))))))))))

возник глюк:
Код: plaintext
<a href="main.html" class="yourlink"></a><a href="main.html" class="yourlink"></a>
данный код выстраил кнопки в столбик, а должен был в строчку, интересно почему?

Огромное спасибо IDVsbruck и всем кто мыслено Нас подерживал :) интересно узнать как можно было зделать с помощью DOM, видимо не в этот раз :)

P.S. "Хорошая трава" - это, напервый взгляд, нелогичное непонятное решение поставленой задачи, но приетом железно работающее ))))))))))))
...
Рейтинг: 0 / 0
Ссылка ввиде кнопки с подсветкой при наведении
    #35619257
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Свят
возник глюк: ... данный код выстраил кнопки в столбик, а должен был в строчку, интересно почему?

очевидно потому что ему ясно сказали: display: block. Если бы ему не сказали этого, то не удалось бы задать размеры. Чтоб было в строчку, допишите flaot:left.

Святинтересно узнать как можно было зделать с помощью DOM, видимо не в этот раз :)
с помощью ДОМ - юзать js, но зачем, если можно чистым CSS обойтись?

СвятP.S. "Хорошая трава" - это, напервый взгляд, нелогичное непонятное решение поставленой задачи, но приетом железно работающее
"хорошая трава" называется CSS Sprites, давно уже широко используется в сети и до вас пока что никто здесь не обзывал эту технологию нелогичной и непонятной - напротив, она позволяет избежать мерцания вследствие ожидания подгрузки рисунка и сократить кол-во походов на сервер.
...
Рейтинг: 0 / 0
Ссылка ввиде кнопки с подсветкой при наведении
    #35619264
IDVsbruck
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
СвятИ того было рисунков: 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.
.yourlink {...}
#link1, #link2, #link3, #link4, #link5 {background-position: ...}
#link1:hover {background-position: ...}
#link2:hover {background-position: ...}
...
...
Рейтинг: 0 / 0
Ссылка ввиде кнопки с подсветкой при наведении
    #35619270
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
IDVsbruck
1. При малых размерах png вставляет любой формат, и в частности, jpeg - за счет грамотной компресси и практически отсутствующему заголовку, который присутствует у jpeg и при малых размерах занимает почти весь объем. Поэтому из файла, собранного из 2.81 и 4.81 кб файл на10кб не получится никак.
да у меня, собственно и из jpg так получилось - из интересу щас попробовала. Взяла файлы 3.56кб и 5.39кб, сделала один, получилось 8.35кб. То есть примерно логично получилось - сумма полезной информации минус один заголовок. А как из 2.81 и 4.81 кб получить 10кб - я не очень понимаю. Наверное какой-то хитрый случай, как всегда :-)
...
Рейтинг: 0 / 0
Ссылка ввиде кнопки с подсветкой при наведении
    #35619545
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
illion, IDVsbruck

JPG - классная штука, использующая косинусоидальное (т.е. гармоническое типа Фурье) преобразование. Если отбросить высокие гармоники - получится это самое сжатие.
...
Рейтинг: 0 / 0
Ссылка ввиде кнопки с подсветкой при наведении
    #35620053
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
ShSergeкосинусоидальное (т.е. гармоническое типа Фурье) преобразование. Если отбросить высокие гармоники
эээ... Это ты сейчас с кем тут разговариваешь? :-)))

мне знаний о рядах Фурье и прочих странностях мат.анализа хватило недели на две. Неделя перед экзаменом, пока учила, и неделя после - пока не выветрилось. Хотя в школе и физмат класс окончила, и в 10-11 классах умудрилась областные олимпиады по математике выиграть. Все равно - ненужная для жизни неинтересная информация испаряется из головы также быстро, как в нее попадает. А ты тут так... выражаешься... страшно.
...
Рейтинг: 0 / 0
Ссылка ввиде кнопки с подсветкой при наведении
    #35620144
IDVsbruck
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Не знаю, у меня при малых размерах картинки однозначно 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).
...
Рейтинг: 0 / 0
Ссылка ввиде кнопки с подсветкой при наведении
    #35620953
Свят
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
IDVsbruck,

Тема получила продолжение :)

IDVsbruck Что мешает вставить в одну картинку все 6 фреймов? КАК???? В тут травой неотделаешся, тока грибы, ибо без измененого состояния сознания такое решение увидеть оень сложно, а уж понять, полный инпосыбл...
IDVsbruck Поэтому из файла, собранного из 2.81 и 4.81 кб файл на10кб не получится никак. Очень просто -первый слой без подсветки 4.81 + 2(подсветка) и 1(еще раз) вместе 2.81+4.81 и в суме 10.2
...
Рейтинг: 0 / 0
Ссылка ввиде кнопки с подсветкой при наведении
    #35621516
IDVsbruck
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Ну, сдаюсь ... оказалось, что много муара - сильно возрастает объем.
А какая проблема вставить 6 или больше фреймов??? - Можно хоть все имиджи сайта вставить в один файл - объем приличный, зато можно грузануть один и не париться.
Вот, у меня сейчас демонстрационный сайтик на 6 языках - для всех свои лайблы и свои кнопки. Вот пример кнопок (без подложки) - 15 фреймов в одном (в оригинале фон прозрачный, а тут выкладываю черный):
...
Рейтинг: 0 / 0
Ссылка ввиде кнопки с подсветкой при наведении
    #35621523
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
IDVsbruck,

А де русский или рiдна мова? Обидно.
...
Рейтинг: 0 / 0
Ссылка ввиде кнопки с подсветкой при наведении
    #35621533
IDVsbruck
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Влаштовує?
...
Рейтинг: 0 / 0
Ссылка ввиде кнопки с подсветкой при наведении
    #35621535
IDVsbruck
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Устраивает?
...
Рейтинг: 0 / 0
Ссылка ввиде кнопки с подсветкой при наведении
    #35621536
IDVsbruck
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Упс ... промазал ...
...
Рейтинг: 0 / 0
Ссылка ввиде кнопки с подсветкой при наведении
    #35621539
IDVsbruck
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Є ще на рідній францусьзькій:
...
Рейтинг: 0 / 0
Ссылка ввиде кнопки с подсветкой при наведении
    #35621554
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
DVsbruck,

Добре, але ж по-французськi можно было всё-таки и без ошибок написать. Не процитировать, чего-то куда-то картинки подевались, пока пишу. Пардон, по-украински писать тяжело - шрифт не установлен. А так вообще-то влаштовує. Угадай с одного раза мою фамилию - в нике первых две буквы.
...
Рейтинг: 0 / 0
Ссылка ввиде кнопки с подсветкой при наведении
    #35621627
зы
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
не забывайте сохранять png как 8-битные, если не нужно много цветов
...
Рейтинг: 0 / 0
Ссылка ввиде кнопки с подсветкой при наведении
    #35621738
Свят
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
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: ? ?
...
Рейтинг: 0 / 0
25 сообщений из 27, страница 1 из 2
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Ссылка ввиде кнопки с подсветкой при наведении
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]