Вертикальное прокручивающееся меню

<div class="sc_menu_wrapper">
	<div class="sc_menu">
	    <a title="Меню" href="/"><img src="/images/1.jpg" alt="Меню"/></a>
	    <a title="Навигация" href="/"><img src="/images/2.jpg" alt="Навигация"/></a>
	    <a title="jQuery" href="/"><img src="/images/3.jpg" alt="jQuery"/></a>		
	    <a title="CSS" href="/"><img src="/images/4.jpg" alt="CSS"/></a>
	    <a title="Вертикаль" href="/"><img src="/images/5.jpg" alt="Вертикаль"/></a>
	    <a title="Меню" href="/"><img src="/images/1.jpg" alt="Меню"/></a>
	    <a title="Навигация" href="/"><img src="/images/2.jpg" alt="Навигация"/></a>
	    <a title="jQuery" href="/"><img src="/images/3.jpg" alt="jQuery"/></a>
	    <a title="Навигация" href="/"><img src="/images/4.jpg" alt="Навигация" /></a>
	    <a title="JavaScript" href="/"><img src="/images/5.jpg" alt="JavaScript"/></a>
	    <a title="Меню" href="/"><img src="/images/1.jpg" alt="Меню"/></a>
	    <a title="Навигация" href="/"><img src="/images/2.jpg" alt="Навигация"/></a>
	    <a title="JavaScript" href="/"><img src="/images/3.jpg" alt="Javascript"/></a>		
	</div>
</div>

div.sc_menu_wrapper {
	position: relative; 	
	height: 500px;
	/* Делаем больше, чем фотография, так как нужно место для полоски прокрутки. */
	width: 160px;
	
	margin-top: 30px;
	overflow: auto;
}
div.sc_menu {
	padding: 15px 0;
}
.sc_menu a {
	display: block;
	margin-bottom: 5px;
	width: 130px;
	
	border: 2px rgb(79, 79, 79) solid;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;		
	
	/* Когда нет изображений */
	color: #fff;
	background: rgb(79, 79, 79);	
}
.sc_menu a:hover {
	border-color: rgb(130, 130, 130);
	border-style: dotted;
}
.sc_menu img {
	display: block;
	border: none;
}

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

function makeScrollable(wrapper, scrollable){
}

$(function(){   
  makeScrollable("div.sc_menu_wrapper", "div.sc_menu");
});

