Crear dinamicamente evento onmouseover.

mdk · #1 (**permalink**) 06/10/2007, 04:54

Como puedo crear el evento onmouseover dentro de un div que he creado tambien dinamicamente? he probado poniendo esto:

Código PHP:

  Obj = document.getElementById('Capa');

Temp = document.createElement('NuevaCapa');

Temp.id = "Capa1";

Temp.Event.MouseOver = "alert('Estoy sobre el layer (E4).');";

Incluso poniendo solamente Temp.OnMouseOver pero me lanza el mensaje de alerta sin pasar el raton por encima de la capa nueva.

mdk · #2 (**permalink**) 06/10/2007, 05:21

Mira que soy impaciente, jejeje ya lo he sacado.

Temp.onmouseover = function() { alert('Estoy sobre el layer' + NuevaCapa); }

mdk · #3 (**permalink**) 06/10/2007, 05:30

Vale, ahora otra pequeña duda, como consigo que vaya en Firefox, Opera y Netscape? :P

escudo40 · #4 (**permalink**) 06/10/2007, 05:55

hola mdk

para IE se utilisa de esta manera

Código HTML:

function muestraMensaje() {
alert("Has pulsado el ratón");
}
function muestraOtroMensaje() {
alert("Has pulsado el ratón y por eso se muestran estos mensajes");
}
var elDiv = document.getElementById("div_principal");
elDiv.attachEvent("onclick", muestraMensaje);
elDiv.attachEvent("onclick", muestraOtroMensaje);

y para los navegadores que sigan los estandares como FF

Código HTML:

function muestraMensaje() {
alert("Has pulsado el ratón");
}
function muestraOtroMensaje() {
alert("Has pulsado el ratón y por eso se muestran estos mensajes");
}
var elDiv = document.getElementById("div_principal");
elDiv.addEventListener("click", muestraMensaje, true);
elDiv.addEventListener("click", muestraOtroMensaje, true);

en esta pajina www .librosweb.es encontraras unos libros muy buenos te ayudara y para lo que quieres hacer buscalo en el libro de ajax en la pagina 96 asta la 122

mdk · #5 (**permalink**) 06/10/2007, 06:04

Pero de la forma que lo he puesto yo como podria ser? o solo se puede hacer con attachEvent (para IE) y addEventListener (para FF) :S

escudo40 · #6 (**permalink**) 06/10/2007, 06:44

Utiliza este código

Código HTML:

<HTML>
<HEAD>
</HEAD>
<BODY>

<textarea id="texto"></textarea>

</BODY>
</HTML>

<script type="text/javascript">
function muestraMensaje() {
alert("Has pulsado el ratón");
}

var elDiv = document.getElementById("texto");

if(elDiv.addEventListener) { // navegadores DOM
  elDiv.addEventListener("click", muestraMensaje, false);
}
else if(elDiv.attachEvent) { // Internet Explorer
  elDiv.attachEvent("onclick", muestraMensaje);
}
else { // resto de navegadores
  elDiv["onclick"] = muestraMensaje;
}
</script>

escudo40 · #7 (**permalink**) 06/10/2007, 06:53

Cita:

Iniciado por escudo40

Utiliza este código

Código HTML:

<HTML>
<HEAD>
</HEAD>
<BODY>

<textarea id="texto"></textarea>

</BODY>
</HTML>

<script type="text/javascript">
function muestraMensaje() {
alert("Has pulsado el ratón");
}

var elDiv = document.getElementById("texto");

if(elDiv.addEventListener) { // navegadores DOM
  elDiv.addEventListener("click", muestraMensaje, false);
}
else if(elDiv.attachEvent) { // Internet Explorer
  elDiv.attachEvent("onclick", muestraMensaje);
}
else { // resto de navegadores
  elDiv["onclick"] = muestraMensaje;
}
</script>

Avísame si te funciona

mdk · #8 (**permalink**) 06/10/2007, 06:54

