Problem wenn div mit mouse verlassen dann close

[diana]

Ich habe folgendes Problem . Ich erstelle wenn man wohinklickt ein neues div in dem auch andere divs erstellt werden genau über der mausposition wo man hingeklickt hat .
Wenn man nun den Mauszeiger aus dem div herausbewegt soll sich das div schliesen was es auch tut . Nun habe ich aber folgendes Problem .
Ich deklariere ein weiteres div als child von dem div welches ich öffne . es wird in dem Bereich der Elterndivs angezeigt . Es soll später einen Link oder einen funktionsaufruf enthalten .
Wenn ich nun aber über das child div fahre schliest sich mein elterndiv auch . Kann mir da jemand einen Denkanstoß geben , wäre wirklich sehr nett .
Existiert eine Möglichkeit einen onmouseout zu definieren der nur ausgelöst wird wenn man das Element verläst ( die child elemente aber nicht berücksichtigt werden ) ?

Hier der codeausschnitt

//------------- js ausschnitt wo ich das neue div erstelle

if(boxbesteht == 0){
  topdis  = - xverschiebung;
  leftdis = - yverschiebung;

var posarray = ubergabe.split("_");
  posarray[0] = ((posarray[0]*60)+topdis)-30;
  posarray[1] = ((posarray[1]*60)+leftdis)-30;

newdiv = document.createElement("div");
  newdiv.setAttribute("id", "box");
  newdiv.style.top = posarray[0]+"px";
  newdiv.style.left =posarray[1]+"px";

newebeneDiv = document.createElement("div");
  newebeneDiv.setAttribute("id", "divebene");
  newebeneDiv.style.position = "relative";
  newebeneDiv.style.top   = "20px";
  newebeneDiv.style.left  = "20px";
  newebeneDiv.style.width = "30px";
  newebeneDiv.style.height= "30px";
  newebeneDiv.style.backgroundColor= "green";
  newdiv.appendChild(newebeneDiv);

document.getElementById("mapbevordiv").appendChild(newdiv);
  document.getElementById("box").onmouseout = mapcordstop;

boxbesteht = 1;

}

//--------------------- hier die aufgerufene function für das schliesen

function mapcordstop(){
 this.parentNode.removeChild(this);
 boxbesteht = 0;
}

[frankx]

Hellihello

na wenn du das ganz div removest, ist natürlich auch der ganz inhalt wech. du könntest also den inhalt vorher mit einer referenz belegen und diesen nachher wieder einfügen:

inneresDiv=document.getElementById("inneresDiv");

... und nach dem Löschen:

body.appenChild(inneresDiv);

oder so ähnlich---
frankx

[diana]