function makeScrollable(wrapper, scrollable){
	// Получаем элементы jQuery
	var wrapper = $(wrapper), scrollable = $(scrollable);
	
	// Скрываем изображения, пока они не загружены
	scrollable.hide();
	var loading = $('<div class="loading">Загрузка...</div>').appendTo(wrapper);
	
	// Запускаем функцию, которая проверяет загрузку всех изображений
	var interval = setInterval(function(){
		var images = scrollable.find('img');
		var completed = 0;
		
		// Подсчитываем количество загруженных изображений
		images.each(function(){
			if (this.complete) completed++;	
		});
		
		if (completed == images.length){
			clearInterval(interval);
			// Таймаут добавлен для устранения проблем с Chrome
			setTimeout(function(){
				
				loading.hide();
				// Удаляем полоску прокрутки
				wrapper.css({overflow: 'hidden'});						
				
				scrollable.slideDown('slow', function(){
					enable();	
				});					
			}, 1000);	
		}
	}, 100);

.sc_menu_wrapper .loading {
  position: absolute;
  top: 50px;
  left: 10px;

  margin: 0 auto;
  padding: 10px;

  width: 100px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;

  text-align: center;
  color: #fff;
  border: 1px solid rgb(79, 79, 79);
  background: #1F1D1D;
}

function enable(){
		// Высота области вверху и внизу, в которой нет реакции на перемещение курсора мыши
		var inactiveMargin = 99;					
		// Кэшируем параметры для повышения производительности
		var wrapperWidth = wrapper.width();
		var wrapperHeight = wrapper.height();
		// Используем наружную высоту для включения отступов
		var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin;
		
		//Когда пользователь перемещает курсор мыши по меню
		wrapper.mousemove(function(e){
			var wrapperOffset = wrapper.offset();
		
			// Прокручиваем меню
			var top = (e.pageY -  wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight - inactiveMargin;
			if (top < 0){
				top = 0;
			}			
			wrapper.scrollTop(top);
		});
		
		
	}

/* Стили для подсказок */
.sc_menu_tooltip {
	display: block;
	position: absolute;
	
	padding: 6px;
	font-size: 12px;	
	color: #fff;
	
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;	
	
	border: 1px solid rgb(79, 79, 79);
	background: rgb(0, 0, 0);
	/* Делаем фон немного прозрачным для браузеров, которые поддерживают rgba */	
	background: rgba(0, 0, 0, 0.5);
}

function enable(){
		// Высота области вверху и внизу, в которой нет реакции на перемещение курсора мыши
		var inactiveMargin = 99;					
		// Кэшируем параметры для повышения производительности
		var wrapperWidth = wrapper.width();
		var wrapperHeight = wrapper.height();
		// Используем наружную высоту для включения отступов
		var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin;
		// Не будем кэшировать wrapperOffset, так как она поменяется при изменении окна просмотра
		// Можно использовать событие onresize, но овчинка не стоит выделки
		// var wrapperOffset = wrapper.offset();
		
		// Создаем невидимую подсказку
		var tooltip = $('<div class="sc_menu_tooltip"></div>')
			.css('opacity', 0)
			.appendTo(wrapper);
	
		// Сохраняем заголовки меню
		scrollable.find('a').each(function(){				
			$(this).data('tooltipText', this.title);				
		});
		
		// Удаляем подсказки по умолчанию
		scrollable.find('a').removeAttr('title');		
		// Удаляем подсказки по умолчанию в IE
		scrollable.find('img').removeAttr('alt');	
		
		var lastTarget;
		//Когда пользователь перемещает курсор мыши по меню
		wrapper.mousemove(function(e){
			// Сохраняем цель
			lastTarget = e.target;

			var wrapperOffset = wrapper.offset();
		
			var tooltipLeft = e.pageX - wrapperOffset.left;
			// Не даем подсказке выходить за рамки меню.
			// Так как свойство overflow имеет значение hidden, мы не сможем их увидеть. 
			tooltipLeft = Math.min(tooltipLeft, wrapperWidth - 75);
			
			var tooltipTop = e.pageY - wrapperOffset.top + wrapper.scrollTop() - 40;
			// Перемещаем подсказку под курсор мыши, когда мы находимся в верхней части меню
			if (e.pageY - wrapperOffset.top < wrapperHeight/2){
				tooltipTop += 80;
			}				
			tooltip.css({top: tooltipTop, left: tooltipLeft});				
			
			// Прокручиваем меню
			var top = (e.pageY -  wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight - inactiveMargin;
			if (top < 0){
				top = 0;
			}			
			wrapper.scrollTop(top);
		});
		
		// Устанавливаем интервал, который помогает решить проблему производительности в IE
		var interval = setInterval(function(){
			if (!lastTarget) return;	
										
			var currentText = tooltip.text();
			
			if (lastTarget.nodeName == 'IMG'){					
				// Данные привязываются к ссылке, а не к изображению
				var newText = $(lastTarget).parent().data('tooltipText');

				// Выводим подсказку с новым текстом
				if (currentText != newText) {
					tooltip
						.stop(true)
						.css('opacity', 0)	
						.text(newText)
						.animate({opacity: 1}, 1000);
				}					
			}
		}, 200);
		
		// Скрываем подсказку, когда курсор мыши покидает меню
		wrapper.mouseleave(function(){
			lastTarget = false;
			tooltip.stop(true).css('opacity', 0).text('');
		});			
		
		/*
		//Использование события hover приводит к проблемам с производительностью
		scrollable.find('a').hover(function(){
			tooltip
				.stop()
				.css('opacity', 0)
				.text($(this).data('tooltipText'))
				.animate({opacity: 1}, 1000);
	
		}, function(){
			tooltip
				.stop()
				.animate({opacity: 0}, 300);
		});
		*/			
	}