Как сделать активную кнопку в CSS с использованием двух графических файлов или хотябы подсветить один графический файл при наведении курсора.
При наведении: a:hover{параметры} С двумя картинками через JS, например так: HTML: <a><img onmouseover="this.src='image_aktive.gif'" onmouseout="this.src='image.gif'" title="" alt="" src="image.gif"/></a>
да на работе я. доступ заблокирован кроме страницы php.ru. плиз выложите пример кода здесь. :roll: :roll: :roll:
Картинка содержит сразу 2 кнопки: сверху обычная снизу активная =================================================== Теперь приступаем к созданию механизма смены изображения с помощью CSS таблиц стилей. Для этого создаем пустой файл с именем, которое было указано ранее, в нашем случае это styles.css и помещаем его в ту же папку, где расположена отредактированная страница. Если у вас уже есть файл стилей, используем его. Открываем с помощью блокнота наш CSS файл и прописываем там следующее: .button a{ font: bold 12px Verdana, Arial, sans-serif; text-decoration: none; text-indent: 10px; color: #FFFFCC; background: url( mybutton.png ); display: block; width: 140px; line-height: 24px; height: 24px; } .button a:hover{ background-position: 0px -24px; text-decoration: none; color: #FFFFCC; } Сохраняем изменения и закрываем файл. Прокомментирую каждую строку: .button a { - имя-идентификатор класса стиля. Указывает, что стиль применяется к тексту расположенному внутри тега A (текст ссылки), который в свою очередь расположен внутри тега, которому присвоен класс button, font: bold 12px Verdana, Arial, sans-serif; - устанавливаем шрифт Verdana, Arial, sans-serif, утолщенный, размером 12 пикселей, text-decoration: none; - текст (в данном случае ссылка) выводится без подчеркивания, text-indent: 10px; - делаем отступ для текста слева в 10 пикселей, color: #FFFFCC; - цвет символов светло-желтый, background: url( mybutton.png ); - тут мы говорим, что необходимо взять файл нашей кнопки - mybutton.png и использовать его в качестве заднего фона. Самое главное правильно прописать путь к картинке. В данном случае картинка расположена в одной папке со страницей. display: block; - вывод тега в виде блока (прямоугольника), width: 140px; - ширина блока 140 пикселей, line-height: 24px; - высота текстовой строки 24 пикселя. Эта запись заставит надпись на кнопке располагаться точно по центру (по вертикали), height: 24px; - высота нашей конструкции (блока), } - закрываем конструкцию. Последние две строки нужны для поддержания кроссбраузерности нашего CSS файла, а так в них указана высота 24 пикселя, будет видна только верхняя часть нашей картинки. Вторая часть записи собственно и реализует сам механизм смены изображения. Мы просто указываем браузеру, что при наведении курсора на ссылку, заключенную в тег с классом button , картинка заднего фона должна отображаться, начиная с 24 пикселя. Таким образом на экран будет выводиться нижняя половина нашей картинки с изображением активной кнопки, что собственно нам и нужно. Прокомментирую каждую строку: .button a:hover { - имя-идентификатор класса стиля, который модифицирует все, что находится внутри тега A, при наведении на него курсора мыши, background-position: 0px -24px ; - выводим фоновую картинку, отступая от ее верхнего края 24 пикселя, text-decoration: none; - текст выводится без подчеркивания, color: #FFFFCC; - цвет символов светло-желтый, } - закрываем конструкцию. Теперь загружаем страничку в браузер и смотрим результат. Если вы все сделали правильно, на вашей странице должна появиться кнопка. ГлавнаяЧтобы сделать меню из таких кнопок просто допишите в вашу страницу после строки <div class="button"><a href="index.php">Главная</a></div>, следующий html код: <div class="button"><a href="index.php?id=15">Прайс</a></div> <div class="button"><a href="index.php?id=18">Шаблоны</a></div> <div class="button"><a href="index.php?id=17">Заказ</a></div> <div class="button"><a href="index.php?id=16">Портфолио</a></div> Адреса ссылок и их названия указывайте соответственно свои. И в конечном итоге получаем меню с динамично меняющимися кнопками: ================================================================ Это что же за работа такая где блокируют доступ к всемирным знаниям?! ))) Таких админов надо кастрировать!
да с сайтом мучаюсь в менюшку хочу загнать. вообще доступа ни к одному сайту не было кроме сайтов производителей офисной техники. попросил открыть доступ на php.ru (время свободное как то надо убивать) вот теперь тут сижу задаю глупые вопросы и т.д))