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

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

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

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

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

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

Создание html:
<div id="imgs">
<img src="1.png" alt="" />
<img src="2.png" alt="" />
</div>

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

Скрипт, полностью рабочий с кодом выше:
$(function(){
var speed = 200; // Скорость анимации
var text = 'text'; // Текст, который бедт выводится при наведении курсора на картинку
$('#imgs') // В этом блоке находятся изображения, к которым будем применять свойства
.find('img') // Выбираем все картинки
.wrap('<div class="outofimg"></div>') // Помещаем их в блок .outofimg
.parent() // Выбираем блок .outofimg
.append('<div class="alertonimg">'+text+'</div>') // Внутрь вставляем блок с текстом
.hover(function(){ // При наведении курсора на блок .outofimg, запускается функция
$(this).find('.alertonimg').animate({opacity:'show'},speed); // Плавное появление блока с текстом
},function(){ // Когда убираем курсор с блока .outofimg, запускается функция
$(this).find('.alertonimg').animate({opacity:'hide'},speed); // Плавное исчезновение блока с текстом
})
.end();
});

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

Для использование этого плагина, подключите его на страницу и объявите для определенного блока:
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.AlertOnImg.js" type="text/javascript"></script>
<script>
$(function(){
$('#imgs').AlertOnImg({
text:'text', // Текст всплывающей подсказки
speed:200 // Скорость появления всплывающей подсказки
});
});
</script>

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

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

  1. #9676 leron в 18:19, 19 мая 2010:

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

    как этот плагин установить на wordpress, подскажите пожалуйста?

  2. #9681 Евгений Поляков в 7:15, 22 мая 2010: (подписался)

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

    leron, это не совсем плагин, а подключается он через шаблоны.

  3. leron, подключаете jQuery, подключаете плагин. Теперь, узнаете блок, в котором картинки будут подвергаться всплывающему действию (например #a). В шапке шаблона вставляете скрипт:

    <script>

    $(function (){

    $('#a').AlertOnImg ({

    text:'text', // Текст всплывающей подсказки

    speed:200 // Скорость появления всплывающей подсказки

    });

    });</script>

  4. #9686 leron в 17:23, 22 мая 2010:

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

    можно более подробно, я немного недопонимаю куда что вставлять на wordpress.

  5. Очень интересно, буду использовать в своей работе. Только написание скриптов у меня хромает. Но в статье все в принципе понятно.

  6. #9689 leron в 20:33, 22 мая 2010:

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

    блок указал content, но не работает к сожалению. не знаю как правильно установить на вордпрессе.

  7. leron, уберите все изменения и следуйте моей инструкции:

    Открываете шапку сайта (header.php);

    Ищите «</head>»;

    Замените ее на:

    <script src="http://bitby.net/wp-demo/files/jquery.js" type="text/javascript"></script>

    <script src="http://bitby.net/wp-demo/web/AlertOnImg/js/jquery.AlertOnImg.js" type="text/javascript"></script>

    <script>

    $(function (){

    $('#a').AlertOnImg ({ // #a — блок, в котором находятся картинки

    text:'text', // Текст всплывающей подсказки

    speed:200 // Скорость появления всплывающей подсказки

    });

    });

    </script>

    </head>

    Вот и все : ).

  8. Алекс, если нужно описание какого-нибудь скрипта, обращайтесь. Также, если нужен сам скрипт.

  9. #9693 leron в 10:22, 23 мая 2010:

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

    Евгений, сделал. все ровно не работает, как узнать блог где картинки находятся.

  10. В шаблоне должен быть этот блок. Давайте так, напишите мне в аську, я вам подробно все объясню =).

  11. #9715 денис в 23:01, 31 мая 2010: (подписался)

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

    а как же сделать так, чтобы вместа текста всплывала какая-то картинка?

  12. text:'text', // Текст всплывающей подсказки

    Замените на:

    text:'<img src="« alt=»"/>',

  13. #9728 денис в 19:01, 3 июня 2010: (подписался)

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

    благодарю, Евгений

  14. #10088 DuCoz в 9:54, 18 августа 2010:

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

    Уруто спасибо вам большое

  15. #10651 Николай в 21:50, 24 октября 2010: (подписался)

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

    Почему у меня при загрузке странички появляеться текст , а когда на него наводиш то обратно ишезает и вновь работает нормально ... что и как это лечить поможете??..(

    unit.in.ua/sitemap.php нижняя чать картинка xml

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    @ Олег:

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

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

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

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

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

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

    @ Олег:

    Могу только подсказать вот это

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

имя:

e-mail:

сайт:

текст:

Подписаться, не комментируя