Das Problem ist ja , man kann auf vieles klicken , und genau über der position erscheint dann das neue div . Es darf aber nur erscheinen wenn kein anderes mehr offen ist . das überwache ich mit
if(boxbesteht == 0){
Auch das child div von diesem soll nur solange stehen bis das elterndiv verschwunden ist . Daher ist das wiedereinfügen an der Position schlecht vorallem da das ganze noch dynamisch erstellt werden soll .

[diana]

Ich habe eine Frage

existiert die Möglichkeit eine Grafik frei in einem div element auszurichten ?
Also zu bestimmen top left zu dem elternelement ? oder geht das nur bei divs ? Und wie kann man scr knoten dynamisch über dom erstellen ? Finde hierzu leider nichts in selfhtml :(

[frankx]

Hellihello

Ich habe eine Frage

existiert die Möglichkeit eine Grafik frei in einem div element auszurichten ?

vielleicht mit css: img.ausrichten {diplay:block;position:relative...)

Also zu bestimmen top left zu dem elternelement ? oder geht das nur bei divs ? Und wie kann man scr knoten dynamisch über dom erstellen?

ist src nicht ein Attribut?

alert(document.getElementsByTagName("img")[0].src) sollte dir das zeigen...;

frankx

[peter]

Hi

existiert die Möglichkeit eine Grafik frei in einem div element auszurichten ?

ja

Also zu bestimmen top left zu dem elternelement ? oder geht das nur bei divs ? Und wie kann man scr knoten dynamisch über dom erstellen ? Finde hierzu leider nichts in selfhtml :(

wie schon von frankx gesagt, src ist kein knoten sondern ne eigenschaft des img-knotens.

in selfhtml:
http://de.selfhtml.org/javascript/objekte/images.htm

bsp.:
var bild=new Image();
bild.src='........';

position per style zuweisen.
(bei position:absolute muß das Elternelement auch Position:absolute oder position:relative haben)
in selfhtml:
http://de.selfhtml.org/javascript/objekte/style.htm

bsp.:
bild.style.position='absolute';
bild.style.left='10px';

gruß
peter

[peter]

Hi,

ich denke, eine suche nach dropdown-menu oder so in verb. mit mouseover/mouseout sollte gute ergebnisse erzielen. da tritt dieser effekt auch auf.

hilfreich ist bestimmt, mal alerts für mouseover/mouseout auf deine divs zu setzen und zu beobachten, wann was auftritt.

stichwort "eventbubbling" sollte auch weiterhelfen

gruß
peter

[Struppi]

Ich habe folgendes Problem . Ich erstelle wenn man wohinklickt ein neues div in dem auch andere divs erstellt werden genau über der mausposition wo man hingeklickt hat .
Wenn man nun den Mauszeiger aus dem div herausbewegt soll sich das div schliesen was es auch tut . Nun habe ich aber folgendes Problem .
Ich deklariere ein weiteres div als child von dem div welches ich öffne . es wird in dem Bereich der Elterndivs angezeigt . Es soll später einen Link oder einen funktionsaufruf enthalten .
Wenn ich nun aber über das child div fahre schliest sich mein elterndiv auch . Kann mir da jemand einen Denkanstoß geben , wäre wirklich sehr nett .
Existiert eine Möglichkeit einen onmouseout zu definieren der nur ausgelöst wird wenn man das Element verläst ( die child elemente aber nicht berücksichtigt werden ) ?

Kurz - nein.

Lang ja, eine kurze suche mit google, hat mich auf diese Seite gebracht http://www.thefutureoftheweb.com/blog/2006/2/bursting-the-event-bubble

Die Lösung sieht also so aus:

  
<script type="text/javascript">  
var box = null;  
function show(e)  
{  
    if(box) return;  
  
    var pos = mouse_pos(e);  
    box = document.createElement('div');  
    box.style.position = 'absolute';  
    box.style.backgroundColor = '#fff';  
    box.style.top = ( 2+ pos.top )  + 'px';  
    box.style.left = ( 2 + pos.left ) + 'px';  
    box.style.padding = 25 + 'px';  
    var img = new Image();  
    img.style.position = 'relative';  
    img.style.top = '15px'  
    img.src = 'test.jpg';  
    box.appendChild( img );  
    document.body.appendChild( box);  
    box.onmouseout = function(e)  
    {  
         if(!this.parentNode) return; // FF feuert den Event zweimal, Bug?  
         if(!e) e= window.event;  
         var related = e.relatedTarget || e.toElement;  
         while (related && related != this)  
         {  
              related = related.parentNode;  
              if (related == this) return;  
         }  
         this.parentNode.removeChild( this);  
         box = null;  
    }  
}  
function mouse_pos(evt)  
{  
    if(!evt) evt = window.event;  
    var pos = new Object();  
    pos.left = evt.clientX;  
    pos.top = evt.clientY;  
    var b = (window.document.compatMode && window.document.compatMode == "CSS1Compat") ?  
   window.document.documentElement : window.document.body || null;  
    if (b)  
    {  
        pos.scrollLeft= pos.left + b.scrollLeft;  
        pos.scrollTop = pos.top + b.scrollTop;  
    }  
    return pos;  
}  
</script>  

  
<div style="border:1px solid black" onmouseover="show(event)">test</div>  

Struppi.