JavaScript mouse over popup image - Web Development and Web Design Codes

Latest

Wednesday, May 31, 2017

JavaScript mouse over popup image

JavaScript Popup on Mouse Hover

mouse over popup image
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.
Files and Folder Structure:
Crate 2 files and 1 image named:
1.index.html
2.script.js
3.image1.png
mouse over popup image
mouse over popup image

Now copy the Below Codes for Certain Files.
index.html
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<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>

script.js
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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.
Read more

Subscribe via email

Ads Here
BANNER 728X90
Newer Article javascript cursor trail effect Older Article javascript prompt box with drop down
By v�o l�c
Labels:

No comments:

Post a Comment

Thank You for Your Comment

Note: Only a member of this blog may post a comment.

Subscribe to: Post Comments (Atom)