16 июля 2010 в 16:06
Всем доброго время суток, извените за нубский вопрос, но как сделать кнопку картинку, которая при наведении становится черно-белой вот как тут http://drupalogy.ru ( внизу кнопки твитер, фейсбук ). Копка будет размешена на самой страничке тоесть на Page, может тег какой есть или еще что ?
Комментарии
Это называется CSS.
почитайте про css, есть там свойство hover у елементов.
оттуда и отталкивайтесь
делается в одну строчку.
а можно поподробнее ? Ссылка -это картинка, нужно чтобы принаведении становилась черно белой, что нужно прописать и куда ?
Вам ответили уже html и css в помощь, друпал здесь не при чем.
я понимаю что не в Друпале дело , прост люди тут знающие, вот и спрашиваю чтоб обьяснили
Здесь люди знают не меньше.
Может, не самое лучшее решение, но работает
В page.tpl.php в нужном месте (например, после $content) прописываете:
В файле .css пишете:
.машинное название вашей кнопки {
параметры, типа margin, padding и иже с ними;
}
При hover вторая картинка подтормаживает, ибо занова грузится с сервера. В случае этого скрипта картинка загружаются сразу, смена происходит быстро. Ну, это личный опыт и опыт других человеков...
хм.. код сбежал.. дубль 2:
В page.tpl.php в нужном месте (например, после $content) прописываете:
<a title="Надпись, которая появится при наведении на кнопку" href="http://путь, куда ведёт кнопка"><img src='/themes/ваша тема/ваша цветная картинка.png'
onmouseover="this.src='/themes/ваша тема/ваша чёрно-белая картинка.png'"
onmouseout="this.src='/themes/ваша тема/ваша цветная картинка.png'" border=0> </a>
</div>
ааааа
что бы не грузилась коряво и работала
достаточно следующего
при условии что картинка кнопки склеена из двух (обычное состояние и состояние навердения)
Допустим, что наша картинка кнопки имеет разверы 50 на 50 пихелей.
тогда "склеенная" - 50х100. 100- высота. Думаю и так понятно почему.
далее пишем в файле стилей
background:url(../images/name_of_image.jpg) no-repeat center top;
width:50px;
height:50px;
}
a.class_of_link:hover{
background:url(../images/name_of_image.jpg) no-repeat center -50px;
width:50px;
height:50px;
}
а в шаблоне
все.
никаких js скриптов, тем более через онмув или онхувер. есть джейквери для массового правильного корректного обработчика.
../images/name_of_image.jpg- это путь к картинке относительно css файла вашей темы.далее остается прописать позиционирование. опять же css + html + wc3.
если не понятно - пиши в личку. помогу.
если надо для кнопки, то аналогично все. для кнопки просто класс такой ставишь и все. если с формами. но там прийдется ковырять модуль, что бы добавлять свой класс как атрибут. или по лог цепочке ловить или класс или айди (что лучше все) и ему через стили прописывать.
Если это для меню и меню будет расширяться то можно воспользоваться модулем ImageMenu
не
вчера колупался с ним
в общем пришел к выводу, что просто напросто не в тот шаблон запихиваем.
в шаблон вебформ надо было, а не просто ноды.. я так понял в этом бага, ибо там просто все...