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

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

Теория.
Имеем какой-то блок, картинки внутри которого будут подвергаться нашему правилу. Каждую картинку в этом блоке оборачиваем в еще один блок с классом 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).

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




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

Комментарии — 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. Николай, Прячьте текст 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