Оригинальная подсветка-указатель любых элементов сайта
C одной стороны простой, а с другой - просто незаменимый плагин, который позволит одним кликом на кнопку указать пользователям на нужные элементы вашего сайта
Установка:
После /head на нужных страницах сайта вставляйте:
Code
<script src="/js/jquery.seek.js" type="text/javascript"></script>
<script src="/js/jquery.easing.1.3.js" type="text/javascript"></script>
<link href="/css/seek-demo.css" rel="stylesheet" type="text/css" />
разу после предыдущего кода вставляйте:
1) Для эффекта подсветки формы:
Code
<script type="text/javascript">
$(function() {
$("#btnTestForm").click( function() {
$("#fsForm").seek({ css: { borderStyle: "dotted", borderWidth: "1px", borderColor: "Green" },
animation: { speed: 600 }
});
});
$("#btnTestForm2").click( function() {
$("#txtNome, #txtCognome").seek({ css: { borderStyle: "dotted",
borderWidth: "1px",
borderColor: "Green" },
animation: { speed: 600 },
startFrom: $("#fsForm")
});
});
});
</script>
2) Для подсветки картинок:
Code
<script type="text/javascript">
$(function() {
$("#btnTestImages").click( function () {
$("fieldset img").seek({ css: { borderStyle: "solid", borderWidth: "2px" },
animation: { easeFunction: "easeInExpo", speed: 900 },
multiple: { simultaneous: false, interval: 300 }
});
});
$("fieldset img").click( function() {
$(this).seek({ css: { borderStyle: "solid", borderWidth: "2px" },
animation: { easeFunction: "easeInExpo", speed: 500 }
});
});
});
</script>
Следующий код в то место, где будут элементы, которые необходимо подсвечивать:
1) Форма:
Code
<input type="button" id="btnTestForm" value="Кнопка выделения всей формы" />
<input type="button" id="btnTestForm2" value="Кнопка выделения полей формы" />
<fieldset id="fsForm">
<legend>Это ваша форма</legend>
<label>Логин
<input id="txtNome" type="text" />
</label>
<label>Пароль
<input id="txtCognome" type="text" />
</label>
<input type="button" id="btnSubmit" onclick="javascript:return false;" value="ОК" />
</fieldset>
2) Группа картинок:
Code
<input type="button" id="btnTestImages" value="Кнопка поочерёдного выделения всех картинок" />
<fieldset id="fsPhotogallery">
<legend>Здесь ваши картинки (Клик по картинке для выделения</legend>
<img src="Ссылка на картинку" />
<img src="Ссылка на картинку" />
<img src="Ссылка на картинку" />
<img src="Ссылка на картинку" />
</fieldset>
Внимательно всмотритесь в предоставленные коды, изучите соотношения и, когда разберётесь - сможете выделить абсолютно любой элемент на сайте.
Осталось лишь залить два скрипта из прикреплённого архива в папку js и стиль в папку css