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

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

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