В данный момент огромное количество сервисов, которые предоставляют возможность создать скриншот (снимок экрана) сайта онлайн. Каждый из них имеет свои плюсы и минусы, некоторые утомляют временем ожидания создания снимка, некоторые используют закэшированные изображения , которые зачастую не соответствуют действительности, но есть сервисы создания скриншотов, которые радуют скоростью отдачи снимка и его адекватностью в данный момент и не искажают верстку сайта. На мое мнение, одним из лучших сервисов по созданию скриншотов любой страницы сайта в интернете предоставляет сайт S-Shot.ru

Чем же он так хорош? Короткое и внятное API, простота использования и адекватность. Удобный и простой интерфейс для создания скриншота сайта, необходимо передать адрес сайта, разрешение снимка и размер изображения получаемого в ответ(достаточно указать ширину). Для создания снимков экрана используется свободный движок WebKit, используемый в таких браузераз как: Safari, Google Chrome и т.д.

API и документация
http://mini.s-shot.ru/разрешение/размер/формат/?адрес страницы

• адрес страницы – URL страницы сайта
• разрешение - указывается в пикселях, например (1024x768)
• размер - ограничивается максимальное значение высоты и ширины, масштабированной картинки
• формат - может принимать два значения (JPEG|PNG), по умолчанию "JPEG"

Пример: http://mini.s-shot.ru/1024x768/240/jpeg/?http://miran.com.ua/

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

Подключаем JQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Добавляем скрипт для отображения скриншота на загрузку html страницы при наведении мышкой:

$(document).ready(function(){
$('a.screenshot').hover(
function(){
var path = $(this).attr('href');
$(this).append('');
},
function(){
$('img.screenshot').remove();
})});

Добавляем стилизацию снимка:

img.screenshot {
 position: absolute; 
 z-index: 100;
 border: 1px solid #CCC;
 margin-left: 10px;
 box-shadow: 0 0 10px #222222;
}

Уточнение к CSS:

box-shadow – создаст тень вокруг изображения скриншота, визуально очень хорошо смотрится, но минуc в том, что тень отработает только в браузерах с поддержкой CSS3: IE 9, Chrome 9 и выше, Opera 10.5 и выше, Safari выше 5-ой версии и Firefox выше 4-ой.

Последним штрихом будет добавления класса «screenshot» для ссылок, которым Вы хотите добавить эффект скриншот ссылок.

Пример: MIRAN