Создаем всплывающую подсказку для картинок

Опубликовано: 01.09.2018

видео Создаем всплывающую подсказку для картинок

5. Как вставить картинку в HTML

Давайте рассмотрим как осуществить интересный визуальный эффект для картинок на вашем сайте в виде всплывающей подсказки (подписи, надписи) с помощью jQuery.



Скачать исходники для статьи можно ниже

 

Вот так у нас будет выглядеть картинка с всплывающей подсказкой, когда курсор мыши на нее не наведен:

 

А вот так она будет выглядеть, когда курсор наведен:


Всплывающие подсказки на Adobe Muse

 

Демонстрационные примеры можете посмотреть по следующим ссылкам:

http://webdesignandsuch.com/jquery-sliding-boxes-and-captions/

или тут:

http://mnogoblogru.hostenko.com/privet-mir/

 

1. Прежде всего подключим к сайту поддержку JQuery — для этого входим в панель управления вашим сайтом, выбираем в левом меню пункт «Внешний вид» и его подпункт «Редактор», справа в списке шаблонов ищем файл header.php, открываем его и находим в нем тег </hеаd> — перед ним и вставляем следующий код:


Красивый лайтбокс для сайта

 

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"></script>

2. Здесь же, сразу за вышеуказанным кодом, подключим сам скрипт , который и будет делать эффект всплывающей подсказки:  

<script type="text/javascript">// <![CDATA[ $(document).ready(function(){ $('.boxgrid.caption').hover(function(){ $(".cover", this).stop().animate({top:'130px'},{queue:false,duration:160}); }, function() { $(".cover", this).stop().animate({top:'190px'},{queue:false,duration:160}); }); }); // ]]></script>

3. Далее нам нужно добавить в шаблоне style.css некоторый код для данного эффекта — для этого открываем опять «Редактор» («Внешний вид» — «Редактор»), справа среди списка шаблонов находим файл style.css, открываем его и в самый конец добавляем следующий код:

.boxgrid h3 { font-size:16px; font-family:'Droid Sans', Arial, sans-serif; font-weight:bold; color:#FFF; margin:10px; } .boxgrid { float:left; width:280px; height:230px; margin:5px; border:10px solid #e6e6db; background:#161613; overflow:hidden; position:relative; } .boxgrid img { position:absolute; top:0; left:0; border:0; } .boxgrid img:hover { position:absolute; top:0; left:0; border:0; } .boxgrid p { font-size:13px; font-family:Arial, Helvetica, sans-serif; font-weight:bold; color:#fffccc; padding:0 10px; padding-left:25px; } .boxcaption { position:absolute; float:left; width:100%; height:100px; border-top:2px solid #fff; background:#0c4a17 url(arrow.png) -1px 40px no-repeat; opacity: .8; } .caption .boxcaption { top:190px; left:0; } .moreLink { display:block; position:absolute; width:68px; height:29px; background:url('http://mnogoblogru.hostenko.com/wp-content/uploads/more.png'); text-indent:-9999px; top:65px; right:10px; outline:none; }

4. Теперь выбираем нужную нам картинку и вставляем ее, например, в запись (пост) вашего сайта со следующим кодом.

Незабываем, что код в записи нужно вставлять в закладке HTML (не «Визуальный редактор»).

</pre> <div class="boxgrid caption"><img src="http://mnogoblogru.hostenko.com/wp-content/uploads/3.jpg" alt="" /> <div class="cover boxcaption"> <h3>Название статьи</h3> Краткое описание статьи <a class="moreLink" href="http://mnogoblogru.hostenko.com/">More</a></div> </div> <pre>

Вот теперь все готово!

 

PS: Данный визуальный эффект можно воссоздать и с помощью CSS, но об этом напишу в одной из следующих статей.

rss