Вот, буквально пару дней назад, человек попросил объяснить решение его задачи.
Собственно, сама задача:
Имеется картинка. При наведении на нее курсора, поверх изображения появляется блок, в котором содержатся ссылки. Все должно быть универсально, а вдруг на странице будет много картинок?
Теория.
Имеем какой-то блок, картинки внутри которого будут подвергаться нашему правилу. Каждую картинку в этом блоке оборачиваем в еще один блок с классом 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>
В общем-то это все, что я хотел рассказать вам на данный момент. Если остались вопросы, задавайте.
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
<script>
$(function (){
$('#a').AlertOnImg ({
text:'text', // Текст всплывающей подсказки
speed:200 // Скорость появления всплывающей подсказки
});
});</script>
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Открываете шапку сайта (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>
Вот и все : ).
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Замените на:
text:'<img src="« alt=»"/>',
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
нижняя чать картинка xml
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать