Войти

Авторизация

Логин:
Пароль:
Забыли пароль?
Регистрация
Сайт пользователей Artisteer и Themler. Официальный торговый представитель.

Доработка шаблона после экспорта

Нужна помощь по созданию активных кнопочек
Захожу иногда
Freeman
Сообщений: 44
248 дней назад
Доброго дня! Прошу помочь создать дополнительное меню в горизонтальном блоке (позиция user1).
Я сделал кнопки в 2-х видах, пассив и актив, установил их в блоке, теперь хочу оживить, то, что нашёл в
интернете не работает, а точнее в html файле блока прописывал onMouseOver="javascript:document.getElementById('btn1')
и onMouseOut="javascript:document.getElementById('btn1'). Эти команды не работают или я не там прописывал?
Очч прошу помочь решить этот вопрос
Постоянный участник
Handi
Медаль
Сообщений: 712
15 дней назад
А может так сделать, 5-й пост смотрите:
Скрытый текст виден только зарегистрированным пользователям


Или не катит?
качественное продвижение и раскрутка сайтов в сеопульте
Захожу иногда
Freeman
Сообщений: 44
248 дней назад
спасибо за наводку! Но всё же это новое меню, которое тоже пригодится)). Мне необходим код, который будет менять картинки при наведении мышкой на кнопку.
Постоянный участник
Handi
Медаль
Сообщений: 712
15 дней назад
Freeman:
Мне необходим код, который будет менять картинки при наведении мышкой на кнопку.

Вот на джаве инструкшн:
Поместите в документе между <head> и </head> следующий код функции скрипта:
Код PHP:
  1.  
  2. <script language="javascript">
  3. <!--
  4. function ChangeImg() {
  5. if(document.images) {
  6. eval("document."+ChangeImg.arguments[0]+
  7. ".src=('"+ChangeImg.arguments[1]+"')");
  8. }
  9. }
  10.  
  11. function preload() {
  12. if (document.images) {
  13. var imgsrc = preload.arguments;
  14. arr=new Array(imgsrc.length);
  15. for (var j=0; j<imgsrc.length; j++) {
  16. arr[j] = new Image;
  17. arr[j].src = imgsrc[j];
  18. }
  19. }
  20. }
  21. //-->
  22. </script>
  23.  
Затем прям вместо ссылки на картинку (или что там у Вас кнопка), предварительно обработав код конечно под Ваш:

Код PHP:
  1.  
  2. <a href="ВАШ URL"
  3. onMouseOver="ChangeImg('ImgName1','on1.gif')"
  4. onMouseOut="ChangeImg('ImgName1','off1.gif')">
  5. <img name="ImgName1" border="0"
  6. height="100" width="100"
  7. src="off.gif" alt="мышуй"></a>
  8.  
Это на джаве, но это много кода не проще ли делать без затей с помощью css псевдоэлемента hover ?

Вот пример:

Код PHP:
  1.  
  2. <div class="img"></div>
  3.  
а в css примерно так:

Код PHP:
  1.  
  2.  
  3. .img {
  4. background: url("image_1.jpg") no-repeat; // Подставляем картинку по умолчанию
  5.  
  6. }
  7. .img:hover {
  8. background: url("image_2.jpg") no-repeat; // Подставляем ту картинку, которая будет при наведении курсора мыши
  9.  
  10. }
  11.  
