Пример 1.

Нажми меня

js-код

window.addEvent('domready', function() {
	$('clickMe').addEvent('click', function(e) {
		alert('Превед! Ты только что нажал на меня ;)');
		e.stop();
	});
});

html-код

<a id="clickMe" href="#">Нажми меня</a>

Комментарии Serg_pnz

1. Строго говоря конструкция

window.addEvent('domready', function() {
...
});

нужна только один раз в скрипте, всё остальное нужно разместить внутри этой конструкции (смотри исходный js-код примера.)

2. addEvent именно "слушает" страницу. Попробуйте отключить js в браузере и браузер будет выполнять переход по ссылке (в нашем случае по якорю).

3. MooTools работает или управляет именно id элементом, которые можно присвоить хоть слою, хоть картинке, хоть ячейке какой-либо таблицы...

4. $('clickMe') - обращение к элементу по id.

5. ИЕ6 очень капризен ко всему, а к качеству программирования на MooTools особенно, так что внимательно следите за скобками, запятыми при перечислении параметров и точкой-запятой при на концах строк.

6. Эксперементальным путем для страницы был подобран такой заголовок

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

он позволяет выполнять все функции MooTools на ИЕ6.

7. Первый прогон и отладку делайте в FF, но тестируйте тут же в ИЕ6, что бы не уйти с ошибкой далеко и не переписывать весь скрипт.

Пример 2.

Сменить содержимое слоя | Вернуть содержимое слоя

Нормальное содержание

js-код

window.addEvent('domready', function() {
	$('clickMe2').addEvent('click', function(e) {
		$('someDiv').set('html', 'Новое содержание');
		e.stop();
	});
	$('clickMe3').addEvent('click', function(e) {
		$('someDiv').set('html', 'Нормальное содержание');
		e.stop();
	});
});

html-код

<p><a href="#" id="clickMe2">Сменить содержимое слоя</a> | 
<a href="#" id="clickMe3">Вернуть содержимое слоя</a></p>
<div id="someDiv">Нормальное содержание</div>

Пример 3.

Переключи меня

Контент

js-код

window.addEvent('domready', function() {
   var toggleMe =  new Fx.Slide('toggleMe',
      { duration: 1000,
         transition: 'bounce:out'
      }
   );
   toggleMe.hide();

   $('toggler').addEvent('click', function(e) {
      e.stop();
      toggleMe.toggle();
   });
});

html-код

<a href="#" id="toggler">Переключи меня</a>
<div id="toggleMe">Контент</div>

Пример 4.

Спрятать | Показать

Контент

js-код

window.addEvent('domready', function() {
   var toggleMe2 =  new Fx.Slide('toggleMe2',
      {duration: 1500,
        transition: 'elastic:out',
        mode: 'horizontal'}
   );

   $('toggler2').addEvent('click', function(e) {
      toggleMe2.slideOut();
      e.stop();
   });

   $('toggler3').addEvent('click', function(e) {
      toggleMe2.slideIn();
      e.stop();
   });
});

html-код

<a href="#" id="toggler2">Спрятать</a> | <a href="#" id="toggler3">Показать</a>
<div id="toggleMe2">Контент</div>

Ссылки

Скачать пример (zip, 30 kb)

Статья