Jump to content
  • 0
Sign in to follow this  
Михаил Козлов

Кнопка с заливкой

Question

Ваша версия Adobe Muse:: 2014.3

Ваша операционная система:: Windows 7

Здравствуйте. Нужна ваша помощь. Споткнулся я на простом шаблоне:

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Там есть зона с кнопками-картинками, при наведении на них курсора, они заливаются полупрозрачным цветом и появляется кнопка "Смотреть полностью", которая тоже имеет заливку при наведении курсора. Конечно, скопировать ее в свой проект и пойти дальше самое простое, но я хотел бы разобраться.

У меня получилось не совсем правильно. При наведении курсора на картинку она заливается цветом и появляется кнопка, но наводя на кнопку она сама уже не заливается. Получается что два объекта Текстовый фрейм с кнопкой и Текстовый фрейм с заливкой как бы объединяются. А я понял, что Текстовый фрейм с кнопкой в своем Стандартном состоянии должен привязаться к Текстовому фрейму с состоянием Курсор над кнопкой.

Надеюсь описал все подробно и не запутанно) Помогите советом.

Share this post


Link to post

7 answers to this question

Recommended Posts

Новая статья

Как бесплатно получить специализированный хостинг для Adobe Muse сайта. Читайте новую инструкцию по этой ссылке.
  • 0

Добрый день Михаил. Та же проблема. Пока сделал на основе "Кнопки состояний". Для разных состояний разные картинки, а текст один и тот же: Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.  Если выяснили как решить, напишите плиз.

Share this post


Link to post
  • 0

Я пока отложил эту проблему)

Обсуждение плавно перешло сюда: 

Можете задать сами уточняющие вопросы, потому что у меня на тот момент с кнопкой состояния получалась одна ерунда)

Share this post


Link to post
  • 0

Я пока отложил эту проблему)

Обсуждение плавно перешло сюда: 

Можете задать сами уточняющие вопросы, потому что у меня на тот момент с кнопкой состояния получалась одна ерунда)

Михаил, на первый взгляд решение мне казалось простым. Решил сделать для примера сам и столкнулся с головоломкой, но немного терпения и логики позволили ее решить.

Итак:

Никакие виджеты не нужны, в том числе кнопка состояния (лишняя нагрузка на сайт)

1) Создаем пустой текстовый фрейм, устанавливаем в нем формат текста "по центру"

2) Создаем еще один текстовый фрейм, делаем из него кнопку "подробнее" и сразу редактируем состояния при наведении.

3) Выделяем кнопку "подробнее", нажимаем ctrl+c (копируем), выбираем инструмент текст и помещаем курсор в первый, созданный нами текстовый фрейм. Жмем ctrl+v (вставить).

Получаем текстовый фрейм с кнопкой подробнее внутри. Выделяем кнопку "подробнее" и стрелками на клавиатуре подбираем нужное положение

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

4) После этих манипуляций у нас поучился один общий текстовый фрейм с кнопкой внутри него.

Теперь редактируем состояния этого фрейма. В стандартном состоянии заливаем нужным цветом. В состоянии "курсор над кнопкой" уменьшаем непрозрачность заливки (не путаь с непрозрачностью объекта) до нужного значения.

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

5) Возвращаемся в стандартное состояние и уменьшаем непрозрачность всего объекта до 0

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

6) Всё готово. Теперь эту конструкцию можно растянуть поверх любого изображения, можно вставлять ее в кнопку состояния (только зачем?). ... Еще один нюанс - не забудьде вернуть общую непрозрачность объекта на 100% в состоянии "курсор над кнопкой".

Добавление на страницу виджета плавного перехода состояний сделает всю композицию еще круче Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Пример того что получилось Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Share this post


Link to post
  • 0

Михаил, на первый взгляд решение мне казалось простым...

Еще не опробовал, но это именно-то что я хотел реализовать, в свое время я 4 вечера на это потратил и так и не смог сделать.

Сейчас попробовал по вашей инструкции. Все вышло. Абсолютно доскональный алгоритм.

Здесь мой пример: Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Там первая картинка полностью повторяет эту инструкцию, но она в триггере лайтбокса. И появилась еще одна проблема: дело в том, что у первой кнопки можно не наводить на "Подробнее", лайтбокс уже сработает. Т.е. не совсем логичная работа. Я с ней раньше сталкивался, но просто отказался от "двойной" заливки и делал, как третью кнопку. Вторая кнопка - это попытки прийти к удобоваримому результату с "двойной" заливкой. Можно ли разрешить такую ситуацию? В принципе меня пока устраивает и третья кнопка, но с "двойной" заливкой, конечно, интереснее.

Share this post


Link to post
  • 0

Можно ли разрешить такую ситуацию? В принципе меня пока устраивает и третья кнопка, но с "двойной" заливкой, конечно, интереснее.

Ну, это уже нельзя сделать, по крайней мере стандартными средствами. Только редактировать код. На мой взгляд, первая кнопка вполне приемлема. Пользователь интуитивно будет кликать на кнопку подробнее. 99% не заметят что кнопка полностью рабочая - проверено электроникой))).

В общем то я пытался сделать вставлял в тригер кнопку подробнее, подгонял тригер по ее размеру и всю эту конструкцию копировал вставлял в пустой текстовый фрейм. Проблема в том что тригер уплывает при просмотре в браузере в сторону. А так всё работает как надо, с двойной заливкой

Share this post


Link to post
Sign in to follow this  

×
×
  • Create New...