Ocultar elemento al pasar por encima con una capa

[zacktagnan]

Hola a tod@s:

Tengo un código javascript que permite arrastrar una capa.
Pero cuando pasa por encima de una etiqueta <select>...</select> ésta queda por encima.

Sé que para ocultar un elemento con un click ó un mouseover se puede usar lo siguiente:

Código:

document.getElementById('selecta').style.visibility = 'hidden';

Pero ¿cómo sería mientras estas arrastrando la capa, teniendo pulsado el ratón?
Es decir, que lo que quiero es que mientras está pulsado el ratón sobre la capa para arrastrar, en el momento que paso por encima de la lista ésta se oculte y siga oculta hasta que la capa quede fuera de la zona de dicha lista, estando la capa en movimiento ó no.

El código que encontré para arrastrar la capa es éste:

Código:

<script language="javascript" type="text/javascript">
<!--

//*****************************************************************************
// Do not remove this notice.
//
// Copyright 2001 by Mike Hall.
// See http://www.brainjar.com for terms of use.
//*****************************************************************************

// Determine browser and version.

function Browser() {

  var ua, s, i;

  this.isIE    = false;
  this.isNS    = false;
  this.version = null;

  ua = navigator.userAgent;

  s = "MSIE";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isIE = true;
    this.version = parseFloat(ua.substr(i + s.length));
    return;
  }

  s = "Netscape6/";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS = true;
    this.version = parseFloat(ua.substr(i + s.length));
    return;
  }

  // Treat any other "Gecko" browser as NS 6.1.

  s = "Gecko";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS = true;
    this.version = 6.1;
    return;
  }
}

var browser = new Browser();

// Global object to hold drag information.

var dragObj = new Object();
dragObj.zIndex = 0;

function dragStart(event, id) {

  var el;
  var x, y;

  // If an element id was given, find it. Otherwise use the element being
  // clicked on.

  if (id)
    dragObj.elNode = document.getElementById(id);
  else {
    if (browser.isIE)
      dragObj.elNode = window.event.srcElement;
    if (browser.isNS)
      dragObj.elNode = event.target;

    // If this is a text node, use its parent element.

    if (dragObj.elNode.nodeType == 3)
      dragObj.elNode = dragObj.elNode.parentNode;
  }

  // Get cursor position with respect to the page.

  if (browser.isIE) {
    x = window.event.clientX + document.documentElement.scrollLeft
      + document.body.scrollLeft;
    y = window.event.clientY + document.documentElement.scrollTop
      + document.body.scrollTop;
  }
  if (browser.isNS) {
    x = event.clientX + window.scrollX;
    y = event.clientY + window.scrollY;
  }

  // Save starting positions of cursor and element.

  dragObj.cursorStartX = x;
  dragObj.cursorStartY = y;
  dragObj.elStartLeft  = parseInt(dragObj.elNode.style.left, 10);
  dragObj.elStartTop   = parseInt(dragObj.elNode.style.top,  10);

  if (isNaN(dragObj.elStartLeft)) dragObj.elStartLeft = 0;
  if (isNaN(dragObj.elStartTop))  dragObj.elStartTop  = 0;

  // Update element's z-index.

  dragObj.elNode.style.zIndex = ++dragObj.zIndex;

  // Capture mousemove and mouseup events on the page.

  if (browser.isIE) {
    document.attachEvent("onmousemove", dragGo);
    document.attachEvent("onmouseup",	dragStop);
    window.event.cancelBubble = true;
    window.event.returnValue = false;
  }
  if (browser.isNS) {
    document.addEventListener("mousemove", dragGo,   true);
    document.addEventListener("mouseup",   dragStop, true);
    event.preventDefault();
  }
}

function dragGo(event) {

  var x, y;

  // Get cursor position with respect to the page.

  if (browser.isIE) {
    x = window.event.clientX + document.documentElement.scrollLeft
      + document.body.scrollLeft;
    y = window.event.clientY + document.documentElement.scrollTop
      + document.body.scrollTop;
  }
  if (browser.isNS) {
    x = event.clientX + window.scrollX;
    y = event.clientY + window.scrollY;
  }

  // Move drag element by the same amount the cursor has moved.

  dragObj.elNode.style.left = (dragObj.elStartLeft + x - dragObj.cursorStartX) + "px";
  dragObj.elNode.style.top  = (dragObj.elStartTop  + y - dragObj.cursorStartY) + "px";

  if (browser.isIE) {
    window.event.cancelBubble = true;
    window.event.returnValue = false;
  }
  if (browser.isNS)
    event.preventDefault();
}

