Popup Definitions

Back to the Main Page

All of these examples assume that the library has been imported as noted in the Documentation.


Mouseover the highlighted words in the following sentence to see pop-up definitions of the terms.

The Wii allows you to download games via the "Store" channel from the Wii main menu. The PlayStation 3 provides a similar service via PSN while the XBox 360, as always, has XBL.

Code Listing

The code for the example:

<script language="JavaScript" type="text/javascript" src="DP_PanelManager.js"></script>
<script type="text/javascript">
	init = function() {

			// Create a Panel Manager
		Panels = new DP_PanelManager();

		DefPanel = Panels.newPanel();
		DefPanel.style.backgroundColor = "#dedede";

		function El_mouseover(Event) {
				// Show the DefPanel
				// Fade in
			DefPanel.setOpacity(100, 0 , 200);
				// Set the position equal to the element
				// Shift the position down a bit so that the pointer isn't muddled
				// 	Load the Content

		function El_mouseout(Event) {
				// Fade out
			DefPanel.setOpacity(0, 0 , 10);
				// Hide the DefPanel
			DefPanel.setDisplay("hide", 10);

		function LoadDefinitions(El) {

				// Get the word
			var CurWord = El.innerHTML;
				// Try to find the right deg
			switch(CurWord.toLowerCase()) {
				case "wii":
					var CurDef = "Nintendo's current console featuring innovative motion sensing controls.";
				case "psn":
					var CurDef = "Stands for \"PlayStation Network\".  Sony's online service for the Playstation 3 console.";
				case "xbl":
					var CurDef = "Stands for \"XBox Live\".  Microsoft's online service for the XBox console and Windows Vista.";
				case "playstation 3":
					var CurDef = "Sony's current console gaming system featuring the powerful cell processor and next-generation Blu-Ray DVD technology.";
				case "xbox 360":
					var CurDef = "Microsoft's current-generation console gaming system featuring many exclusive hi-profile games and excellent integration with online services.";
					var CurDef = "There is no definition available for this word.";
			var CurDefContent = "<div style='padding: 10px;'>" + CurDef + "</div>";


		var Els = document.getElementsByName("Def");
		for ( var Cnt = 0; Cnt < Els.length; Cnt++) {
			var CurPanel = Panels.addPanel(Els[Cnt]);
				// Set the color of the word
			Els[Cnt].style.color = "blue";
				// Add the mouse event handlers
			Els[Cnt].addEvent("mouseover", El_mouseover);
			Els[Cnt].addEvent("mouseout", El_mouseout);