una soluzione per evitare che i campi select "buchino" i livelli,
provare x credere il codice qui sotto (un tooltip immune dal morbo) ripreso dalla discussione originale
[per chi ancora non lo sapesse, è consigliabile copiare il codice che appare premendo il tastino quote in basso a destra]codice:<HTML> <HEAD> <TITLE>Simple ToolTip</TITLE> <SCRIPT language="JavaScript"> /************************************************************************************ * Note:******************************************************************************* * The use of methods with oToolTip._ prefix is for internal use only (I wish there was a private/public)* * In order to use this code you just need to use the oToolTip.showToolTip and the oToolTip.hideToolTip* * methods.**************************************************************************** *************************************************************************************/ var oToolTip = new Object(); oToolTip._topDivZIndex = 10000; oToolTip._oBody = null; oToolTip._oHelperIframe = null; oToolTip._oToolTipDiv = null; oToolTip._mousePos = new Object(); // Add dynamic div to the page oToolTip._init = function(){ // Creating and adding dynamic iframe to the page source. oToolTip._oBody = document.getElementsByTagName("BODY").item(0); oToolTip._oHelperIframe = document.createElement("IFRAME"); oToolTip._oHelperIframe.style.border = 0; oToolTip._oHelperIframe.width = 0; oToolTip._oHelperIframe.height = 0; oToolTip._oHelperIframe.style.position = "absolute"; oToolTip._oBody.appendChild(oToolTip._oHelperIframe); // Creating and adding dynamic DIV to the page source (for the tool-tip). oToolTip._oToolTipDiv = document.createElement("DIV"); oToolTip._oToolTipDiv.style.border = 0; oToolTip._oToolTipDiv.width = 0; oToolTip._oToolTipDiv.height = 0; oToolTip._oToolTipDiv.style.position = "absolute"; oToolTip._oBody.appendChild(oToolTip._oToolTipDiv); oToolTip._attachToEvent(document, 'onmousemove', oToolTip._mousemove); } // Should return the div actual width. oToolTip._getToolTipDivWidth = function(){ // We are checking the inner table because of a bug in NS/Mozilla with the DIV-->offsetWidth var tableWidth = "" + oToolTip._oToolTipDiv.getElementsByTagName("table").item(0).offsetWidth; if(tableWidth.indexOf('px') > -1){ return parseInt(tableWidth.substring(0, tableWidth.infexOf('px'))); } else { return tableWidth; } } // Should return the div actual Height. oToolTip._getToolTipDivHeight = function(){ // We are checking the inner table because of a bug in NS/Mozilla with the DIV-->offsetHeight var tableHeight = "" + oToolTip._oToolTipDiv.getElementsByTagName("table").item(0).offsetHeight; if(tableHeight.indexOf('px') > -1){ return parseInt(tableHeight.substring(0, tableHeight.infexOf('px'))); } else { return tableHeight; } } oToolTip._mousemove = function(e){ if(typeof(e) == 'undefined')e = event; oToolTip._mousePos.Y = e.clientY; oToolTip._mousePos.X = e.clientX; if(oToolTip._oToolTipDiv.style.visibility == 'visible'){ oToolTip._fixTipPosition(); } } // Will move the div and the helper iframe to the given X and Y position oToolTip._fixTipPosition = function(){ // Set the Y position if(oToolTip._mousePos.Y > Math.round(oToolTip._oBody.clientHeight / 2)){ // Open to top oToolTip._oHelperIframe.style.top = oToolTip._mousePos.Y - oToolTip._getToolTipDivHeight() + oToolTip._oBody.scrollTop; } else { // Open to bottom oToolTip._oHelperIframe.style.top = oToolTip._mousePos.Y + oToolTip._oBody.scrollTop; } // Set the X position if(oToolTip._mousePos.X > Math.round(oToolTip._oBody.clientWidth / 2)){ // Open to left oToolTip._oHelperIframe.style.left = oToolTip._mousePos.X - oToolTip._getToolTipDivWidth() + oToolTip._oBody.scrollLeft; } else { // Open to right oToolTip._oHelperIframe.style.left = oToolTip._mousePos.X + 5 + oToolTip._oBody.scrollLeft; } oToolTip._oToolTipDiv.style.top = oToolTip._oHelperIframe.style.top; oToolTip._oToolTipDiv.style.left = oToolTip._oHelperIframe.style.left; } oToolTip._attachToEvent = function(obj, name, func) { name = name.toLowerCase(); // Add the hookup for the event. if(typeof(obj.addEventListener) != "undefined") { if(name.length > 2 && name.indexOf("on") == 0) name = name.substring(2, name.length); obj.addEventListener(name, func, false); } else if(typeof(obj.attachEvent) != "undefined"){ obj.attachEvent(name, func); } else { if(eval("obj." + name) != null){ // Save whatever defined in the event var oldOnEvents = eval("obj." + name); eval("obj." + name) = function(e) { try{ func(e); eval(oldOnEvents); } catch(e){} }; } else { eval("obj." + name) = func; } } } // Will show the div and the helper iframe. oToolTip.showToolTip = function(toolTipMessage){ oToolTip._oHelperIframe.style.zIndex = oToolTip._topDivZIndex++; var divContent = "<table style='border:1px solid black;background-color:LightGoldenrodYellow' cellspacing='0' cellpading='0'><tr><td>" + toolTipMessage + "</td></tr></table>"; oToolTip._oToolTipDiv.innerHTML = divContent; oToolTip._mousePos oToolTip._oToolTipDiv.style.zIndex = oToolTip._topDivZIndex++; oToolTip._oHelperIframe.style.top = oToolTip._oToolTipDiv.style.top; oToolTip._oHelperIframe.style.left = oToolTip._oToolTipDiv.style.left; oToolTip._oHelperIframe.width = oToolTip._getToolTipDivWidth(); oToolTip._oHelperIframe.height = oToolTip._getToolTipDivHeight(); oToolTip._oHelperIframe.style.visibility = 'visible'; oToolTip._oToolTipDiv.style.visibility = 'visible'; oToolTip._fixTipPosition(); } // Will hide the div and the helper iframe. oToolTip.hideToolTip = function(){ oToolTip._oHelperIframe.style.visibility = 'hidden'; oToolTip._oToolTipDiv.style.visibility = 'hidden'; } // Attach to the onload event oToolTip._attachToEvent(window, 'onload', oToolTip._init); </SCRIPT> </HEAD> <BODY> <span onMouseOver="oToolTip.showToolTip('Over the span tag')" onMouseOut="oToolTip.hideToolTip()">Move mouse over this text</span> Move mouse over the select box <SELECT onMouseOver="oToolTip.showToolTip('Selected text is: ' + this.options[this.selectedIndex].text)" onMouseOut="oToolTip.hideToolTip()"> <OPTION>Peace</OPTION> <OPTION>Salam</OPTION> <OPTION>Shalom</OPTION> </SELECT> </body> </html>
Rispondi quotando
