DP_PanelManager:
Popup Definitions

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.

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
			DefPanel.setDisplay("show");
				// Fade in
			DefPanel.setOpacity(100, 0 , 200);
				// Set the position equal to the element
			DefPanel.setPosition(this.getPosition());
				// Shift the position down a bit so that the pointer isn't muddled
			DefPanel.shiftPosition([20,10]);
				// 	Load the Content
			LoadDefinitions(this);
		};

		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.";
				break;
				case "psn":
					var CurDef = "Stands for \"PlayStation Network\".  Sony's online service for the Playstation 3 console.";
				break;
				case "xbl":
					var CurDef = "Stands for \"XBox Live\".  Microsoft's online service for the XBox console and Windows Vista.";
				break;
				case "playstation 3":
					var CurDef = "Sony's current console gaming system featuring the powerful cell processor and next-generation Blu-Ray DVD technology.";
				break;
				case "xbox 360":
					var CurDef = "Microsoft's current-generation console gaming system featuring many exclusive hi-profile games and excellent integration with online services.";
				break;
				default:
					var CurDef = "There is no definition available for this word.";
				break;
			};
			var CurDefContent = "<div style='padding: 10px;'>" + CurDef + "</div>";
			DefPanel.load(CurDefContent);

		};

		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);
		};

	};
</script>