Image Menu mit mootools

Wie Ihr sehen könnt, eine echt coole Art, verschieden Links darzustellen...

Als Basis verwende ich hierzu die Version von Samuel Birch:

/**************************************************************
	Script	: Image Menu
	Version	: 2.2
	Authors	: Samuel Birch
	Desc	: 
	Licence	: Open Source MIT Licence
**************************************************************/

Leider war das Menu noch nicht Websitebaker tauglich. Somit hab ich da mal was gebastelt...

Das ImageMenu basiert auf verschiedenen Elementen.

1.) Die Script's und die CSS Datei... (Im Template einbinden):

<script type="text/javascript" src="<?php echo TEMPLATE_DIR; ?>/imagemenu/mootools.js"></script>
<script type="text/javascript" src="<?php echo TEMPLATE_DIR; ?>/imagemenu/imageMenu.js"></script>
<link href="<?php echo TEMPLATE_DIR; ?>/imagemenu/imageMenu.css" rel="stylesheet" type="text/css" media="screen" />

Hier findet Ihr die von mir verwendeten Dateien: imageMenu.css | imageMenu.js | mootools.js

2.) Der interne Javascript-Aufruf... (Als Javascript mit Code2 Modul):

window.addEvent('domready', function(){
var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:310, border:2});
});

3.) Der eigentliche Menu-Code... (Als normaler WYSIWYG-Abschnitt)

<div id="imageMenu">
<ul>
    <li class="imgmenu_01"><a title="Telefone Swisscom" target="_blank" href="#">Telefone Swisscom</a></li>
    <li class="imgmenu_02"><a title="Jabra / GN Netcom" target="_blank" href="#">Jabra / GN Netcom</a></li>
    <li class="imgmenu_03"><a title="Freisprecheinrichtungen" target="_blank" href="#">Freisprecheinrichtungen</a></li>
    <li class="imgmenu_04"><a title="Motorrad-Zubeh&ouml;r" target="_blank" href="#">Motorrad-Zubeh&ouml;r</a></li>
    <li class="imgmenu_05"><a title="RAM-Mount" target="_blank" href="#">RAM-Mount</a></li>
    <li class="imgmenu_06"><a title="Navigation / GPS" target="_blank" href="#">Navigation / GPS</a></li>
    <li class="imgmenu_07"><a title="Motorrad-Reifen" target="_blank" href="#">Motorrad-Reifen</a></li>
</ul>
</div>

4.) Die Bilder:

Die Bilder werden in der CSS-Datei definiert und im HTML Code mittels class aufgerufen...

Versucht es einfach selber mal oder ergänzt das Menu mit einem Link mehr oder weniger...
Ihr werdet sehen, es ist einfacher als gedacht.

Viel Spass!