Вот пример того, что должно получиться (щелкните по картинке, чтобы перейти к реальному примеру):
Шаг 1.
Скачаем
и подключим к документу скрипты (mootools и imageMenu), а также таблицу
стилей, отвечающую за внешний вид галереи и за пути к изображениям.
<link href="imageMenu.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="mootools-1.2.1.js"></script>
<script type="text/javascript" src="imageMenu.js"></script>
Шаг 2.
Скачаем
изображения, используемые в примере (конечно, вы можете использовать и
свои картинки), и укажем пути к каждой из них в таблице стилей
imageMenu.css.
#imageMenuulli.landscapesa{
background:url(images/landscap.jpg) repeat scroll 0%;
}
#imageMenuulli.peoplea{
background:url(images/people00.jpg) repeat scroll 0%;
}
#imageMenuulli.naturea{
background:url(images/nature00.jpg) repeat scroll 0%;
}
#imageMenuulli.urbana{
background:url(images/urban000.jpg) repeat scroll 0%;
}
#imageMenuulli.abstracta{
background:url(images/abstract.jpg) repeat scroll 0%;
width:310px;
}
Шаг 3.
В том месте, где вы хотите видеть вашу галерею нужно вставить
следующий список, предварительно помещенный в тег <div> со стилем
"imageMenu".
Ссылки вы можете изменить на свои.
<div id="imageMenu">
<ul>
<li class="landscapes">
<a href="http://www.aaronbirchphotography.com/">Landscapes</a></li>
<li class="people">
<a href="http://www.aaronbirchphotography.com/">People</a></li>
<li class="nature">
<a href="http://www.aaronbirchphotography.com/">Nature</a></li>
<li class="urban">
<a href="http://www.aaronbirchphotography.com/">Urban</a></li>
<li class="abstract">
<a href="http://www.aaronbirchphotography.com/">Abstract</a></li>
</ul>
</div>
Шаг 4.
После этого списка нужно вставить скрипт:
<script type="text/javascript">
window.addEvent('domready', function(){
var myMenu = new ImageMenu($$('#imageMenu a'),
{openWidth:310, border:2, onOpen:function(e,i){alert(e);}});
});
</script>
Вот и все! Надеюсь этот элемент внесет немного разнообразия в дизайн вашего сайта.
Источник урока:
www.phatfusion.net
