I use this:
or this:Code:
<style type="text/css">
.transparent {
filter:alpha(opacity=90);
-moz-opacity: 0.90;
opacity: 0.90;
-khtml-opacity: 0.90;
background-color:green;
display:none;
width:170;
height:100;
position:absolute;
color: white;
border: 1 green solid;
}
</style>
<script type="text/javascript">
function Show(e)
{
var e=(!e)?window.event:e;//IE:Moz
var tmpX = 0;
var tmpY = 0;
if(e.pageX)
{
tmpX = e.pageX + window.pageXOffset;
tmpY = e.pageY + window.pageYOffset;
} else if(e.clientX) {
if(document.documentElement){//IE 6+ strict mode
tmpX = e.clientX + document.documentElement.scrollLeft;
tmpY = e.clientY + document.documentElement.scrollTop;
}
else if(document.body){//Other IE
tmpX = e.clientX + document.body.scrollLeft;
tmpY = e.clientY + document.body.scrollTop;
}
} else {
return false
}
var el = document.getElementById('Popup');
el.style.left = tmpX +'px';
el.style.top = (tmpY + 35)+'px';
el.style.display = "block";
}
function Hide()
{
var el = document.getElementById('Popup');
el.style.display = "none";
}
</script>
<body bgcolor="black" text="white">
<a href="" onMouseOut="Hide()" onMouseOver="Show(event)"
onMouseMove="Show(event)" id="aid">Move the mouse over here</a><br>
<br>
Move your move over the link above<br>
and the pop-up appears. And the pop-up<br>
follows your mouse as long as your mouse<br>
is still over the link.
<div id="Popup" class="transparent">
<div style="background-color: #003366">
<b>Title goes here</b></div>
<div></b>Description goes here</div>
</div>
</body>
They are working on Opera 9.10, Firefox 2.0.0.3 and İnternet Explorer 6.0.Code:
<style type="text/css">
.transparent {
filter:alpha(opacity=90);
-moz-opacity:0.90;
opacity:0.90;
-khtml-opacity:0.90;
background-color:green;
display:none;
width:170;
height:100;
position:absolute;
color: white;
border: 1 green solid;
}
</style>
<script type="text/javascript">
/* this function shows the pop-up when
user moves the mouse over the link */
function Show(e)
{
var Popup = document.getElementById('Popup');
var e=(!e)?window.event:e;//IE:Moz
/* get the mouse left position */
x = e.clientX + document.body.scrollLeft | e.pageX + window.pageXOffset | e.clientX + document.documentElement.scrollLeft;
/* get the mouse top position */
y = e.clientY + document.body.scrollTop | e.pageY + window.pageYOffset | e.clientY + document.documentElement.scrollTop ;
/* display the pop-up */
Popup.style.display="block";
/* set the pop-up's left */
Popup.style.left = x +'px';
/* set the pop-up's top */
Popup.style.top = (y+35) +'px';
}
/* this function hides the pop-up when
user moves the mouse out of the link */
function Hide()
{
var Popup = document.getElementById('Popup');
/* hide the pop-up */
Popup.style.display="none";
}
</script>
<body bgcolor="black" text="white">
<a href="" onMouseOut="Hide()" onMouseOver="Show(event)"
onMouseMove="Show(event)" id="aid">Move the mouse over here</a><br>
<br>
Move your move over the link above<br>
and the pop-up appears. And the pop-up<br>
follows your mouse as long as your mouse<br>
is still over the link.
<div id="Popup" class="transparent">
<div style="background-color: #003366">
<b>Title goes here</b></div>
<div></b>Description goes here</div>
</div>
</body>
I change this:
to this:Code:<a href="" onMouseOut="Hide()" onMouseOver="Show(event)"
onMouseMove="Show(event)" id="aid">Move the mouse over here</a>
and add this to scripte:Code:<a href="" id="aid">Move the mouse over here</a>
I tried the following code, but it did not work.Code:document.getElementById('aid').onmouseout=Show
document.getElementById('aid').onmouseover=Hide
document.getElementById('aid').onmousemove=Show
What can I do? Thanks...Code:
<style type="text/css">
.transparent {
filter:alpha(opacity=90);
-moz-opacity:0.90;
opacity:0.90;
-khtml-opacity:0.90;
background-color:green;
display:none;
width:170;
height:100;
position:absolute;
color: white;
border: 1 green solid;
}
</style>
<script type="text/javascript">
/* Kullanıca fareyi link üzerine getirince popup görünmesini sağlar, bu fonksiyon. */
function Show(e)
{
var Popup = document.getElementById('Popup');
var e=(!e)?window.event:e;//IE:Moz
x = e.clientX + document.body.scrollLeft | e.pageX + window.pageXOffset | e.clientX + document.documentElement.scrollLeft;
y = e.clientY + document.body.scrollTop | e.pageY + window.pageYOffset | e.clientY + document.documentElement.scrollTop ;
Popup.style.display="block";
Popup.style.left = x +'px';
Popup.style.top = (y+35) +'px';
}
function Hide()
{
var Popup = document.getElementById('Popup');
Popup.style.display="none";
}
var el = document.getElementById('aid');
el.onmousemove = Show
el.onmouseover = Show
el.onmouseout = Hide
</script>
<body bgcolor="black" text="white">
<a href="" id="aid">Move the mouse over here</a><br>
<br>
Move your move over the link above<br>
and the pop-up appears. And the pop-up<br>
follows your mouse as long as your mouse<br>
is still over the link.
<div id="Popup" class="transparent">
<div style="background-color: #003366">
<b>Title goes here</b></div>
<div></b>Description goes here</div>
</div>
</body>
