Медная поляна

Иногда возникает необходимость дополнительно показать пользователю, что картинка, выступающая ссылкой, ведет на изображение бо́льших размеров.

Воспользуемся помощью магического фреймворка 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 188

6 комментариев

Максим Покровский

Можно обойтись и без jquery. Одним :hover.

Без дополнительного блока с подсказкой, вряд ли. В данном случае jQuery создает такой блок автоматически.

Wave

Восьмой осёл — аж никак не пенсионного возраста, а в недалёком будущем обещает захватить солидную долю десктопов. Как по мне, лучше сделать универсально для всех с помощью фоновых картинок, чем извращаться с условными комментариями и т.п.

эээ... не совсем понял про условные комментарии.

Решил повторить у себя, но возникла проблема. Скрипт выводит запись при наведению на любую картинку-ссылку. Как сделать, чтобы только в рамках поста выводил надпись?

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

$('div.page-content a:has(img)').hover(
/*далее по тексту*/