Прозорче с информация?

daemon666

Registered
Здравейте! Интересно ми е как ще стане като се мине отгоре с мишката да се показва следното прозорче:
1553178X.jpg

Благодаря! +1
 
Код:
<style type="text/css">
#toolTip
{
	border:1px solid #CCC;
	background-color:#F9F9F9;
	width: auto;
	position:fixed;
	visibility: hidden;
	overflow: hidden;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color:#333;
}

#toolTip h1
{
	display:block;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	background-color:#F1F1F1;
	border-bottom:1px solid #CCC;  
	margin:0px;
	padding:0px 2px;   
}

#toolTip p
{
	margin:0px;
	padding:4px 2px;   
}
</style>

<script type="text/javascript">
var xPos;
var yPos;

function showToolTip(title,msg,evt)
{
	if (evt)
	{
		var url = evt.target;
	}
	else
	{
		evt = window.event;
		var url = evt.srcElement;
	}
	xPos = evt.clientX;
	yPos = evt.clientY;

	var toolTip = document.getElementById("toolTip");
	toolTip.innerHTML = "<h1>"+title+"</h1><p>"+msg+"</p>";
	toolTip.style.top = parseInt(yPos)+2 + "px";
	toolTip.style.left = parseInt(xPos)+2 + "px";
	toolTip.style.visibility = "visible";
}

function hideToolTip()
{
	var toolTip = document.getElementById("toolTip");
	toolTip.style.visibility = "hidden";
}
</script>

<div id="toolTip"> </div> 
<a onMouseOver="showToolTip('Тест', 'Примерен текст ;-)', event);" onMouseOut="hideToolTip();" />test</a>
 

Back
Горе