 |
Javascript Demonstration and Code For OnMouseOver and OnMouseOut popup window.
Move the mouse cursor over the link and wait a second. A window will appear then when you move the cursor away from the link the window will close.
Test the Javascript Popup Window
The window should popup when the mouse cursor is moved over the link above and close when the mouse cursor is moved away from being over the link. If it does not work you do not have Javascript enabled in you browser. See here to find out how to enable javascipt.
This is the code for a mouse over and mouse out popup window:
<A HREF="#" onMouseOver=" openPopUp('my_window.htm')" onMouseOut=" closePopUp('my_window.htm')">Javascript Popup Window</A>
You need to insert this code where you want the popup to be in between the <body></body> tags in the web page. The only reason we need the href="#" is to change the mouse pointer to the hand icon which is familiar for web page links. The # is so that we do not go anywhere if the user trys to click the link.
This is the javascript code that makes it work and should be placed between the <head>here</head> tags in the webpage html source code.
<script>
function openPopUp(URL) {
new_window = window.open(URL, 'window',
'toolbar=0,scrollbars=0,location=0, statusbar=0,menubar=0,resizable=0,width=137,height=148,left = 443.5,top = 310');
}
function closePopUp() {
new_window.close();
}
</script>
The URL arguement or parameter passed to the the function openPopUp(URL) is passed to the window.open( ) function as the first arguement. The features or properties of the popup window are defined in the following code toolbar=0, scrollbars=0, location=0, statusbar=0, menubar=0, resizable=0, width=137, height=148, left = 443.5, top = 310. For example toolbar=0 is like toolbar=false that is the popup window will have no toolbar. toolbar=1 would mean the new window would contain the standard toolbar. For a detailed explaination of the window.open( ) function see here.
onMouseOut the function closePopUp is called which takes the handle to the window called new_window and calls the close function, closing the popup window. Add a comment below:
