JavaScript Popup on Mouse Hover
 |
| mouse over popup image |
Hi Today we will Learn JavaScript Popup on Mouse Hover.
When a User Hover Mouse Over The Image The Image will Appear as Popup window.
Crate 2 files and 1 image named:
1.index.html
2.script.js
3.image1.png
 |
| mouse over popup image |
Now copy the Below Codes for Certain Files.
<html>
<head>
<title>JavaScript Popup On Mouse Hover</title>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<iframe frameborder="1" id="ebox1" width="100%"
height="100%" bgcolor="#808080" style="display: none; position:absolute;
top: 0px; left: 0px;filter:alpha(opacity=0.5);
-moz-opacity: 0.5;opacity: 0.5;background-color: #808080;">
</iframe>
<form name="frm">
<table id="frm" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="black" style="border: 1px solid black;">
<tr>
<td align="left">
<img src="image1.png" height="160px" width="150px" onmouseover='disp();'>
</td>
</tr>
</table>
</form>
<div id="s" style="display: none; border:thin solid black; position: absolute; background-color: black;">
<div style="background: url('image1.png'); width: 350px; text-align: right; color: white; font-weight: bold;">
<a style="cursor:pointer;color:#ffffff;" onclick='hide()'><b>Close </b></a></div>
<div align="center" id="ad" style="color: red; background-color: white; font-weight: bold; font-family: Times New Roman; font-size: 14px;">
<a style="text-decoration:none;" href="#" target="_blank">
<img src="image1.png" width="350px"></a></div>
</div>
</body>
</html>
var browserName=navigator.appName;
var left_align = 268; // Set the left position to center the greybox
var top_align = 134;
// Set the top position to center the greybox
function disp(){if(browserName == "Netscape"){var stop = document.documentElement.scrollTop;
document.getElementById('ebox1').style.height=document.body.offsetHeight+"px";
document.getElementById('s').style.position = "fixed";
}else{var stop = window.pageYOffset || document.body.scrollTop ||
document.documentElement.scrollTop;
window.onscroll=mveditbox;}document.getElementById('s').style.display = 'block';
document.getElementById('ebox1').style.display='block';
document.getElementById('frm').style.opacity = 5/10;document.getElementById('frm')
.style.filter = 5/10;document.getElementById('ebox1').style.zIndex=100;
document.getElementById('s').style.zIndex=1000;
document.getElementById('ebox1').style.top=stop+"px";var top_pos = stop+top_align;
document.getElementById('s').style.top= top_pos+"px";var sleft = window.pageXOffset ||
document.body.scrollLeft || document.documentElement.scrollLeft;
var left_pos = sleft+left_align;document.getElementById('s').style.left= left_pos+"px";
}
function hide(){document.getElementById('s').style.display='none';document.getElementById('frm').style.opacity = 100;
document.getElementById('ebox1').style.display='none';
}
function mveditbox() {var stop =window.pageYOffset ||
document.body.scrollTop || document.documentElement.scrollTop;
document.getElementById('ebox1').style.top=stop+"px";var tot = stop+top_align;
document.getElementById('s').style.top= tot+"px";
document.getElementById('ebox1').style.height = document.body.clientHeight+"px";
}
You have Successfully Created JavaScript Hover Popup .NOw Run the index.html file to View Result.
Thank You for Visiting.
No comments:
Post a Comment
Thank You for Your Comment
Note: Only a member of this blog may post a comment.