Предлагаем вебмастерам отличный скрипт для увеличения и просмотра под зумом участков картинки. Скрипт устанавливается легко и работает надежно. Установка такого скрипта придает вашей странице солидности, а пользователи получают удобный инструмент. Экномится место и повшается функциональность. Может быть полезен, например, на странице витрины интернет-магазина для того чтобы покупатель мог рассмотреть детали продаваемого вами товара. Для увеличения участка изображения наведите курсор в требуемое место и затем перемещайте по изображению. Можно настроить величину зума.



<style> #wrap {width: 480px; position: relative; } #small { position: relative; width: 100%; } #large { background: white; position: relative; width: 480px; } #mover { position: absolute; top: 0; left: 0; width: 104px; height: 104px; overflow: hidden; z-index: 100; background: white; display: none; } #overlay {border: 1px solid blue; width: 102px; height: 102px; position: relative; } </style>


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


<script type="text/javascript" src="/js/zoomer/zoomer.jquery.js"></script></script>


<script type="text/javascript"> $(function() { $("#wrap").anythingZoomer({ expansionSize: 30, //How far outside the wrap edges the mouse can go speedMultiplier: 1.4, //How much faster in the inside area moves than the mouse smallArea: "#small", //Overrides small area ID largeArea: "#large", //Overrides large area ID zoomPort: "#overlay", //Overrides zoom overlay area ID mover: "#mover" //Overrides mover ID }); }); </script>


<div id="wrap"> <div id="small"> <img src="/examples/zoomer/gorodsmall.gif" alt="small" /> </div> <div id="mover"> <div id="overlay-thing"></div> <div id="large"> <img src="/examples/zoomer/gorodbig.jpg" alt="big" /> </div> </div> </div>