JavaScript
Некоторые полезные скрипты и возможности JavaScript.

Подсказка появляется при клике на блок около курсора и пропадает, если убрать курсор с формы. Подсказка - это отдельный скрытый блок. Так как скрипт на Аяксе, необходимо подключение библиотеки jquery-1.7.1.js. Div подсказки должен находиться в div'е блока, где он вызывается.



Скрипт отвечает за вычисление координат и показ/скрытие блока-подсказки.

== Пример ==

<STYLE type="text/css">
.NBblock {
	background:#666666;
	z-index: 100;
	padding:10px;
	color:#fff;
	width:120px;
	border:1px solid #fff;
	position:absolute;
}
#LogOutForm {
	background: #ccc;
	width:200px;
	position:relative;
	padding:10px;
}
</STYLE>

 

<script type="text/javascript">
function tooltipshow(blockID) {
		$("#LogOutForm").click(function(e){
			var offset = $(this).offset();
			var x = e.pageX - offset.left + 10;
			var y = e.pageY - offset.top + 10;
			var elementName = document.getElementById(blockID);
			elementName.style.display='block';
			elementName.style.left = x + 'px';
			elementName.style.top = y + 'px';
		});
}

function tooltiphide(blockID) {
		var elementName = document.getElementById(blockID);
		elementName.style.display='none';
	}
</script>

Непосредственно сам вывод блока, в который можно и нужно кликнуть для вывода подсказки. Если внести небольшие поправки, то подсказка будет появляться при попадании на поле и даже двигаться за курсором.

<div id="LogOutForm" onmouseover="tooltipshow('NBblock')" onmouseout="tooltiphide('NBblock')"> 
	Текст на странице - кликните в любом месте блока<br />
	Текст на странице<br />
	Текст на странице<br />
	Текст на странице<br />
	Текст на странице<br />
	<div class="NBblock" id="NBblock" style="display: none;"> Текст подсказки </div>
</div>

 

Реклама на сайте

Игра кено скачать
Игры онлайн. Азартные игры в интернете
casinofaraon.com
www.niktrend.ru
Портал мастеров ремонта и отделки
niktrend.ru