Создание сайтов > Верстка > Плагин для отображения объектов поверх изображений

Плагин для отображения объектов поверх изображений

Вот, буквально пару дней назад, человек попросил объяснить решение его задачи.
Плагин для отображения объектов поверх изображений
Собственно, сама задача:
Имеется картинка. При наведении на нее курсора, поверх изображения появляется блок, в котором содержатся ссылки. Все должно быть универсально, а вдруг на странице будет много картинок?

Теория.
Имеем какой-то блок, картинки внутри которого будут подвергаться нашему правилу. Каждую картинку в этом блоке оборачиваем в еще один блок с классом outofimg. Внутри нового блока создаем блок, который выступает в роли всплывающей подсказки. Если вы совсем запутались, то вот вам наглядный пример:

Плагин для отображения объектов поверх изображений
Плагин для отображения объектов поверх изображений
Плагин для отображения объектов поверх изображений

Чтобы реализовать это при помощи jQuery, для начала подключим его.

Создание html:


Как было сказано. При наведении на изображения, находящиеся внутри определенного блока, всплывает подсказка. Другими словами, нам нужно выбрать все изображения, находящиеся в блоке (#imgs).

Скрипт, полностью рабочий с кодом выше:

$(function(){
var speed = 200; // Скорость анимации
var text = 'text'; // Текст, который бедт выводится при наведении курсора на картинку
$('#imgs') // В этом блоке находятся изображения, к которым будем применять свойства
.find('img') // Выбираем все картинки
.wrap('

') // Помещаем их в блок .outofimg
.parent() // Выбираем блок .outofimg
.append('

'+text+'

') // Внутрь вставляем блок с текстом
.hover(function(){ // При наведении курсора на блок .outofimg, запускается функция
$(this).find('.alertonimg').animate({opacity:'show'},speed); // Плавное появление блока с текстом
},function(){ // Когда убираем курсор с блока .outofimg, запускается функция
$(this).find('.alertonimg').animate({opacity:'hide'},speed); // Плавное исчезновение блока с текстом
})
.end();
});

Посмотреть рабочий пример этого скрипта

После этого, я пошел еще дальше. Написал плагин (банально AlertOnImg).

Для использование этого плагина, подключите его на страницу и объявите для определенного блока:




Рабочий пример плагина AlertOnImg для отображения объектов поверх изображений

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

14 мая 2010 в 8:1525 комментариев Верстка,

Комментарии — 25 комментариев

  1. #10653 vanoID в 23:20, 25 октября 2010:

    Ответить | Цитировать

    изначально спрячьте текст

  2. #10657 Николай в 7:56, 26 октября 2010: (подписался)

    Ответить | Цитировать

    Как его спрятать??.. .у меня всё получаеться в html … а вот когда мощю на страничку то что я выложыл … не получаеться нормально..( можете обьяснить как… не пойму ..

  3. #10658 vanoID в 22:59, 26 октября 2010:

    Ответить | Цитировать

    попробуйте через свойство visible

  4. #10660 Николай в 8:09, 27 октября 2010: (подписался)

    Ответить | Цитировать

    Пробовал таже ситуация.. только наоборот )))))получается…

  5. #10672 Евгений Жлобо в 18:58, 1 ноября 2010:

    Ответить | Цитировать

    Николай, Прячьте текст visibility:visible. Когда наводим курсор на картинку, задаем тексту visibility:hidden.

  6. #12633 Владимир в 14:12, 23 октября 2011:

    Ответить | Цитировать

    Здорово! Как раз хотел что-то подобное сделать у себя на сайте, спасибо…

  7. #19072 Олег в 20:53, 26 марта 2013: (подписался)

    Ответить | Цитировать

    Здравствуйте! Надеюсь я найду помощь на вашем сайте, сам создатель многих сайтов. Но понадобилось создать карту, и вот на этой карте мне нужно ставить маркеры, динамично. Пользователи сами будут делать это. Как это реализовать? Спасибо

  8. #19073 vanoID в 21:21, 26 марта 2013:

    Ответить | Цитировать

    @ Олег:
    Это уже необходимо программировать и через комментарии это точно не разрешить.

  9. #19074 Олег в 21:55, 26 марта 2013: (подписался)

    Ответить | Цитировать

    Что будем делать?) Я могу рассчитывать на помощь?

  10. #19075 vanoID в 22:40, 26 марта 2013:

    Ответить | Цитировать

    @ Олег:
    Могу только подсказать вот это

Добавить комментарий

имя:

e-mail:

сайт:

текст:

Subscribe without commenting