QuestionAsk Questions?
Arat Kumar Rana
How to show a popup ballon in jsp when pointing to a link using javascript.Please help me
View Answers
January 9, 2010 at 11:08 AM
Hi Friend,
Try the following code:
<html>
<head>
<style type="text/css">
#popup{
width:147px;
position:absolute;
display:none;
}
#popup .top{
background-image: url('top.gif');
height:16px;
}
#popup .middle{
background-image: url('middle.gif');
background-position:bottom left;
padding-left:7px;
padding-right:7px;
}
#popup .middle span{
position:relative;
top:-8px;
font-size:11px;
}
#popup .bottom{
background-image: url('bottom.gif');
height:44px;
position:relative;
top:-6px;
}
</style>
<script type="text/javascript" >
function show(e,text){
if(document.all)e = event;
var v1 = document.getElementById('popup');
var v2 = document.getElementById('popup_content');
v2.innerHTML = text;
v1.style.display = 'block';
var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
var leftPos = e.clientX - 100;
if(leftPos<0)leftPos = 0;
v1.style.left = leftPos + 'px';
v1.style.top = e.clientY - v1.offsetHeight -1 + st + 'px';
}
function hide(){
document.getElementById('popup').style.display = 'none';
}
</script>
</head>
<body>
<div id="popup">
<div class="top"></div>
<div class="middle"><span id="popup_content"></span></div>
<div class="bottom"></div>
</div>
<br><br><br><br>
<p><a href="#" onmouseover="show(event,'It is a beautiful flower');return false" onmouseout="hide()">Rose</a></p>
</body>
</html>
Thanks
Try the following code:
<html>
<head>
<style type="text/css">
#popup{
width:147px;
position:absolute;
display:none;
}
#popup .top{
background-image: url('top.gif');
height:16px;
}
#popup .middle{
background-image: url('middle.gif');
background-position:bottom left;
padding-left:7px;
padding-right:7px;
}
#popup .middle span{
position:relative;
top:-8px;
font-size:11px;
}
#popup .bottom{
background-image: url('bottom.gif');
height:44px;
position:relative;
top:-6px;
}
</style>
<script type="text/javascript" >
function show(e,text){
if(document.all)e = event;
var v1 = document.getElementById('popup');
var v2 = document.getElementById('popup_content');
v2.innerHTML = text;
v1.style.display = 'block';
var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
var leftPos = e.clientX - 100;
if(leftPos<0)leftPos = 0;
v1.style.left = leftPos + 'px';
v1.style.top = e.clientY - v1.offsetHeight -1 + st + 'px';
}
function hide(){
document.getElementById('popup').style.display = 'none';
}
</script>
</head>
<body>
<div id="popup">
<div class="top"></div>
<div class="middle"><span id="popup_content"></span></div>
<div class="bottom"></div>
</div>
<br><br><br><br>
<p><a href="#" onmouseover="show(event,'It is a beautiful flower');return false" onmouseout="hide()">Rose</a></p>
</body>
</html>
Thanks
Related Pages:
If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.
Ask your questions, our development team will try to give answers to your questions.
Tutorial Topics