El problema es que quiero pasar variables en la funccion y de esa forma no me va... :(

escudo40 · #9 (**permalink**) 06/10/2007, 07:00

Tienes razón con lo de las variables, voy a buscar una forma de solucionar eso ve investigando haber si tu consigues la solución también

mdk · #10 (**permalink**) 06/10/2007, 07:03

Estoy en ello ^^

escudo40 · #11 (**permalink**) 06/10/2007, 07:12

Me a funcionado pruébalo

Código HTML:

<HTML>
<HEAD>
</HEAD>
<BODY>

<textarea id="texto" ></textarea>
<textarea id="hola" ></textarea>
</BODY>
</HTML>

<script type="text/javascript">
function muestraMensaje(texto) {
alert(texto);
}


var elDiv = document.getElementById("texto");

elDiv.onclick = function() {
  if(elDiv.addEventListener) { // navegadores DOM
    elDiv.addEventListener("click", muestraMensaje("hola"), false);
  }
  else if(elDiv.attachEvent) { // Internet Explorer
    elDiv.attachEvent("onclick", muestraMensaje("como te encuentras"));
  }
  else { // resto de navegadores
    elDiv["onclick"] = muestraMensaje;
  }
}

//window.onload = function() {
  //document.getElementById("texto").onclick = muestraMensaje("hola");
//}
/*
if(elDiv.addEventListener) { // navegadores DOM
  elDiv.addEventListener("click", muestraMensaje, false);
}
else if(elDiv.attachEvent) { // Internet Explorer
  elDiv.attachEvent("onclick", muestraMensaje);
}
else { // resto de navegadores
  elDiv["onclick"] = muestraMensaje;
}*/
</script>

escudo40 · #12 (**permalink**) 06/10/2007, 07:19

Creo que con esto se te solucionan los problemas, me respondes si te funciona

Código HTML:

<HTML>
<HEAD>
</HEAD>
<BODY>

<div id="idprueva">

</div>

</BODY>
</HTML>

<script type="text/javascript">
function muestraMensaje(texto) {
alert(texto);
}
var elDiv = document.getElementById("idprueva");
var p = document.createElement("p");
var texto = document.createTextNode("Este párrafo no existía en la página HTML original");
p.appendChild(texto);
elDiv.appendChild(p);

elDiv.onclick = function() {
  if(elDiv.addEventListener) { // navegadores DOM
    elDiv.addEventListener("click", muestraMensaje("hola"), false);
  }
  else if(elDiv.attachEvent) { // Internet Explorer
    elDiv.attachEvent("onclick", muestraMensaje("como te encuentras"));
  }
  else { // resto de navegadores
    elDiv["onclick"] = muestraMensaje;
  }
}
</script>

caricatos · #13 (**permalink**) 06/10/2007, 08:18

Cita:

Iniciado por mdk

Mira que soy impaciente, jejeje ya lo he sacado.

Temp.onmouseover = function() { alert('Estoy sobre el layer' + NuevaCapa); }

Hola:

Ese modo funciona bien en todos los navegadores... aunque lo de NuevaCapa, así como lo tienes puede ser un problema... creo que es mejor algo como this.id... y es que eso parece que es un objeto y mostraría algo como [Object] (según el navegador que se use)...

Saludos

mdk · #14 (**permalink**) 06/10/2007, 09:47

Caricatos es que el codigo final es este, pero no se porque en firefox, opera y otros navegadores no me va...

document.getElementById(OrigLayer + 'FondoWindow2').onmousedown = function() { dragStart(event, OrigLayer + 'Shadow'); }

mdk · #15 (**permalink**) 06/10/2007, 10:02

Nada escudo40, sigue pasando esactamente lo mismo, no tira, y encima con el codigo que pones tu me da error de explorer, me dice tipo incorrecto..

escudo40 · #16 (**permalink**) 06/10/2007, 10:18

a mi no me muestra ningun error lo estoy coriendo con IE 6 dime que error te manda

muestrame lo que manda IE exactamente

mdk · #17 (**permalink**) 06/10/2007, 10:34

Mira te digo la direccion de la web y asi ves el codigo javascript si quieres y miras si puedes adaptarlo, es la linea 9 de commands.js y lo que esta bajo como comentarios es lo que puse y lo que no va, la linea 9 es la que me va en explorer y no me va en otro navegador. http://musika.sytes.net/musika3

escudo40 · #18 (**permalink**) 06/10/2007, 11:20

Yo no le conseguí el error como tengo pocos conocimientos con el arrastre de objetos te daré esta dirección donde explican como arrastrar objetos

http://kusor.net/traducciones/brainjar.es/drag1.es.html

y ete pequeño ejemplo

Código HTML:

<HTML>
<HEAD>
</HEAD>

  <style type="text/css">
    .boxA {
      background-color: #ffffc0;
      border: 1px solid #000000;
      padding: 8px;
      position: relative;
      left: 0px;
      top: 0px;
      width: 8em;
    }
    .boxB {
      background-color: #fffff0;
      border: 1px solid #000000;
      padding: 2px;
    }
  </style>
  
<BODY>

	<div style="z-index: 3; left: 4px; top: 0px;" class="boxA" onmousedown="dragStart(event)">Arrástrame</div>

</BODY>
</HTML>

<script type="text/javascript">
// 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) {
	// Clear the drag element global.
  	dragObj.elNode = null;
  	// 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>

mdk · #19 (**permalink**) 06/10/2007, 16:50

No, si el arrastre va perfecto, lo que no va es el evento onmouseover, que es el que hace la llamada a la funcion de arrastre y por lo que abri el post, jejeje