function dragStop(event) {

  // Stop capturing mousemove and mouseup events.

  if (browser.isIE) {
    document.detachEvent("onmousemove", dragGo);
    document.detachEvent("onmouseup",	dragStop);
  }
  if (browser.isNS) {
    document.removeEventListener("mousemove", dragGo,	true);
    document.removeEventListener("mouseup",   dragStop, true);
  }
}

//-->
</script>

El HTML con la lista, la capa, y los estilos empleados sería éste:

Código HTML:

<style type="text/css">
<!--
body,td,th {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
}
h3{
	font-size: 11px;
	margin-top: 44px;
	text-decoration: overline underline;
}
.centrado{
	text-align: center;
}
.derecha {
	text-align: right;
}
#lupa_buscar {
	background-color: #0066cc;
	cursor: pointer;
}
.bgColAzulClaro {
	background-color: #c9d8fc;
}
.bgColAzul {
	background-color: #3770F4;
}
.bgColBlanco {
	background-color: #ffffff;
}
.bgColRojo {
	background-color: #cc0000;
}

/*
== ESTILOS EMPLEADOS EN VENTANA de CAPA ==
*/
.leyendTIT {
    font-weight: bold;
	color: #ffffff;
	cursor: default;
}
.leyendX {
    font-weight: bold;
	color: #ffffff;
}
a.leyendX:link {
    text-decoration: none;
    color: #ffffff;
}
a.leyendX:visited {
    text-decoration: none;
	color: #ffffff;
}
a.leyendX:hover {
    text-decoration: none;
	color: #ffffff;
	background-color: #ff3300;
}
#tablaImgCDCapa {
	background-color: #ffffff;
}
-->
</style>

...

<select name="selecta">
      <option value="1">Elemento 1</option>
      <option value="2">Elemento 2</option>
      <option value="3">Elemento 3</option>
      <option value="4">Elemento 4</option>
</select>

...

<div id="capaImg" style="position:absolute; width:200px; height:115px; left:70px; top:289px; z-index:1;">
  <table width="100%"  border="0" cellpadding="2" cellspacing="0" class="bgColAzul">
    <tr>
      <td class="leyendTIT" onmousedown="dragStart(event, 'capaImg');">&nbsp;CD Red Hot Chili Peppers</td>
      <td class="derecha"><table  border="0" cellpadding="1" cellspacing="0" class="bgColRojo">
          <tr>
            <td class="bgColRojo leyendX"><a href="javascript:;" onclick="document.getElementById('capaImg').style.visibility = 'hidden';" class="leyendX" title="Cerrar" onmouseover="window.status=' ::  Cerrar Ventana  ::';return true" onmouseout="window.status='';return true">[X]</a></td>
          </tr>
      </table></td>
    </tr>
  </table>
  <table width="100%" border="0" class="bgColAzulClaro" cellpadding="3" cellspacing="0">
    <tr>
      <td><table width="100%" border="0" id="tablaImgCDCapa" cellpadding="5" cellspacing="0" align="center">
    <tr>
      <td class="centrado"><img src="bytheway_front.jpg" alt="Red Hot Chili" width="96" height="96" /></td>
    </tr>
  </table></td>
    </tr>
  </table>
</div> 

Espero se haya entendido la petición de ayuda. Resumiendo:

- que al pasar con la capa por encima de la lista, la capa siga quedando encima de la capa. Igualmente, si se deja quieta la capa ésta se quedaría por encima.
Si lo que se hace es ocultar la lista que ésta vuelva a aparecer cuando la capa salga del lugar que ocupa la lista.

[javiermil]

http://www.mygnet.com/foros/javascriptyjs/4350/

[zacktagnan]

A no ser que haya comprendido mal la solución propuesta en el enlace suministrado, creo que es algo diferente al problema propuesto

