Mouse-Events per JavaScript

[dadom110]

Tag Zusammen,

sitze hier gerade vor einem Problemchen was ich habe, ich versuche eine Art Mouseover mit JavaScript zu basteln.

Über zwei Funktionen wird dieses Ein - oder Ausgeblendet (der Code spielt dabei erst mal keine Rolle, nehmen wir an es steht nur ein "alert" drin, aber hier zumindest mal die Signaturen:

mOverFunction=function(id,inc){...
mOutFunction=function() {...

)

Jetzt erhalte ich mit einem CGI Script und Ajax Daten, aus denen ich eine Tabelle genrriere. In diese Tabelle gibt es ein Bild pro Zeile. dieses Bild versehe ich mit "meinem" Mouseover effekt, bzw. ich versuche es.

iDiv ist in diesem Fall das div in dem das Bild liegt und auf dass der MouseOver soll

So sah es aus:

/* other Browser, works */
iDiv.setAttribute("onmouseover","mOverFunction("+fields[0]+",'"+fields[2]+"')");
iDiv.setAttribute("onmouseout","mOutFunction()");

das ganze funktioniert leider beim IE nicht. Mit Tante Googles hilfe habe ich herrausgefunden das der IE wohl Probleme mit der Methode "setAttribute" macht, wenn er auch "direkte" Zuweisungen kennt. In diesem Fall "onmouseout" und "onmouseover". Das Problem bei diesen beiden Attributen ist das sie eine Methoden REFERENZ haben wollen und nicht den Methoden aufruf. Leider bin ich mit meinem Latein am ende, wie ich das ganze mit Methoden mache, die Parameter erwarten.

So was hatte ich für den IE im Kopf, Fehler: "nicht implementiert"

iDiv.onmouseover=mOverFunction(fields[0],fields[2]);
iDiv.onmouseout=mOutFunction();

dabei spielt es keine Rolle ob ich die Methoden "normal" definiere oder sie direkt einer Variablen zuweise (wie oben).

Jemand eine Idee?

Grüße
Dom

 

[Quaese]

Hi,

versuch mal deine Eventhandler über anonyme Funktionen einzubinden:

iDiv.onmouseover = function(){
  mOverFunction(fields[0],fields[2]);
}

Ciao
Quaese

 

[dadom110]

Hi,
versuch mal deine Eventhandler über anonyme Funktionen einzubinden:

Das Funktioniert leider auch nicht ganz wie gewünscht, er scheint dann bei allen Elementen nur das Popup des aller letzten Elements an zu zeigen

Hier vielleicht doch mal das meiste des Codings:

	mOverFunction=function(id,inc){
                alert(id + " : " + inc);
               //....build Pop Up ....
	}

	mOutFunction=function() {
		alert("close");
                          //...close Popup....
	}
             //elements= retrieving and formatting Data from CGI
	for (i=0;i<elements.length;i++){
		var fields=elements[i].split("#*#")
		tr=document.createElement("tr");
		if (fields.length>1){
			td=document.createElement("td");
			td.appendChild(document.createTextNode(fields[1]));
			tr.appendChild(td);
			
			td=document.createElement("td");
			img=document.createElement("img");
			img.src="./loadData.cgi?mode=image&id="+fields[0];
			img.setAttribute("height","30");
			img.setAttribute("width","30");
			iDiv=document.createElement("div");
			iDiv.style.height="30px";
			iDiv.style.width="30px";
			iDiv.appendChild(img);

			/* IE NOT WORKING */
			var iID=fields[0];
			var desc=fields[2];
			iDiv.onmouseover = function(){
				  mOverFunction(iID,desc);
			}

			iDiv.onmouseout = function(){
				mOutFunction();
			}
			

			/* other Browser, works */
			//iDiv.setAttribute("onmouseover","mOverFunction("+fields[0]+",'"+fields[2]+"')");
			//iDiv.setAttribute("onmouseout","mOutFunction()");
			
			var id=fields[0];
			var inc=fields[2];
			iDiv.appendChild(img);
			td.appendChild(iDiv);
			tr.appendChild(td);
			tbody.appendChild(tr);
		}
	}

	document.getElementById("Result").appendChild(tbody);
}

Hoffe damit kommen wir jetzt weiter danke schon mal
Dom

 

[FipsTheThief]

mOverFunction=function(id,inc){
                alert(id + " : " + inc);
               //....build Pop Up ....
    }
 
    mOutFunction=function() {
        alert("close");
                          //...close Popup....
    }
             //elements= retrieving and formatting Data from CGI
    for (i=0;i<elements.length;i++){
        var fields=elements[i].split("#*#")
        tr=document.createElement("tr");
        if (fields.length>1){
            td=document.createElement("td");
            td.appendChild(document.createTextNode(fields[1]));
            tr.appendChild(td);
            
            td=document.createElement("td");
            img=document.createElement("img");
            img.src="./loadData.cgi?mode=image&id="+fields[0];
            img.setAttribute("height","30");
            img.setAttribute("width","30");
            iDiv=document.createElement("div");
            iDiv.style.height="30px";
            iDiv.style.width="30px";
            iDiv.appendChild(img);
 
           (function(){
                var iID=fields[0];
                var desc=fields[2];

                iDiv.onmouseover = function(){
                    mOverFunction(iID,desc);
                }
 
                iDiv.onmouseout = function(){
                    mOutFunction();
                }
            })();
            
            /* other Browser, works */
            //iDiv.setAttribute("onmouseover","mOverFunction("+fields[0]+",'"+fields[2]+"')");
            //iDiv.setAttribute("onmouseout","mOutFunction()");
            
            var id=fields[0];
            var inc=fields[2];
            iDiv.appendChild(img);
            td.appendChild(iDiv);
            tr.appendChild(td);
            tbody.appendChild(tr);
        }
    }
 
    document.getElementById("Result").appendChild(tbody);
}

Versuch es mal damit die Events in einen Closure abzuhandeln. Da die Variablen iID und desc sonst global wären und dauernd überschrieben werden.

 

[dadom110]

Versuch es mal damit die Events in einen Closure abzuhandeln.

sehr chick, das funktioniert. Das erst mal das ich Closures in Aktion sehe und das Javascript das kann war mir auch neu werd mich mal einlesen wie das ganze im Hintergrund funktioniert, wenn ich da nicht durchsteige komme ich sicherlich noch mal mit der Frage "wie und warum" auf dich zurück

Super vielen Dank erst mal an dieser Stelle dafür.
Grüße
Dom