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

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

Воспользуемся помощью магического фреймворка jQuery (почему он? об этом ниже) и css.

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

Создадим маленький скрипт, демонстрирующий реализацию этой возможности:

javascript:

$(function() {
  $('a:has(img)').hover(
    function () {
      var tooltip = $('<span class="tooltip">Кликните для увеличения</span>').css('opacity','0.3');
      $(this).append(tooltip).css({
        position: 'relative',
        textDecoration: 'none',
        display: 'inline-block'
}).attr('target','_blank').find('img').css('display','block').end()
.find('span').show();											   
    },
    function () {
      $(this).find('span').remove();
    }
  );
});

css:

.tooltip {
	display:none; position:absolute; bottom:20px; left:0; right:0;    
	text-align:center; color:#fff; background:#000;
	cursor:pointer; /*IE7*/
}

Будем считать, что jQuery уже подключена.

По большому счету всю работу выполняет метод hover(), который устанавливает обработчики событий для входа и выхода курсора мыши для области элемента.

При наведении курсора на ссылку-рисунок внутрь ее добавляется подсказка (<span class="tooltip">), а самой ссылке задается перечень css-свойств. Двигаясь по цепочке далее, понимаем, что благодаря методу atrr() ссылка откроется в новой вкладке браузера, а рисунку внутри этой ссылки будет задано блочное представление. Остается отыскать нашу подсказку и показать ее с помощью метода show(). Первоначально ведь она скрыта (display:none), что указано в css.

При выходе указателя мыши с картинки подсказка просто удаляется, о чем свидетельствует метод remove() во второй функции.

Обратите внимание, что свойство opacity (прозрачность), установленное с помощью jQuery становится кроссбраузерным, т.е. работает и в стареньких IE тоже, без дополнительных шаманских плясок вроде filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30).

Чтобы все было как надо, в стилевом файле для tooltip-а задано абсолютное позиционирование. Теперь подсказка будет позиционирована относительно ссылки с рисунком, поскольку у последней скрипт устанавливает position:relative. Также в css можно настроить внешний вид и положение всплывающего сообщения относительно картинки.

В принципе, вместо надписи "Кликните для увеличения" вполне можно использовать какой-нибудь значок, например увеличительного стекла или плюсик. На ваше усмотрение.

А jQuery потому, что эта библиотека достаточно проста (точнее, простые вещи на ней делаются просто) и понятна в освоении, обладает большим спектром возможностей и кроме этого, является неотъемлемой частью Maxsite CMS, на которой работает этот блог.

Подсказка в архиве: tooltip-image-link.zip ⁷²

P.s. Данный пример работает в IE6 весьма криво, поскольку в вопросах позиционирования элементов этот браузер ведет себя чёрте-как. Бороться с этой напастью в этом конкретном случае желания нет.