Как сделать анорамное увеличении картинки при наведении курсора

 Как сделать панорамное увеличении картинки при наведении курсора

Как сделать панорамное увеличении картинки при наведении курсора Этот  нужный эффект применяют в основном серьезные интернет магазины для лучшего показа товаров
.Таким образом, вы можете публиковать панорамные фотографии, скриншоты таблиц, карты и другие наглядные пособия.

Дизайн - Добавить гаджет - HTML/JavaScript или в редакторе сообщений необходимо добавить следующий код:

<style>#easy_zoom{
width:450px;
height:350px;
border:5px solid #eee;
background:#fff;
color:#333;
position:fixed;
top:35px;
left:45%;
overflow:hidden;
-moz-box-shadow:0 0 10px #555;
-webkit-box-shadow:0 0 10px #555;
box-shadow:0 0 10px #555;
/* vertical and horizontal alignment used for preloader text */
line-height:400px;
text-align:center;
}</style>
<script src="http://suyb.googlecode.com/files/easyzoom.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function() {
$('a.zoom').each(function(i) {
$(this).easyZoom();
});
});
</script>

Если у вас, еще нет "двигающихся" виджетов, а значит нету (для простоты назовем это) скрипта jquery, то к коду нужно добавить, лучше на самый верх:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/
></script>

И последний шаг, что бы скрип узнавал какую картинку нужно обрабатывать, а какую нет, необходимо прикрепить идентификатор class="zoom". Делается это просто. Нажимаем на HTML в текстовом редакторе Блогспота ваших статей и находим такой код картинки:
<a href="http://4.bp.blogspot.com/-HWPUFvVbyDU/UVCpK6ZXnUI/AAAAAAAADXg/T9fBXovzgE8/s1600/530_5-930.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="150" src="http://4.bp.blogspot.com/-HWPUFvVbyDU/UVCpK6ZXnUI/AAAAAAAADXg/T9fBXovzgE8/s320/530_5-930.jpg" width="400" /></a>

В самом начале сразу после <a вставляем class="zoom" и должно получится так:

<a class="zoom" href="http://4.bp.blogspot.com/-HWPUFvVbyDU/UVCpK6ZXnUI/AAAAAAAADXg/T9fBXovzgE8/s1600/530_5-930.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="150" src="http://4.bp.blogspot.com/-HWPUFvVbyDU/UVCpK6ZXnUI/AAAAAAAADXg/T9fBXovzgE8/s320/530_5-930.jpg" width="400" /></a>