Code: body { padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; } * a img {border: none 0px;} a img {border: none 0px;} .logo1 a img {background: url(images/logo_1.png) no-repeat top left;} .logo1 a:hover img {background-position: bottom left;} .logo2 a img {background: url(images/logo_2.png) no-repeat top left;} .logo2 a:hover img {background-position: bottom left;} .logo3 a img {background: url(images/logo_3.png) no-repeat top left;} .logo3 a img:hover {background-position: bottom left;} Так будет лучше и оптимальнее, + убрана рамка вокруг картинок в ссылке
в наше время практически на каждом сайте есть ява скрипт,и рядовой пользователь на полезет отключать яваскрипт, отключают те кто знают что делают,следовательно это их проблемы,а не создателя сайта чтобы не было рамки нада у прозрачного гифа поставить style="border: 0px;",имхо по умолчанию он может быть другим, и еще style="visibility:hidden;",чтобы прозрачный гиф ваще не показывался никак,он тада даже выделяца не будет
Code: body { padding: 0; margin: 0; } a img {border: none;} "none" - это слово-синоним для нулевой ширины границы padding и margin, если у них установлено только одно значение, автоматически распространяют его на каждую сторону. Это так называемые "shorthand properties"
При указании border: none; указывается только тип границы 'none', но место под эту границу выделяется по умолчанию браузера. Поэтому обязательно необходимо указать ширину границы. По стандарту - да, но есть такой забавный браузер IE, которому стандарты до одного места, и реакция его на CSS с каждой версией разная, поэтому лучше указать все явно, тем более, что это не составляет особого труда. Это во-первых. Во-вторых всегда необходимо указывать единицы измерения(em, px, pt, etc) в таких параметрах, т.к. есть два типа рендеринга: Quirks mode и Standarts mode(подробнее на русском), оба имеют свои единицы измерения, а благодаря разным мнениям браузеров в отношении что в каком режиме рендерить могут возникнуть ошибки
Забыл сделать border="0" Исправь код на этот и забей на всё: Code: <body> <table align="center" id="1" cellspacing="0" cellpadding="0"> <tr> <th><span class="logo1"><a href="http://forum.antichat.ru"><img src="images/none.gif" width="285" height="36" border="0"/></a></span></th> <th><span class="logo2"><a href="http://forum.antichat.ru"><img src="images/none.gif" width="178" height="36" border="0"/></a></span></th> <th><span class="logo3"><a href="http://forum.antichat.ru"><img src="images/none.gif" width="205" height="36" border="0"/></a></span></th> </tr> </table> </body> Обрамлена не таблица, а картинка. В ие почемуто по дефолту стоит border="1"
Помогите сделать "продвинутую" кнопку для отправки данных на сервер (type=submint) 1. Кнопка - картинка изображение1. 2. При наведении курсора на кнопку вид кнопки изменяется=изображение2. 3. При нажатии на кнопку=изображение3 и данные формы отправляются на сервер. 4. Условие: яваскриптом не пользоваться, только CSS (по типу ссылок картинок, рассмотренных мной выше). ЗЫ По сути нужно сделать почти то же самое, но не ссылку а кнопку! Просто кнопка-картинка: Code: <input type="image" border="0" src="images/logo_4.gif" width="180" height="180"> Надо теперь к ней написать стиль CSS, чтоб она была динамической...
Code: <style> input[type="image"] { width: [COLOR=YellowGreen]100[/COLOR]; height: [COLOR=YellowGreen]100[/COLOR]; background: url([COLOR=YellowGreen]image1.png[/COLOR]); } input[type="image"]:hover { width: [COLOR=YellowGreen]100[/COLOR]; height: [COLOR=YellowGreen]100[/COLOR]; background: url([COLOR=YellowGreen]image2.png[/COLOR]); } </style> <form method="GET"> <input type="image"> </form> Не забудь изменить ширину и высоту картинок.
Ага, спасиб, я уже тоже реализовал: (три состояния) Code: <a href="#" class="button"><span><img src="images/none.gif" width="180" height="180" /></span></a> CSS Code: a.button { background: url(images/logo_4.gif); outline: none; } a.button span { display: block; background: url(images/logo_4.gif); } a.button:hover { background: url(images/logo_4.gif) } a.button:hover span { background: url(images/logo_4_turn.gif) } a.button:active { background: url(images/logo_4_turn.gif) } a.button:active span { background: url(images/logo_4_click.gif) } Вопрос такой, если такая кнопка внутри формы, то её действие такое-же как и у type=submit ? Т.е при нажатии будет отправка данных из формы на сервер? UP: в ссылке пишем тогда то же что и в action формы, например: Code: <a href="<?=$_SERVER['PHP_SELF']?>" class="button"><span><img src="images/none.gif" width="180" height="180" /></span></a> так ?
Можно и ссылку: PHP: <a href="#"> ... </a> При нажатии ничего не произойдет UPD: имелось в виду с помещенным в нее input type=button || image
Как тогда это организовать (отправку данных из формы обработчику на стороне сервера) по нажатии на кнопку?
Вообщем решили вопрос вместе с Basurman. Вот кнопка в форме: Code: <form method="post" action="<?=$_SERVER['PHP_SELF']?>"> <button type="submit" id="subm"></button> </form> Вот стиль для неё: Code: #subm { width: 170px; height: 170px; margin: 0; padding: 0; border: 0; background: url(images/logo1.gif); cursor: pointer; } #subm:hover{ width: 170px; height: 170px; margin: 0; padding: 0; border: 0; background: url(images/logo2.gif); cursor: pointer; } #subm:active{ width: 170px; height: 170px; margin: 0; padding: 0; border: 0; background: url(images/logo3.gif); cursor: pointer; } В Опере при наведении курсора на кнопку картинка меняется на logo2, при нажатии на logo3. В осле шестом остаётся всегда logo1 (не меняется) Как исправить?
Чем тебе не угодил JS? Вот код. Code: <script> $normal = '[COLOR=YellowGreen]img1.jpg[/COLOR]'; $hover = '[COLOR=YellowGreen]img2.jpg[/COLOR]'; $active = '[COLOR=YellowGreen]img3.jpg[/COLOR]'; </script> <form method="GET"> <input type="image" onmouseover="this.src=$hover;" onmouseout="this.src=$normal" onmousedown="this.src=$active;" src="[COLOR=YellowGreen]img1.jpg[/COLOR]"> </form>
Думаю, это пригодится больше: http://www.xs4all.nl/~peterned/htc/csshover.htc Это делает возможным использовать :hover для любых элементов в IE6. Подключается, например, так: Code: <style type="text/css"> body { behavior:url("csshover.htc"); } </style> Пример работы: http://www.xs4all.nl/~peterned/examples/cssmenu.html
Ты это мне говоришь? Я сделал onmousedown, т.к. onclick вроди срабатывает после того, как ты уже нажмёшь.
Возможно он имеет ввиду, что стоит добавить ещё один обработчик - т.к. сабмит происходит не мгновенно, а картинка кнопка остаётся такая же, как и у нажатой кнопки: Code: <script> $normal = 'img1.jpg'; $hover = 'img2.jpg'; $active = 'img3.jpg'; </script> <form method="GET"> <input type="image" onmouseup="this.src=$normal" onmouseover="this.src=$hover;" onmouseout="this.src=$normal" onmousedown="this.src=$active;" src="img1.jpg"> </form> событие "click" - это нажатие и последующее отпускание кнопки на том же элементе
