version 2.3
horizontal menu, reveals more of the image as you rollover it.
add these javascript files to your page
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="/js/fx.elements.js"></script>
<script type="text/javascript" src="/js/imageMenu.js"></script>
create your menu html like this
<div id="imageMenuBasic" class="imageMenu">
<ul>
<li class="landscapes"><a href="#">Landscapes</a></li>
<li class="people"><a href="h#">People</a></li>
<li class="nature"><a href="#">Nature</a></li>
<li class="urban"><a href="#">Urban</a></li>
<li class="abstract"><a href="#">Abstract</a></li>
</ul>
</div>
style it something like this
.imageMenu { position: relative; width: 500px; height: 200px; overflow: hidden; }
.imageMenu ul { list-style: none; margin: 0px; display: block; height: 200px; width: 1000px; }
.imageMenu ul li { float: left; }
.imageMenu ul li a { text-indent: -1000px; background:#FFFFFF none repeat scroll 0%; border-right: 2px solid #fff; cursor:pointer; display:block; overflow:hidden; width:98px; height: 200px; }
.imageMenu ul li.landscapes a { background: url(/images/imageMenu/landscapes.jpg) repeat scroll 0%; }
initialize the script like this
window.addEvent('domready', function(){
new ImageMenu($$('#imageMenu a'), {
openWidth:310,
border:2
});
});
new ImageMenu(elements [, options]);