Как реализовать смену контента при наведении на картинку?

Question

[GaserV]

Подскажите. Есть картинки. Мне нужно при наведении на картинку отображать контент в зависимости от того, на какую картинку навел. Единственно пока, что у меня на уме, это ajax + json. Но что-то мне подсказывает, что так делать не стоит...

Answer 1

[Владислав Старцев]

Обычный html+css

<div>
 <img src="kartinka">
 <p>Text</p>
</div>

p{
display: none;
}

img:hover + p{
display: block;
}

Comments

[GaserV]

нет же. не то. Верстаю лэндинг. В нем есть экран с услугами, в котором слайдер из 8 картинок. В этом экране есть НАЗВАНИЕ услуги, и описание услуги из 3 абзацев например + большая картинка. И все это мне нужно изменять, в зависимости от того, на какую картинку я навел.

[Владислав Старцев]

GaserV: скинь картинку, как должно отображаться

Answer 2

[Александр Вульф]

ajax - это идея асинхронных запросов
json - это формат данных

Я думаю, стоит сделать это просто на JS.

Comments

[GaserV]

Я знаю. Я имел в виду при наведении делать вытягивать через ajax с json данные, соответствующие картинке, и выводить их. Я верстаю лэндинг. В нем есть экран с услугами, в котором слайдер из 8 картинок. В этом экране есть НАЗВАНИЕ услуги, и описание услуги из 3 абзацев например + большая картинка. И все это мне нужно изменять, в зависимости от того, на какую картинку я навел.

Answer 3

[Andrew Floatrx]

если только для подписей - вот самый простой концепт

<div class="item"><!-- присваиваем класс .item, делаем position:relative; -->
 <img src="kartinka"><!-- растягиваем картинку под размер родительского элемента -->
 <p>Text</p><!-- position:absolute;top:0;left:0;right:0;bottom:0; - оформляем параграф как оверлей... opacity:0; -->
</div>
<!-- при наведении на .item:hover p{opacity:1} -->
<!-- по факту больше ничего не надо... все остальное - это украшательства -->

Answer 4

[Anton Почти]

Сделайте див с бэкграйндом картинкой , и далее div:hover { background: url ( ставите другую картинку ) }

Comments

[GaserV]

Вы меня конечно извините, но бредовый вариант. может уже тогда и весь лэндинг картинками зафигачить?

[Anton Почти]

GaserV: ваш вопрос бредовый и примитивный

[GaserV]

Anton Почти: Бредовый и примитивный? Что-то я не вижу решения. Абсолютно

[Anton Почти]

GaserV: jquery -> some div -> $some div2 -> load -> some content ->$some div.css display block or visibilty visible

[Anton Почти]

GaserV: jquery -> some div -> hover -> $some div2 -> load -> some content ->$some div.css display block or visibilty visible/ это аякс подгрузка контента , при наведении на нужный див он загружает нужный нам еонтент в скрытый от глаз дива и делает его видемым

[GaserV]

Anton Почти: Все бы это хорошо, только вот как на это будет смотреть SEO?

[Anton Почти]

GaserV: Плохо , но вы можете воспользоватся утм метатегами