<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen"/>

<div id="hs_container" class="hs_container">  
  <div class="hs_area hs_area1">  
  <img class="hs_visible" src="Ссылка на изображение" alt=""/>  
  <img src="Ссылка на изображение" alt=""/>  
  <img src="Ссылка на изображение" alt=""/>  
  </div>  
  <div class="hs_area hs_area2">  
  <img class="hs_visible" src="Ссылка на изображение" alt=""/>  
  <img src="Ссылка на изображение" alt=""/>  
  <img src="Ссылка на изображение" alt=""/>  
  </div>  
  <div class="hs_area hs_area3">  
  <img class="hs_visible" src="Ссылка на изображение" alt=""/>  
  <img src="Ссылка на изображение" alt=""/>  
  <img src="Ссылка на изображение" alt=""/>  
  </div>  
  <div class="hs_area hs_area4">  
  <img class="hs_visible" src="Ссылка на изображение" alt=""/>  
  <img src="Ссылка на изображение" alt=""/>  
  <img src="Ссылка на изображение" alt=""/>  
  </div>  
  <div class="hs_area hs_area5">  
  <img class="hs_visible" src="Ссылка на изображение" alt=""/>  
  <img src="Ссылка на изображение" alt=""/>  
  <img src="Ссылка на изображение" alt=""/>  
  </div>  
  </div>

<script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>  
  <script type="text/javascript">  
  $(function() {  
  //custom animations to use  
  //in the transitions  
  var animations = ['right','left','top','bottom','rightFade','leftFade','topFade','bottomFade'];  
  var total_anim = animations.length;  
  //just change this to one of your choice  
  var easeType = 'swing';  
  //the speed of each transition  
  var animSpeed = 450;  
  //caching  
  var $hs_container = $('#hs_container');  
  var $hs_areas = $hs_container.find('.hs_area');  
   
  //first preload all images  
  $hs_images = $hs_container.find('img');  
  var total_images = $hs_images.length;  
  var cnt = 0;  
  $hs_images.each(function(){  
  var $this = $(this);  
  $('<img/>').load(function(){  
  ++cnt;  
  if(cnt == total_images){  
  $hs_areas.each(function(){  
  var $area = $(this);  
  //when the mouse enters the area we animate the current  
  //image (random animation from array animations),  
  //so that the next one gets visible.  
  //"over" is a flag indicating if we can animate  
  //an area or not (we don't want 2 animations  
  //at the same time for each area)  
  $area.data('over',true).bind('mouseenter',function(){  
  if($area.data('over')){  
  $area.data('over',false);  
  //how many images in this area?  
  var total = $area.children().length;  
  //visible image  
  var $current = $area.find('img:visible');  
  //index of visible image  
  var idx_current = $current.index();  
  //the next image that's going to be displayed.  
  //either the next one, or the first one if the current is the last  
  var $next = (idx_current == total-1) ? $area.children(':first') : $current.next();  
  //show next one (not yet visible)  
  $next.show();  
  //get a random animation  
  var anim = animations[Math.floor(Math.random()*total_anim)];  
  switch(anim){  
  //current slides out from the right  
  case 'right':  
  $current.animate({  
  'left':$current.width()+'px'  
  },  
  animSpeed,  
  easeType,  
  function(){  
  $current.hide().css({  
  'z-index' : '1',  
  'left' : '0px'  
  });  
  $next.css('z-index','9999');  
  $area.data('over',true);  
  });  
  break;  
  //current slides out from the left  
  case 'left':  
  $current.animate({  
  'left':-$current.width()+'px'  
  },  
  animSpeed,  
  easeType,  
  function(){  
  $current.hide().css({  
  'z-index' : '1',  
  'left' : '0px'  
  });  
  $next.css('z-index','9999');  
  $area.data('over',true);  
  });  
  break;  
  //current slides out from the top  
  case 'top':  
  $current.animate({  
  'top':-$current.height()+'px'  
  },  
  animSpeed,  
  easeType,  
  function(){  
  $current.hide().css({  
  'z-index' : '1',  
  'top' : '0px'  
  });  
  $next.css('z-index','9999');  
  $area.data('over',true);  
  });  
  break;  
  //current slides out from the bottom  
  case 'bottom':  
  $current.animate({  
  'top':$current.height()+'px'  
  },  
  animSpeed,  
  easeType,  
  function(){  
  $current.hide().css({  
  'z-index' : '1',  
  'top' : '0px'  
  });  
  $next.css('z-index','9999');  
  $area.data('over',true);  
  });  
  break;  
  //current slides out from the right and fades out  
  case 'rightFade':  
  $current.animate({  
  'left':$current.width()+'px',  
  'opacity':'0'  
  },  
  animSpeed,  
  easeType,  
  function(){  
  $current.hide().css({  
  'z-index' : '1',  
  'left' : '0px',  
  'opacity' : '1'  
  });  
  $next.css('z-index','9999');  
  $area.data('over',true);  
  });  
  break;  
  //current slides out from the left and fades out  
  case 'leftFade':  
  $current.animate({  
  'left':-$current.width()+'px','opacity':'0'  
  },  
  animSpeed,  
  easeType,  
  function(){  
  $current.hide().css({  
  'z-index' : '1',  
  'left' : '0px',  
  'opacity' : '1'  
  });  
  $next.css('z-index','9999');  
  $area.data('over',true);  
  });  
  break;  
  //current slides out from the top and fades out  
  case 'topFade':  
  $current.animate({  
  'top':-$current.height()+'px',  
  'opacity':'0'  
  },  
  animSpeed,  
  easeType,  
  function(){  
  $current.hide().css({  
  'z-index' : '1',  
  'top' : '0px',  
  'opacity' : '1'  
  });  
  $next.css('z-index','9999');  
  $area.data('over',true);  
  });  
  break;  
  //current slides out from the bottom and fades out  
  case 'bottomFade':  
  $current.animate({  
  'top':$current.height()+'px',  
  'opacity':'0'  
  },  
  animSpeed,  
  easeType,  
  function(){  
  $current.hide().css({  
  'z-index' : '1',  
  'top' : '0px',  
  'opacity' : '1'  
  });  
  $next.css('z-index','9999');  
  $area.data('over',true);  
  });  
  break;  
  default:  
  $current.animate({  
  'left':-$current.width()+'px'  
  },  
  animSpeed,  
  easeType,  
  function(){  
  $current.hide().css({  
  'z-index' : '1',  
  'left' : '0px'  
  });  
  $next.css('z-index','9999');  
  $area.data('over',true);  
  });  
  break;  
  }  
  }  
  });  
  });  
   
  //when clicking the hs_container all areas get slided  
  //(just for fun...you would probably want to enter the site  
  //or something similar)  
  $hs_container.bind('click',function(){  
  $hs_areas.trigger('mouseenter');  
  });  
  }  
  }).attr('src',$this.attr('src'));  
  });  
   
   
  });  
  </script>