Иногда возникает необходимость дополнительно показать пользователю, что картинка, выступающая ссылкой, ведет на изображение бо́льших размеров.
Воспользуемся помощью магического фреймворка jQuery (почему он? об этом ниже) и CSS.
Задача: необходимо, чтобы при наведении курсора мышки на изображение появлялось сообщение, призывающее кликнуть для просмотра оригинала (пример).

Создадим маленький скрипт, демонстрирующий реализацию этой возможности (будем считать, что jQuery на странице уже подключена):
Javascript:
$(function() {
var tooltip = $('<span>', { // Создание подсказки
text: 'Кликните для увеличения',
id: 'tooltip',
css: {opacity: 0}
});
var a_img = $('a:has(img)') // Стили для ссылок, внутри которых есть изображение; добавление внутрь таких ссылок созданной подсказки
.css({
position: 'relative',
display: 'inline-block',
textDecoration: 'none'
})
.append(tooltip);
var show_tooltip = function () {
$(this).children('#tooltip').css('opacity', 0.3);
};
var hide_tooltip = function () {
$(this).children('#tooltip').css('opacity', 0);
};
a_img.hover(show_tooltip, hide_tooltip); //Изменение прозрачности подсказки
});
CSS:
#tooltip {
position: absolute; left: 0; bottom: 20px;
width: 100%;
text-align: center;
color: #000; background: #fff;
}
/*IE6*/
*html #tooltip {
cursor: pointer;
}
/*IE7*/
*+html #tooltip {
cursor: pointer;
}
В jQuery для создания элемента есть весьма хитрый способ: в функции $()
первым параметром нужно указать необходимый тег, а вторым — передать в виде объекта набор атрибутов, которые должны быть у данного элемента (переменная tooltip
). Также следует отметить, что свойство opacity
, установленное с помощью jQuery становится кроссбраузерным, т. е. работает и в стареньких IE тоже, без дополнительных шаманских плясок вроде
selector {filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30)}
Всю работу выполняет метод hover()
, который изменяет прозрачность подсказки в зависимости от положения курсора мыши относительно ссылки, содержащей рисунок.
В принципе, вместо надписи "Кликните для увеличения" вполне можно использовать какой-нибудь значок, например, увеличительного стекла или плюсик.
Выбор jQuery обусловлен тем, что эта библиотека достаточно проста (точнее, простые вещи на ней делаются просто) и понятна в освоении, обладает большим спектром возможностей и кроме этого, является неотъемлемой частью Maxsite CMS, на которой работает этот блог.
Скачать пример: tooltip-image-link.zip 53