onMouseOver in <style> zentral definieren
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anwendung
array
berechnen
code
durchlesen
element
ergebnis
farbe
funktion
hintergrund
http
machen
nette idee
objekt
position
problem
sache
unterschied
url
wissen
-
Hallo zusammen,
ich stehe vor dem Problem, ein javascript onMouseOver-Event zentral im Stylesheet definieren zu müssen. Dabei hatte ich mir gedacht, dass alle mit a klassifizierten Objekte die selbe js Funktion aufrufen bei onMouseOver. Mein bisheriges Style:
a.ac { position:absolute; width:2px; height:1px; }
Nun will ich das Event im Style zentral definieren:
onMouseOver="xyz('this.backgroundColor');"
Leider bin ich bisher an einer Lösung gescheitert. :(
Kennt jemand die richtige Deklaration oder ob dies überhaupt möglich ist?
Wichtig ist, dass das OnMouseOver-Event nicht innerhalt des <a>-Tags stehen darf, sondern zentral deklariert sein muss und dass es sich um javacscript handeln muss, da die backgroundColor des jeweils angesprochenen Elements in js weiterverarbeitet werden soll.
Hintergrund ist, dass ich ca. 10000 Objekte mit js erstelle und hierdurch der Ressorcenverbrauch immens steigt und js "stockt"/ruckelt.
Zuerst hatte ich als Objekte div-Elemente erstellen lassen = ruckeln/starke Verzögerung
Nachdem ich div zu a-Elementen abgeändert hatte ruckelte es bereits weniger
Anschließend habe ich die position, sowie width und height im Stylesheet zentral definiert = noch weniger Verzögerung.
Durch die zentrale Definition von onmouseover erhoffe ich mir noch weniger ruckeln, daher keine Deklaration innerhalb des a-Tags sondern die zentrale Variante - falls möglich.
Kennt jemand ein Element, dass weniger Ressourcen verbraucht als ein <a>-Tag (Sichtbarkeit und Zuordnung von backgroundColor, top, left muss gegeben sein)?
Die Elemente werden wie folgt ausgegeben:
var auswahlausgabe=document.getElementById("farbpicker23"); var divinhalt=''; for ... 0... 10000... { ... divinhalt=divinhalt+'<a class="ac" onmouseover="pickcolor(\''+color+'\');" style="left:'+ex+'px;top:'+ey+'px;background-color:'+color+';"></a>'; } auswahlausgabe.innerHTML=auswahlausgabe.innerHTML+divinhalt; -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Wenn ich Dein Problem richtig verstanden habe, solltest Du Dir mal jQuery anschauen; damit lassen sich quasi Javascript-Funktionen auf CSS-Selektoren anwenden.
Ob das dann aber wirklich schneller ist, kann ich Dir nicht versichern. -
Wie tobiworlds bereits erwähnt hat wäre hier jQuery angebracht, damit kannst du innerhalb einer einzigen JS-Zeile das zuweisen.
Das ginge dann in etwa so:function mousehandler(event) { // mach irgendwas } $('a.ac').mouseover(mousehandler);
Aber: warum brauchst du überhaupt so viele a-Elemente? Wie wäre es, wenn du die Farben in ein Canvas malst und dann nur auf das Canvas einen onMouseOver-Listener legst? Dann würdest du über die xy-Koordinaten des Events eindeutig die Stelle kennen und damit die Farbe berechnen können, und das alles ohne dem stark übertriebenen Resourcenverbrauch… -
var nodes = documnent.querySelectorAll(' a.ac' ); for ( n in nodes ) { n.onmouseover = function() { //do something }; }
Ungetestet, braucht kein jQuery, unterstützt von IE8, Chrome1, FF3.5, Opera10, Safari3.2 , jeweils aufwärts.
On MouseOver könntest du aber auch mit der Pseudoklasse :hover im CSS beeinflussen, wäre das vllt was, was du gebrauchen könntest?
Liebe Grüße -
ggamee schrieb:
Dazu eventuell mal das durchlesen, bei dieser Anwendung wird es aber wohl kaum einen Unterschied machen…
Ungetestet, braucht kein jQuery, unterstützt von IE8, Chrome1, FF3.5, Opera10, Safari3.2 , jeweils aufwärts.
ggamee schrieb:
Nette Idee, wenn mit der per mouseover ausgewählten Farbe weitergearbeitet werden soll… CSS alleine wird ihm hier wohl nichts nützen.
On MouseOver könntest du aber auch mit der Pseudoklasse :hover im CSS beeinflussen… -
hackyourlife schrieb:
ggamee schrieb:
Dazu eventuell mal das durchlesen, bei dieser Anwendung wird es aber wohl kaum einen Unterschied machen…
Ungetestet, braucht kein jQuery, unterstützt von IE8, Chrome1, FF3.5, Opera10, Safari3.2 , jeweils aufwärts.
ggamee schrieb:
Nette Idee, wenn mit der per mouseover ausgewählten Farbe weitergearbeitet werden soll… CSS alleine wird ihm hier wohl nichts nützen.
On MouseOver könntest du aber auch mit der Pseudoklasse :hover im CSS beeinflussen…
Jenachdem was der Plan ist. Da ich nicht erkenne, wofür es ist, kann es aber durchaus gebraucht werden, um zum Beispiel die Farbe hervorzuheben. Wenn man damit natürlich ein externes Element triggern will, dann ists recht sinnlos, ABER , das wäre ebenfalls sinnlos, denn wenn du dann mit der Maus rausfährst, wird es ebenfalls umgefärbt, darum wird die Farbwahl an sich vermutlich nur per Click erfolgen. Ein hervorheben geht mit :hover ebenfalls.
So wir könn ja noch was anderes aufgreifen: Warum ruckelt es wenn DOMElemente hinzugefügt werden. Nun, das liegt daran, dass Javascript Singlethreaded ist, und du die Eventqueue blockierst. Ob Inlineelement ( a ist inline ) oder Blockelement ( div ist ein Blockelement ), liegt bei der Renderingengine relativ im im Hintergrund. Beides ist ok. 10k Elemente sind an sich auch eine Sache, die man verkraften könnte, aber du kannst es auch versuchen über direkte Nodeerzeugung zu generieren, und nicht über einen Text, der dann erst geparsed werden muss. Füge die Elemente doch so hinzu:
var auswahlausgabe=document.getElementById("farbpicker23"); for ( var i=0 ; i<10000 ; i++ ){ setTimeout(function(){ var node = document.createElement( 'a' ); node.setAttribute( 'class' , 'ac' ); node.onmouseover = function() {}; node.onclick = function() {}; auswahlausgabe.appendChild( node ); },0); }
So, warum mache ich das so? Erstmal kommen die Createelemente in die Eventqueue. Damit kann zwischendrin ein Buttonclick oder ähnliches abgearbeitet werden, und der Browser wird, auch wenn schwachbrüstig, nicht meckern, dass die Seite steht und abgestürzt ist. Außerdem ersparen wir dem Browser das Parsen des HTML, denn anders als Text (darum gibt es innerHTML und innerText, das sind Unterschiede), muss der HTML-Part geparsed werden, und dann in den DOMTree eingebaut werden. Eigentlich nicht weiter wild, aber des ist so ein persönlicher geschmack. Ich mache es gern so, da es so am performantesten und leserlichsten geht, in meinen Augen. Probier es gerne aus, dann wirst du sehen, ob es weniger lagt.
Warum nun aber den querySelector? Nun, eigentlich ists egal. Wenn man jQuery sowieso benutzt, dann ist $().bind sicherlich eine gute wahl, oder halt "mouseover", je nach Geschmack. Wenn man jQuery nur für diese eine Sache benutzen möchte, dann kann man in meinen Augen auch den querySelector benutzen. Man kann recht genau an die Elemente rankommen, denn praktisch ist Sizzle nur eine JS Implementierung dessen, welche mitlerweile, sofern verfügbar, auch den querySelector nutzt. Es ist natürlich die Frage, was ist im Hintergrund gegeben. Einen Unterschied macht es nicht direkt, nur wenn man jQuery sonst nicht braucht, kann man sich die Ladezeit sparen. Da ich jetzt aber erstmal hunger habe, werd ich mich erstmal um was zu essen kümmern, dann können wir später gern noch weitere Details klären :)
Liebe Grüße
Liebe Grüße -
ggamee schrieb:
Jenachdem was der Plan ist. Da ich nicht erkenne, wofür es ist..
Ich denke, esadat möchte sich einen Color-Picker zusammenbasteln..
esadat schrieb:
.. allerdings ohne jQuery, um an seinen anderen Beitrag anzuknüpfen.
var auswahlausgabe=document.getElementById("farbpicker23"); var divinhalt=''; for ... 0... 10000... { ... divinhalt=divinhalt+'<a class="ac" onmouseover="pickcolor(\''+color+'\');" style="left:'+ex+'px;top:'+ey+'px;background-color:'+color+';"></a>'; } auswahlausgabe.innerHTML=auswahlausgabe.innerHTML+divinhalt;
http://www.lima-city.de/thread/js-farbpicker-farbwaehler-als-ring-coden -
Guten Morgen ;) und erst einmal vielen Dank für die zahlreichen Antworten!
ja das onmouseover benötige ich für mein Farbring-Picker-Projekt, an dem ich schon das ganze WE rumhantiere:
http://esadat.lima-city.de/farbkreis.html
Daher ist die Verwendung von jQuery nicht gewollt.
Hintergrund ist, dass es mir Spaß macht zu coden und mir die Sachen beizubringen. Tools kann jeder verwenden, neben der ganzen Lizenzproblematik, mit der ich mich erst garnicht beschäftigen will etc. wissen nur wenige, wie die Tools überhaupt funktionieren. Ich will halt auch wissen, was dahinter steckt, wie es funktioniert und nicht nur dass es funktioniert. Gut, den Code der Tools durchzugehen wäre eine Alternative, aber macht es nicht mehr Spaß Probleme zu erkennen, zu analysieren und Lösungswege zu finden, Lösungen auszuprobieren? Viele sagen, warum das Rad neu erfinden, aber genau das stärkt das Verständnis für die Materie und darum geht es mir.
...hehe, was ich grade festgestellt habe:
Im Google Chrome gibt es keine Verzögerung ^^
Im Firefox gibt es eine hohe Verzögerung
und der IE spielt noch nicht mit ^^
... daher bitte mit Firefox ausprobieren, falls gewollt ^^
Wie kommt es, dass Chrome im Gegensatz zu Firefox keine Verzögerung hat?
Um das von hackyourlife vorgeschlagene Canvas werde ich wohl nicht herumkommen. Allerdings die Farben aufgrund der Mausposition zu berechnen ist unmöglich ^^. Nun dachte ich mir, dass ich das Canvas anstatt den <a>-Objekten erstelle, aber die Farbe in einem 2D-Array speichere:
Dann durch die Mausposition abzüglich der Mutterdiv-Position die Farbe auslese und in js weiterverarbeite.array[x,y]='#xyzab';
Nun meine Fragen:
Gibt es durch ein riesiges 2D-Array vermutlich weiterhin Verzögerungen? (Sind übrigens ca. 30000 - 40000 Farben und somit Positionen)
Was haltet ihr bisher von meinen Ergebnisse, unter Berücksichtigung, dass es noch nicht fertig ist?
-
esadat schrieb:
Warum? Du berechnest dir wo du dich am Kreis befindest und rechnest dir die Farbe so aus wie du sie beim Zeichnen des Kreises ausgerechnet hast… das braucht wesentlich weniger Speicher als ein Array. Und Canvas deshalb, weil du dann nur ein einziges DOM-Element hast und keine 40000, was die Sache auch wieder beschleunigt
Allerdings die Farben aufgrund der Mausposition zu berechnen ist unmöglich ^^.
esadat schrieb:
Wenn das noch ein wenig optimiert wird sieht das schon mal gar nicht schlecht aus…
Was haltet ihr bisher von meinen Ergebnisse, unter Berücksichtigung, dass es noch nicht fertig ist?
Beitrag zuletzt geändert: 4.11.2012 17:22:10 von hackyourlife -
Momentan kann man noch grau auswählen, indem man langsam aus dem rechten Kreis rausfährt.
Wenn Du das so löst, wie hack-your-life gesagt hat, sollte das aber eigentlich kein Problem mehr sein... -
...Momentan kann man noch grau auswählen...
Schwarz, weiß und grau will ich auch noch irgendwie auswählbar machen ^^
Hab zuerst die Variante mit dem Array ausprobiert und funktioniert überraschenderweise einwandfrei :)
So WE geht zu Ende und bin erstmal ganz zufrieden mit dem vorläufigen Ergebnis:
http://esadat.lima-city.de/farbkreis_canvas2.html
So... Bett ruft ^^ -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
