Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.03.2015, 01:00
Интересующийся
Отправить личное сообщение для Levelleor Посмотреть профиль Найти все сообщения от Levelleor
 
Регистрация: 11.03.2015
Сообщений: 13

Отображение информации при наведении на картинку
Задача для меня сложная.
При наведении на картинку выезжает текст сверху. Проблема в том что картинки(самого разного размера) могут иметь разную ширину и отображаются сжатыми на сайте с помощью width. Я не знаю на сколько отодвигать картинку + я не знаю какой размер контента будет в описании, его может быть до бесконечности, тогда блок с подсказкой будет выезжать вниз пока не покажется весь материал в нем.
Вся проблема крутится вокруг того что я не знаю высоты блока с описание и высоты картинки... Как это можно было бы реализовать?

Я, конечно же, не прошу описать мне тупо весь код, я хотел бы понять что и как делать.
Благодарю за внимание!
Ответить с цитированием
  #2 (permalink)  
Старый 11.03.2015, 09:09
Профессор
Отправить личное сообщение для krasovsky Посмотреть профиль Найти все сообщения от krasovsky
 
Регистрация: 21.12.2012
Сообщений: 869

Сделай пример
Ответить с цитированием
  #3 (permalink)  
Старый 11.03.2015, 09:47
Интересующийся
Отправить личное сообщение для Levelleor Посмотреть профиль Найти все сообщения от Levelleor
 
Регистрация: 11.03.2015
Сообщений: 13

Окей. Задача такова. На первой картинке есть блок. Он состоит из двух блоков: картинка и название. При наведении на этот блок, начная от названия, должен выйти еще один блок с характеристиками. Он должен тянутся(в высоте) так как у разных предметов могут быть разные характеристики. Картинка 1.
Проблема в том что как его так выдвигать и прятать не понятно, ведь я не знаю высоты ни того ни того блока.
*картинка с вариантом до наведения ниже.
Изображения:
Тип файла: jpg image.jpg (42.4 Кб, 7 просмотров)

Последний раз редактировалось Levelleor, 11.03.2015 в 09:57.
Ответить с цитированием
  #4 (permalink)  
Старый 11.03.2015, 09:58
Интересующийся
Отправить личное сообщение для Levelleor Посмотреть профиль Найти все сообщения от Levelleor
 
Регистрация: 11.03.2015
Сообщений: 13

Картинка до наведения на блок
Изображения:
Тип файла: jpg image.jpg (34.9 Кб, 3 просмотров)
Ответить с цитированием
  #5 (permalink)  
Старый 12.03.2015, 07:50
Профессор
Отправить личное сообщение для krasovsky Посмотреть профиль Найти все сообщения от krasovsky
 
Регистрация: 21.12.2012
Сообщений: 869

Вообще то я имел в виду рабочий пример на jsfiddle к примеру. Ну да ладно, если я правильно понял что тебе надо - то можно решить даже на css.
Для всех характеристик общий контейнер, контейнеру max-height:0. На hover контейнеру max-height:none (либо максимально допустимая высота). Для анимации можно использовать css3 animation.
Конечно, при таком подходе в новых браузерах характеристики твои будут плавно выезжать(как настроишь анимацию), а в старых появляться сразу. С другой стороны - снижение рисков ошибок, никакого лишнего js для всяких там сивстелок-перделок.

Последний раз редактировалось krasovsky, 12.03.2015 в 07:55.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не получается при наведении на картинку сменить другую. Iktash Элементы интерфейса 2 04.07.2012 17:14
Отображение картинки большого размера при наведении на неё ira_lala Общие вопросы Javascript 3 21.04.2012 17:35
Отображение фото при наведении OnOff jQuery 2 11.04.2012 16:18
Отображение ссылок при нажатии на картинку deNSe_01 Events/DOM/Window 5 27.06.2011 10:39
Действия при наведении на элемент Garik Элементы интерфейса 6 24.08.2010 20:11