Mi capa si que aparece en un lugar específico y si se quedase simplemente ahí y fuera el mismo lugar que ocupa una lista ó un select, me bastaría con un

document.getElementById('lista').style.visibility = 'hidden';
//ó
document.getElementById('btn_Envio').style.display = 'none';

Pero mi capa tiene la posibilidad de poderla arrastrar moviéndola por toda la ventana. Y lo que quiero es que cuando pase por encima de un select ó un lista ésta se oculte ó por lo menos quede por debajo de dicha capa.
Si no se hace nada, por defecto, en Internet Explorer, la capa queda por debajo de los select. No así en el Firefox.

Un ejemplo de lo que quiero está aquí:
http://www.dynarch.com/projects/calendar/

Dentro del menú horizontal central, pincha en:
Calendar links >> Full demo

Se te abre una ventana de demostración.
Pulsa uno de los botones pegados a las cajas de texto para insertar una fecha y se te abre una capa con un calendario. Cuando arrastras éste a una zona dónde se encuentra un select ó una lista (en la misma demo hay una para ver el efecto[Component_1 Component_2 ...]), ésta queda oculta hasta que sacas la capa del calendario de dicha zona.

Esto es precisamente lo que quiero.

[JavierB]

Hola zacktagnan

Echa un ojo a este enlace, a ver si te sirve de ayuda:

http://www.aplus.co.yu/wch/intro/

Saludos,

[zacktagnan]

Esta última solución señalada por JavierB es poder aplicar más sencillamente la propuesta por javiermil.
Y después de probarlo, veo que no me sirve. Solamente es útil si no muevo la capa. El IFRAME que se crea automáticamente entre la capa y el select hace que se tape la capa. Pero en el momento que muevo la capa, el IFRAME queda inmóvil en el sitio que fue creado y el efecto corrector se rompe volviendo a quedar la capa por debajo del select.

En el ejemplo mencionado del calendario, en uno de los archivos de configuración para su funcionamiento ('calendar.js'), creo que el siguiente apartado se encarga de realizar el efecto deseado de ocultar ciertos elementos cuando la capa del calendario pasa sobre ellos:

Código:

...
Calendar.prototype.hideShowCovered = function () {
	if (!Calendar.is_ie && !Calendar.is_opera)
		return;
	function getVisib(obj){
		var value = obj.style.visibility;
		if (!value) {
			if (document.defaultView && typeof (document.defaultView.getComputedStyle) == "function") { // Gecko, W3C
				if (!Calendar.is_khtml)
					value = document.defaultView.
						getComputedStyle(obj, "").getPropertyValue("visibility");
				else
					value = '';
			} else if (obj.currentStyle) { // IE
				value = obj.currentStyle.visibility;
			} else
				value = '';
		}
		return value;
	};

	var tags = new Array("applet", "iframe", "select");
	var el = this.element;

	var p = Calendar.getAbsolutePos(el);
	var EX1 = p.x;
	var EX2 = el.offsetWidth + EX1;
	var EY1 = p.y;
	var EY2 = el.offsetHeight + EY1;

	for (var k = tags.length; k > 0; ) {
		var ar = document.getElementsByTagName(tags[--k]);
		var cc = null;

		for (var i = ar.length; i > 0;) {
			cc = ar[--i];

			p = Calendar.getAbsolutePos(cc);
			var CX1 = p.x;
			var CX2 = cc.offsetWidth + CX1;
			var CY1 = p.y;
			var CY2 = cc.offsetHeight + CY1;

			if (this.hidden || (CX1 > EX2) || (CX2 < EX1) || (CY1 > EY2) || (CY2 < EY1)) {
				if (!cc.__msh_save_visibility) {
					cc.__msh_save_visibility = getVisib(cc);
				}
				cc.style.visibility = cc.__msh_save_visibility;
			} else {
				if (!cc.__msh_save_visibility) {
					cc.__msh_save_visibility = getVisib(cc);
				}
				cc.style.visibility = "hidden";
			}
		}
	}
};
...

Ahora que no llego a adaptar esto a mi caso de mi capa. Si algún experto de javascript ó DHTML me ayuda a entender el funcionamiento y poder aplicarlo a mi caso...