Friday, November 9, 2007

MOUSE PONTER DETECTION WITH TRANSPARENT DINAMIC DIV

<html>

<head>

<title></title>

<script type="text/JavaScript" language="JavaScript">

<!--

function cleanup(e) {

if (typeof(loopid) != "undefined")

clearInterval(loopid);


document.onmousemove = null;

document.getElementById("malih").style.display = "none";



return true;

}


function trackMove(e) {

if (arguments.length == 0) e = event;


if (document.layers) {

document.f.mX.value = e.pageX;

document.f.mY.value = e.pageY;

}

else {

document.f.mX.value = e.clientX;

document.f.mY.value = e.clientY;

}

document.getElementById("malih").style.display = "block";

document.getElementById("malih").style.left = e.clientX+10;

document.getElementById("malih").style.top = e.clientY+10;

}


function init() {

clickStarted = false;

document.onmousemove = trackMove;

if (document.layers) {

document.captureEvents(Event.MOUSEMOVE);

}

}

//-->

</script>


</head>


<body>


<a href="#" onMouseOver="init();" onMouseOut="cleanup()">ARAHKAN MOUSE KESINI</a>

<form name="f">

MouseMove X: <input type="text" name="mX" value="0" size="4"><br>

MouseMove Y: <input type="text" name="mY" value="0" size="4"><br>


<br><br>


</form>

<div id="malih" style="border:1px solid #000000;position:absolute;width:100px;display:none; background:#cccccc;opacity:0.8;"><br>Tampilan yang harusnya keluar</div>


</body>

</html>

TRANSPARENT DIV

HTML:

<div id="container">

<div id="opaquetext">

This is a normal text

on a translucent background

</div>

</div>

CSS:


#container {

background-color: #ffffff; /* the background */

filter:alpha(opacity=50); /* Internet Explorer */

-moz-opacity:0.5; /* Mozilla 1.6 and below */

opacity: 0.5; /* newer Mozilla and CSS-3 */

}

#opaquetext {

filter:alpha(opacity=100); /* discarded */

-moz-opacity:1.0; /* discarded */

opacity: 1.0; /* discarded */

}