CodeAve.com CodeAve.com - JavaScript - Navigation
ASP
JavaScript
·Document Info
·Forms
·Images
·Miscellaneous
·Navigation
·Script Writers
·Contents
·What's New?
CSS
HTML
Links
Mail List
Search
Sitemap

 

MouseOver Pop-Up Windows
The onMouseOver and onMouseOut attributes can perform a number of slick looking effects including opening and closing a new window. When a person places their mouse over the link a new window will open up on top of the current browser window. When the mouse pointer is moved off the link the window will close automatically. All the script for the new window is contained in the previous page, so it loads rather quickly (as opposed to opening a new page from the server). Used sparingly this can be a useful tool to explain in detail the link someone is about to click or provide a preview of an image.
•View the Output
•Text View
•Print View
•Mail this Link
•Download the Code

<html>
<title>CodeAve.com(JavaScript: Hover 
Window within Previous Page)</title>
<body bgcolor="#FFFFFF">

<script language="JavaScript">
<!-- 
// This is the function that will open the
// new window when the mouse is moved over the link
function open_new_window() 
{
new_window = open("","hoverwindow","width=300,height=200,left=10,top=10");

// open new document 
new_window.document.open();

// Text of the new document
// Replace your " with ' or \" or your document.write statements will fail
new_window.document.write("<html><title>JavaScript New Window</title>");
new_window.document.write("<body bgcolor=\"#FFFFFF\">");
new_window.document.write("This is a new html document created by JavaScript ");
new_window.document.write("statements contained in the previous document.");
new_window.document.write("<br>");
new_window.document.write("</body></html>");

// close the document
new_window.document.close(); 
}

// This is the function that will close the
// new window when the mouse is moved off the link
function close_window() 
{
new_window.close();
}

// -->
</script>


<a href="#" onMouseOver="open_new_window()" onMouseOut="close_window()">Open Hover Window</a>




</body>
</html>

 

 

 


 ASP: What's New? | Articles | Script Writers | Database Display | Read/Write
Server Variables | Response Objects | Random Events | Miscellaneous
HTML: Forms | Hyperlinks | Headers | Tables | Hyperlinks | Headers | Text Display
JavaScript: Document Info | Forms | Images | Navigation | Script Writers
CSS: Basics | Page Display | Text Display | Script Writers | Miscellaneous
Links | Search Engine db |  Privacy Statement |  Advertising Rates |  Email

CodeAve.com is hosted by MyHosting.com
Donate Food Online with a Mouse Click at TheHungerSite.com
Donate Land Online with a Mouse Click at TheRainForestSite.com
© 1999 - 2010 CodeAve.com
All Rights Reserved