Работает нормально, к тому же легко применимо да и в самом Artisteer это тоже практикуется.
качественное продвижение и раскрутка сайтов в сеопульте
Постоянный участник
artnikov
Медаль За активное участие в жизни сайта.
Сообщений: 478
500 дней назад
Freeman:
Но всё же это новое меню, которое тоже пригодится)). Мне необходим код, который будет менять картинки при наведении мышкой на кнопку.
<a title="" href="
Скрытый текст виден только зарегистрированным пользователям
onmouseover="this.src='xxxx'" onmouseout="this.src='xxxx'" src="
Скрытый текст виден только зарегистрированным пользователям
; alt="" /></a>
соответственно проставив ссылки.Если не хотите редактировать css
Захожу иногда
Freeman
Сообщений: 44
248 дней назад
Большое спасибо! попробую, отпишусь
Захожу иногда
Freeman
Сообщений: 44
248 дней назад
что то не работает ни один из вариантов((
Постоянный участник
alavira
Медаль
Сообщений: 168
25 дней назад
Что и с помощью css не работает?
Я делала и кнопки и картинки. Да и любая ссылка по этому принципу.
Захожу иногда
Freeman
Сообщений: 44
248 дней назад
.img {
background: url("image_1.jpg") no-repeat; // Подставляем картинку по умолчанию

}
.img:hover {
background: url("image_2.jpg") no-repeat; // Подставляем ту картинку, которая будет при наведении курсора мыши

}

вот этот код я вставляю в template.css

<div class="img"></div>

вот этот в index.php правильно?
Захожу иногда
Freeman
Сообщений: 44
248 дней назад
Код PHP:
  1. <p style="text-align: center;">
  2. <a href="index.php?option=com_content&view=article&id=43&catid=13&Itemid=162" target="_self" title="Арендаторам">
  3. <img onmousover="this.src='images/template-content/arenda-g-red-on.png'" onmouseout="this.src='images/template-content/arenda-g-red-off.png'"
  4. src="images/template-content/arenda-g-red-off.png" border="0" alt="arenda" width="135" height="65" /></a>
  5.  
  6. <a href="index.php?option=com_content&view=article&id=42&catid=13&Itemid=162" target="_self" title="Магазины комплекса"
  7. onMouseOver="ChangeImg('mag-g-blue-off.png','mag-g-blue-on.png')"
  8. onMouseOut="ChangeImg('mag-g-blue-off.png','mag-g-blue-off.png')" >
  9. <img src="images/template-content/mag-g-blue-off.png" border="0" alt="magazines" width="135" height="65" /></a>
  10.  
  11. <a href="index.php?option=com_content&view=article&id=44&catid=13&Itemid=162" target="_self" title="Планировка комплекса"
  12. onMouseOver="ChangeImg('plan-g-gray-off.png','plan-g-gray-on.png')"
  13. onMouseOut="ChangeImg('plan-g-gray-off.png','plan-g-gray-off.png')">
  14. <img src="images/template-content/plan-g-gray-off.png" border="0" alt="plan" width="135" height="65" /></a>
  15.  
  16. <a href="index.php?option=com_content&view=article&id=45&catid=13&Itemid=162" target="_self" title="Ника - Лэнд"
  17. onMouseOver="ChangeImg('nika-g-pink-off.png','nika-g-pink-on.png')"
  18. onMouseOut="ChangeImg('nika-g-pink-off.png','nika-g-pink-off.png')">
  19. <img src="images/template-content/nika-g-pink-off.png" border="0" alt="nikaland" width="135" height="65" /></a>
  20. </p>
  21.  
вот код блока этих кнопок
Постоянный участник
alavira
Медаль
Сообщений: 168
25 дней назад
Freeman:
вот этот код я вставляю в template.css

<div class="img"></div>

вот этот в index.php правильно?

Да только обзовите так как Вам нравиться, что бы с другим не совпало. Ну и размеры и положение естесно надо в стили добавить. Если с этим напряг то вставьте с помощью того же артистира, експортните и оттуда возьмите стили для этой картинки. Потом просто сделайте копию этого стиля и добавьте к нему hover и урл смените на вторую картинку.
Захожу иногда
Freeman
Сообщений: 44
248 дней назад
понятно, спасип, попробую ща. Но у меня 4 кнопки, для каждой получается прописывать класс?
Постоянный участник
alavira
Медаль
Сообщений: 168
25 дней назад
Freeman:
Но у меня 4 кнопки, для каждой получается прописывать класс?

Да свой класс а самих стилей получиться 8.
Захожу иногда
Freeman
Сообщений: 44
248 дней назад
что то пошло не так(( опять не меняется ничего((
может в блоке ссылкам прописать класс? или картинкам?
Постоянный участник
alavira
Медаль
Сообщений: 168
25 дней назад
Freeman:
что то пошло не так(( опять не меняется ничего((

Сейчас сама сделала тест с css у меня все работает.
Freeman, сначала с одной кнопкой сделайте, поймите как работает, а потом уж все 4
Может вообще лучше не в шаблоне делать, а просто в Dreamweaver вставить картинку кнопки в чистую страницу html
и понять как делать.
|
Перейти на форум:
Быстрый ответ
У вас нет прав, чтобы писать на форуме.