You are here: Home » JavaScript » Create your own pop-up

Create your own pop-up

0 Flares 0 Flares ×

To create own pop-up, fir i an creating a button and call two function, showlight() on onMouseOver and hidelight() on onMouseOut. When mouseover on button function showlight() call and display div of image, and when mouse out hidelight() call and hide the div in which image present. set style of div.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="JavaScript">
function showlight()
{
document.getElementById('showme').style.display='block';	
}
function hidelight()
{
document.getElementById('showme').style.display='none';		
}
</script>
</head>

<body>
<table width="900">
<tr><td ><div id="showme" align="center" style="display:none; z-index:1000px; position:absolute; background: #999;">
        
             <img src='http://abhishekbittu.co.in/wp-content/uploads/2014/12/GSLV_MK3.jpg' width='100' height='100' border=1 >
            </div>
            
            </td></tr>
<tr><td style="line-height:100px;" >&nbsp;</td></tr>
<tr><td style=" margin-top:200px;"> <input type="button" value="View" onMouseOver="showlight();" onMouseOut="hidelight();"></td></tr>
</table>
</body>
</html>

About Abhishek Sinha

I am Abhishek and I love to code on PHP.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Scroll To Top
0 Flares Twitter 0 Facebook 0 Google+ 0 StumbleUpon 0 Pin It Share 0 LinkedIn 0 0 Flares ×