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