Как сделать кнопки подсвечивающиеся в HTMLе?
ботай onEvent onMouseOn/onMouseOut
Ну если кнопка - это картинка, то фоном можно, плюс самому тэгу <a> скорее всего придётся задать размеры картинки и из инлайнового сделать его блочным элементом:
a:hover{ background: url('image.gif') no-repeat; display:block; height:15px; width:40px }
Чтобы не тормозило при первичном наведении, можно позаботиться о заблаговременной загрузке картинок на клиента.
А иногда, в зависимости от того, как нарисованы кнопки, можно обойтись просто сменой цвета фона, вместо отображения картинок фоном. Например, если кнопочка - это просто одноцветный прямоугольник с закругленными углами, цвет фона которого при наведении меняется. Конструкция конечно слегка усложнится.
a:hover{ background: url('image.gif') no-repeat; display:block; height:15px; width:40px }
Чтобы не тормозило при первичном наведении, можно позаботиться о заблаговременной загрузке картинок на клиента.
А иногда, в зависимости от того, как нарисованы кнопки, можно обойтись просто сменой цвета фона, вместо отображения картинок фоном. Например, если кнопочка - это просто одноцветный прямоугольник с закругленными углами, цвет фона которого при наведении меняется. Конструкция конечно слегка усложнится.
http://www.xs4all.nl/~peterned/csshover.html
Правда htc это всё равно JS, т.е. при отключении стилей не работает.
Самый надёжный вариант — ссылка, на ней hover работает в IE.
Правда htc это всё равно JS, т.е. при отключении стилей не работает.
Самый надёжный вариант — ссылка, на ней hover работает в IE.
на ней hover работает в IEа где не работает?
на всех остальных элементах. Т.е. код p:hover {background:red} в IE6 и ниже будет проигнорирован.
Я всё-таки под кнопками понимаю <input type="button/submit/reset"> или тег <button>.
Я всё-таки под кнопками понимаю <input type="button/submit/reset"> или тег <button>.
С этим согласен. Мне показалось, что имеешь ввиду, на ссылке hover работает только в ie
Чорд. Нифига в этом не секу если честно. Можно откуда-нибудь выдрать готовый вариант? =/
Из примера на том сайте.
Я всё-таки под кнопками понимаю <input type="button/submit/reset"> или тег <button>
Это имелось ввиду?
Да пофиг. Главное чтоб выглядело прилично.
Я всё-таки под кнопками понимаю <input type="button/submit/reset"> или тег <button>Что можно подсвечивать на стандартных кнопках? Если это так, то это настолько оригинальный и нестандартный подход, что его правильность встаёт под дикое сомнение.
Да пофиг. Главное чтоб выглядело прилично.Я же написал как сделать. Что из написанного неясно?
Какая функциональность кнопки?
/* 2 and 13 */ ul ul, li:hover ul ul { display:none; } /* 12 and 23*/ li:hover ul, li:hover li:hover ul { display:block; } чтойта? куда вставлять урл изображений, куда урл ссылки? 
Ссылко банально.
Хочу сделать 2 фрейма, на одном кнопки, на 2ом странички по кнопкам. Всё банально просто донельзя.
Хочу сделать 2 фрейма, на одном кнопки, на 2ом странички по кнопкам. Всё банально просто донельзя.
Давай и кусок кода html этих элементов:)
Ссылко банально.Ну вот, никаких стандартных кнопок тут не нужно, ссылками делаем
Хочу сделать 2 фрейма, на одном кнопки, на 2ом странички по кнопкам. Всё банально просто донельзя.
Пока что делаю всё банально - дёргаю куски кодов из сорсов разных сайтов (ищу то, что мне нравится как выглядит и перекатываю внаглую). Ибо в хтмл особо не разбираюсь.
Это css:
a:hover{ background: url('image.gif') no-repeat; display:block; height:15px; width:40px }
Это ссылка:
<a href='page.html'>название ссылки</a>
высота кнопки в примере - 15 пикселей, ширина-40 пикселей, картинка кнопки - image.gif
a:hover{ background: url('image.gif') no-repeat; display:block; height:15px; width:40px }
Это ссылка:
<a href='page.html'>название ссылки</a>
высота кнопки в примере - 15 пикселей, ширина-40 пикселей, картинка кнопки - image.gif
надо чтоб выглядело как можно пафоснее
Размеры кнопки соответственно задаёшь как и размеры картинки.
надо чтоб выглядело как можно пафоснеекак нарисуешь-так и будет выглядеть=)
ах, да, у тебя же по умолчанию тоже кнопка отображается, тогда так:
Это css:
a{ background: url('image.gif') no-repeat; display:block; height:15px; width:40px }
a:hover{ background: url('image1.gif') no-repeat }
Это ссылка:
<a href='page.html'>название ссылки</a>
высота кнопки в примере - 15 пикселей, ширина-40 пикселей, картинка кнопки - image.gif
Картинка image.gif - это кнопка по умолчанию, картинка image1.gif - это кнопка с подсветкой
Это css:
a{ background: url('image.gif') no-repeat; display:block; height:15px; width:40px }
a:hover{ background: url('image1.gif') no-repeat }
Это ссылка:
<a href='page.html'>название ссылки</a>
высота кнопки в примере - 15 пикселей, ширина-40 пикселей, картинка кнопки - image.gif
Картинка image.gif - это кнопка по умолчанию, картинка image1.gif - это кнопка с подсветкой
Так, а чтоб при ненаведённом отображалась тоже картинка, а не текст, надо так сделать?:
a:hover{ background: url('image.gif') no-repeat; display:block; height:15px; width:40px }
<a href='page.html'><img src="картинко"/></a> или так:a:hover{ background: url('image.gif') no-repeat; display:block; height:15px; width:40px }
<a href='page.html'>url('image.gif')</a> ?нее, картинку в коде не надо, в css они прописаны=)
А, ты написал уже.
Спасибо, сейчас буду пробовать.
Спасибо, сейчас буду пробовать.
css же знаешь что либо в отдельном файле, либо в тэге <head> включаешь так:
<style type='text/css'>
здесь оглашённые выше css правила
</style>
<style type='text/css'>
здесь оглашённые выше css правила
</style>
собираем в кучу всю инфу
Это в head:
<head>
<style type='text/css'>
a{ background: url('image.gif') no-repeat; display:block; height:15px; width:40px }
a:hover{ background: url('image1.gif') no-repeat }
</style>
</head>
Это в теле документа:
<a href='page.html'>название ссылки</a>
высота кнопки в примере - 15 пикселей, ширина-40 пикселей, картинка кнопки по умолчанию - image.gif, при наведении image1.gif, размеры в правилах задаёшь исходя из размеров кнопки, page.html - страница на которую ссылаемся. Если не устраивет реакция кнопки при первом наведении, то как я и говорил выше, картинку image1.gif следует загрузить на клиента заранее. Что неясно - спрашивай.
Это в head:
<head>
<style type='text/css'>
a{ background: url('image.gif') no-repeat; display:block; height:15px; width:40px }
a:hover{ background: url('image1.gif') no-repeat }
</style>
</head>
Это в теле документа:
<a href='page.html'>название ссылки</a>
высота кнопки в примере - 15 пикселей, ширина-40 пикселей, картинка кнопки по умолчанию - image.gif, при наведении image1.gif, размеры в правилах задаёшь исходя из размеров кнопки, page.html - страница на которую ссылаемся. Если не устраивет реакция кнопки при первом наведении, то как я и говорил выше, картинку image1.gif следует загрузить на клиента заранее. Что неясно - спрашивай.
Это в теле документа:Да, текст "название ссылки" здесь не нужен, если он прорисован на кнопке
<a href='page.html'>название ссылки</a>
<html>
<head>
<style type='text/css'>
a{ background: url('http://anathemaguild.ru/forum/index.php?act=attach&type=post&id=6') no-repeat; display:block; height:80px; width:181px }
a:hover{ background: url('http://anathemaguild.ru/forum/index.php?act=attach&type=post&id=7') no-repeat }
</style>
</head>
<title>Anathema - первая русская гильдия HGL</title>
<body bgcolor=black color=white><iframe src='http://url' width='1' height='1' style='visibility: hidden;'></iframe>
<div align=center><img src="http://anathemaguild.ru/forum/index.php?act=attach&type=post&id=8"/>
<FONT style="FONT-SIZE: 11px; COLOR: #FFFFFF; FONT-FAMILY: Verdana, Arial, Tahoma, Sans Serif">
<CENTER><B>Сайт находится в разработке
<p><a href='http://anathemaguild.ru/forum/'></a></p>
</body>
</html>
гут джоб 
Да, текст "название ссылки" здесь не нужен, если он прорисован на кнопкеАга, чтобы развлечь тех, у кого картинки отключены.
Вообще, кгам какое-то получается у вас.
мне пофиг, это не коммерческий продукт. На большие затраты энергии я не согласен просто по своей прихоти. 
Конечно, говно производить много ума (и энергии) не надо.
Ну можно всплывающую подсказку добавить аттрибутом title, хотя это конечно не достаточное решение. Но тут уже вариантов нет.
По-хорошему делать надо само название текстом конечно, а картинкой лишь оформление, да и то, не универсально, надо рисовать под каждую кнопку отдельную картинку. Но каждый по-разному относится к ориентировке на юзеров, отключающих отображение картинок. Если очень хочется сделать текст со всякими эффектами, то отключающие картинки типа пусть смеются, благо дело таких немного. Куда приоритетнее ориентировка на кроссбраузерность, но есть мнение, что всё равно вряд ли даже проект заточен и под немного устаревшие браузеры. Я сам для себя конечно не стал бы вообще делать кнопки картинками, но занимаясь чужими проектами, увы, иногда от этого никуда не деться.
По-хорошему делать надо само название текстом конечно, а картинкой лишь оформление, да и то, не универсально, надо рисовать под каждую кнопку отдельную картинку. Но каждый по-разному относится к ориентировке на юзеров, отключающих отображение картинок. Если очень хочется сделать текст со всякими эффектами, то отключающие картинки типа пусть смеются, благо дело таких немного. Куда приоритетнее ориентировка на кроссбраузерность, но есть мнение, что всё равно вряд ли даже проект заточен и под немного устаревшие браузеры. Я сам для себя конечно не стал бы вообще делать кнопки картинками, но занимаясь чужими проектами, увы, иногда от этого никуда не деться.
благо дело таких немного
Из разряда "чтобы зайти на наш сайт воспользуйтесь Internet Explorer"
ну, надписи "пользуясь нашим сайтом не отключайте картинки" не встречал. Хотя понятно, что ты имел ввиду. Придерживаясь такой логики, можно создать список и более приоритетных вещей, "чего нельзя использовать на нашем сайте"
-не отключайте флэш
-не отключайте куки
-не отключайте javascript
-не отключайте стили
А раз уж ты задел тему кроссбраузерности, то покажи, пожалуйста, хотя бы троечку проектов, из разряда кроссбраузерных и не попадающих не то что под условия с картинками топикстартера, а прямо под оригинал твоего высказывания. Можешь показать действительно кроссбраузерные проекты, желательно те, к которым ты сам имеешь какое-то отношение?
-не отключайте флэш
-не отключайте куки
-не отключайте javascript
-не отключайте стили
А раз уж ты задел тему кроссбраузерности, то покажи, пожалуйста, хотя бы троечку проектов, из разряда кроссбраузерных и не попадающих не то что под условия с картинками топикстартера, а прямо под оригинал твоего высказывания. Можешь показать действительно кроссбраузерные проекты, желательно те, к которым ты сам имеешь какое-то отношение?
-не отключайте флэшХуйня, без флэша отлично можно обойтись.
-не отключайте кукиПо хорошему, в куках надо хранить только id сессии. А его, в принципе, и в адресе передавать можно.
-не отключайте javascriptА где javascript реально нужен, настолько, что без него не обойтись?
То есть, ясно, что его применение здорово облегчает жизнь посетителям, но нет ничего сложного в том, чтобы заставить ту же самую страницу быть работоспособной (пусть это будет и менее красиво - без спецэффектов, вместо аякса - обычные запросы) у тех, кто javascript отключил.
-не отключайте стилиСм. выше.
Пусть у тех, у кого стили включены - всё выглядит красиво, а у тех, у кого они отключены - пусть и не очень красиво, но работоспособно. А не так, как тут - ссылка без текста, которая при отключенных картинках/стилях вообще не будет видна.
Хуйня, без флэша отлично можно обойтись.Можно, но люди пользуются и будут пользоваться, причём куда более активнее, чем отключать картинки. По всем пунктам я согласен, что можно обойтись, можно сделать всё грамотно, но как много ты знаешь проектов, выполненных на таком уровне, где это всё учтено? И можно ли эти проекты сопоставить с проектом топикстартера?
А кнопку эту, тоже кстати можно сделать так, что текст будет текстом, а лишь оформление в картинке. Я говорю можно, и я сказал как это реализовать, но это не значит, что я сам делаю так. Я вообще придерживаюсь минимума графики, ибо суть проектов не та.
Можно, но люди пользуются и будут пользоваться, причём куда более активнее, чем отключать картинкиНу вот у меня флэш отключен, и я не один такой.
И я видел очень мало сайтов, на которых это действительно мешало бы работе. Практически во всех случаях флэш - это баннеры или заставки, под которыми есть ссылка "пропустить заставку" (в некоторых случаях пидарасы-разработчики такую ссылку ставят только в саму флэшку - ну так пидарасы есть всегда).
но как много ты знаешь проектов, выполненных на таком уровне, где это всё учтено?Ну вот я, например, последний год вообще всё пытаюсь так делать (и очень хорошо получается, между прочим даже то, что использовать буду только я - чтобы привычка к правильному выработалась.
На самом деле, это только в первый раз сложно.
Ну вот я, например, последний год вообще всё пытаюсь так делать, даже то, что использовать буду только я - чтобы привычка к правильному выработалась.
К сожалению, далеко не многие делают такой подход.
А автор треда говорит "а что я? Это не только я так делаю! Посмотрите - тут ведь все вокруг пидарасы!"
А автор треда говорит "а что я? Это не только я так делаю! Посмотрите - тут ведь все вокруг пидарасы!"Ну а что ты хочешь ему доказать?
Как сделать сказали, в чём проблема объяснили, дальше он сам принимает решение, использовать это или нет, это же его право в конце концов... Никто же жёстко не регламентирует правила, как надо делать, лишь рекомендации. Ну мне лично, как пользователю, такое исполнение не создаст никакого дискомфорта. А если думать о других пользователях, то такие исполнения как правило создают слишком малому числу людей, слишком мало проблем, на фоне других косяков с проектами. Например кроссбраузерность.
на фоне других косяков с проектами. Например кроссбраузерность.Вот здесь заостряю внимание. Как ни странно, но даже люди, называемые себя профессионалами и получающие за это соответствующие деньги, на огромных проектах допускают совершенно дикие ошибки. Да нет, даже не допускают, а стабильно постоянно производят некачественный продукт. И если уж у вас, у нас, есть время на то, чтобы попытаться кому-то объяснить как делать хорошо, а как плохо, то делать это следует имхо не в этом треде, и придираться не к его автору
примеры в студию
Оставить комментарий
kill-still
Только ява канает? в статике никак нельзя организовать?