Browse DevX
Sign up for e-mail newsletters from DevX

Tip of the Day
Language: Web
Expertise: Beginner
Oct 14, 1999



Building the Right Environment to Support AI, Machine Learning and Deep Learning

Display Popup Windows

Here is a simple way to provide popup window functionality in your Web pages. The idea is to display a popup window if the user moves the mouse over certain text areas which have got some detail information associated with it. The popup window is a non modal instance of browser window which displays an HTML page that is associated to the text that resulted in launch of popup window.

For example, you can add this kind of functionality to Web pages that display information about cities in a state or profiles of different companies. The page can display a popup window when user moves the mouse over certain text. The popup window can display the population and covered area of the city or performance of a company in past 12 months.

Here is sample HTML page that displays a popup window if you move your mouse over text "Hotmail" or "Yahoo". Function PopupWindow() is called from the "OnMouseOver()" event handler which displays the popup window.

<HEAD><TITLE>Sample to display Popup Windows</TITLE></HEAD>
<BODY><B> Sample to display Popup Windows:</B><BR><BR>
(a) Popup link to <U style="color:red" 

OnMouseOver="return PopupWindow(this, 'http://www.hotmail.com')">Hotmail</U> <BR><BR> (b) Popup link to <U style="color:red"
OnMouseOver="return PopupWindow(this, 'http://www.yahoo.com')">Yahoo!!!</U> <SCRIPT LANGUAGE=JAVASCRIPT> function PopupWindow(source, strWindowToOpen) { // change the mouse cursor to show hand source.style.cursor = 'hand'; // Set window features for the popup window var strWindowFeatures = "toolbar=no,resize=no,titlebar=no,"; strWindowFeatures = strWindowFeatures + "location=no,directories=no,status=no,scrollbars=yes," strWindowFeatures = strWindowFeatures + "menubar=no,width=500,height=250,maximize=null"; // Open the window window.open(strWindowToOpen, 'SamplePopupWindow',
strWindowFeatures); } </SCRIPT> </BODY> </HTML>
Deepak Pant
Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date