Обратите внимание посетителей

e24SpotLight - Mootools плагин, который позволяет обратить внимание посетителей на любой объект на странице. Получается неплохой эффект, когда необходимая область подсвечивается.

Возможные опции

- transition: Названия эффекта перехода, например: ‘quad-out’, ‘bounce-in’, ‘elastic-in’, etc.
- duration: Продолжительность эффекта в милисекундах.
- zindex: z-index слоя наложения.
- bgcolor: цвет слоя наложения.
- opacity: прозрачность слоя.
- margin: поля области подсветки.
- delay: задержка в милисекундах перед тем как спрятать слой. Если установить 0, тогда слой не будет исчезать просто так (только при клике).

Методы

* lightOn: Включение эффекта. Можно задать название элемента, а можно и точные координаты {left: 100, top: 150, width: 300, height: 300}.
* lightOff: Выключение

Разбор кода демо версии

Первым делом нам необходимо в шапке документа подключить фреймворк, скрипт плагин и таблицу стилей.

		<link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" title="no title" charset="utf-8">
		<script type="text/javascript" src="js/mootools-1.2.2-core-nc.js"></script>			
		<script type="text/javascript" src="js/e24spotlight-1.0.js"></script>

Далее в теле документа прописываем все элементы для выделения.

 <h3 id="text">Нажмите на любой квадрат</h3>
  </div>
 <div id="visor" >

  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  </div>
    

Тут мы создали один текстовый элемент, а также много квадратов, внешний вид которых полностью прописан в таблице стилей.

И в самом конце перед закрывающим тегом </body> необходимо инициализировать функцию плагина:

<script type="text/javascript" >
		/* <![CDATA[ */
			window.addEvent('domready', function() {
				var spotLight = new e24SpotLight({
					transition: 'quad:in',
					duration: 200,
					delay: 2000
				});
				$$('#visor div').each(function(el) {
					el.addEvent('click', function(e) {
						e.stop();
						spotLight.lightOn(el);	
					});
				});
				var text = $('text');
				text.addEvent('click', function(e) {
					e.stop();
					spotLight.lightOn(text);	
				});
			});
			
		/* ]]> */	
		</script>	 

За несколько минут можно создать довольно увлекательный эффект. Главное, дайте волю своему воображению.