zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Problem mit dem "Injektieren" von events.

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.07.2007, 17:21
Benutzerbild von nick
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 01.08.2006
Ort: Rheinland-Pfalz
Beiträge: 386
nick befindet sich auf einem aufstrebenden Ast
Standard Problem mit dem "Injektieren" von events.

Hallo.
Wenn alle Elemente innerhalb des Dokumentes geladen sind,
wird die Funktion sethovereffects bei mir ausgeführt mit
'galleriebild' als Argument.

Damit sollen alle Elemente, die diesen name haben, einen
onmouseover- und einen onmouse-out gesetzt bekommen.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" /><html>
<style type="text/css">body {background-color: #696969;}</style>
<script type="text/javascript">
function sethovereffects(elemente)
{
	var run = 0;
	while(CurObj = document.getElementsByName('galeriebild')[run])
	{
		CurObj.onmouseover = "document.getElementsByName('+elemente+')[run].src = 'border.png';";
		CurObj.onmouseout = "document.getElementsByName('+elemente+')[run].src = 'emptyfoil.png';";
		run++;
	}
}
</script>
</head>
<body onload="sethovereffects('galleriebild');">

<img name="galleriebild" src="emptyfoil.png" alt="bild1" />
<img name="galleriebild" src="emptyfoil.png" alt="bild2" />
<img name="galleriebild" src="emptyfoil.png" alt="bild3" />

</body>
</html>
test
Auch die Fehlerkonsole spuckt nichts aus.
Alle Bilder mit dem name 'galleriebild' sollen bei onmouseover
ihr src-Attribut ändern und bei onmouseout wieder
rückgängig gemacht werden.

Welche Denkfehler habe ich da in meinem Skript?

Geändert von nick (18.07.2007 um 17:24 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 18.07.2007, 18:23
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.838
RoToRa wird schon bald berühmt werden
Standard

Zitat:
Zitat von nick Beitrag anzeigen
CurObj.onmouseover = "document.getElementsByName('+elemente+')[run].src = 'border.png';";
Das hier ist ein String, welches wiederrum den String '+elemente+' enthält. Du meinst warscheinlich:

Code:
		CurObj.onmouseover = "document.getElementsByName(\""+elemente+"\")[run].src = 'border.png';";
Aber das würde auch nicht helfen, den wenn das ausgeführt wird, existiert die Variable run nicht, das müsste also auch ersetzt werden:

Code:
		CurObj.onmouseover = "document.getElementsByName(\""+elemente+"\")[" + run + "].src = 'border.png';";
Aber das ist alles unnötig. Man can in einem Eventhandler auf das aktuelle Element mit this zugreifen. Es reicht einfach:

Code:
		CurObj.onmouseover = "this.src = 'border.png';";
Robin
__________________
CSS-Rauch! Nicht einatmen!
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 18.07.2007, 19:40
Benutzerbild von nick
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 01.08.2006
Ort: Rheinland-Pfalz
Beiträge: 386
nick befindet sich auf einem aufstrebenden Ast
Standard

Aj, danke. Hab ich die Variable nicht richtig reingekettet.
Jetzt habe ich es aber folgendermaßen korrigiert:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">body {background-color: #696969;}</style>
<script type="text/javascript">
function sethovereffects(elemente)
{
	var run = 0;
	while(CurObj = document.getElementsByName(elemente)[run])
	{
		CurObj.onmouseover = "document.getElementsByName('"+elemente+"')["+String(run)+"].src = 'border.png';";
		CurObj.onmouseout = "document.getElementsByName('"+elemente+"')["+String(run)+"].src = 'emptyfoil.png';";
		run++;
	}
}
</script>
</head>
<body onload="sethovereffects('galleriebild');">

<img name="galleriebild" src="emptyfoil.png" alt="bild1" />
<img name="galleriebild" src="emptyfoil.png" alt="bild2" />
<img name="galleriebild" src="emptyfoil.png" alt="bild3" />

</body>
</html>
Und sehe aber irgenwie immernoch keine Veränderung,
weder im Browser noch in der Fehlerkonsole.

// edit
Nichtmal das scheint richtig gesetzt worden zu sein
Code:
		CurObj.onmouseover = "document.getElementsByName('"+elemente+"')["+String(run)+"].src = 'border.png';";
		CurObj.onmouseout = "document.getElementsByName('"+elemente+"')["+String(run)+"].src = 'emptyfoil.png';";
// edit 2
Hier kann ich doch auch abfragen, was das onmouseover-event des ersten Bildes ist.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">body {background-color: #696969;}</style>
<script type="text/javascript">
function sethovereffects(elemente)
{
	var run = 0;
	while(CurObj = document.getElementsByName(elemente)[run])
	{
		CurObj.onmouseover = "document.getElementsByName('"+elemente+"')["+String(run)+"].src = 'border.png';";
		CurObj.onmouseout = "document.getElementsByName('"+elemente+"')["+String(run)+"].src = 'emptyfoil.png';";
		run++;
	}
}
</script>
</head>
<body onload="sethovereffects('galleriebild');">

<p align="center">
	<img name="galleriebild" src="emptyfoil.png" alt="bild1" />
	<img name="galleriebild" src="emptyfoil.png" alt="bild2" />
	<img name="galleriebild" src="emptyfoil.png" alt="bild3" />
<p>

<a href="#" onclick="alert(document.getElementsByName('galleriebild')[0].onmouseover); return false;">onmouseover-attributwert vom ersten bild ausgeben</a>

</body>
</html>
Wieso kommt dann aber kein alert, wenn ich mit der Maus über das erste Bild gehe?
Und wenn ich da irgendwas falsch habe, wieso ist auch in der Fehlerkonsole nichts zu sehen?

Geändert von nick (18.07.2007 um 20:52 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 19.07.2007, 14:58
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.838
RoToRa wird schon bald berühmt werden
Standard

Ich hatte vergessen: Event-Handler verlangen eine Funktions-Referenz und kein String.

Code:
function imageMouseOver() {
   this.src = "xxx.jpg";
}

CurObj.onmouseover = imageMouseOver;
Robin
__________________
CSS-Rauch! Nicht einatmen!
Mit Zitat antworten
  #5 (permalink)  
Alt 19.07.2007, 15:11
Alles- & Nixkönne
XHTMLforum-Mitglied
 
Registriert seit: 05.10.2006
Ort: Hamburg
Beiträge: 156
Ernie wird schon bald berühmt werden
Standard

Oder man benutzt Function("string"), was allerdings genauso böse wie eval ist...
Mit Zitat antworten
  #6 (permalink)  
Alt 19.07.2007, 15:15
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.838
RoToRa wird schon bald berühmt werden
Standard

Zitat:
Zitat von Ernie Beitrag anzeigen
Oder man benutzt Function("string"), was allerdings genauso böse wie eval ist...
Pssst! Das habe ich nicht extra erwähnt, damit er aufhört unnötigerweise getElementsByName zu benutzen

Robin
__________________
CSS-Rauch! Nicht einatmen!
Mit Zitat antworten
  #7 (permalink)  
Alt 19.07.2007, 15:25
Alles- & Nixkönne
XHTMLforum-Mitglied
 
Registriert seit: 05.10.2006
Ort: Hamburg
Beiträge: 156
Ernie wird schon bald berühmt werden
Standard

Hätte er die Seite anschließend validiert, hätte er dann vielleicht ja auch gemerkt, daß es kein name-attribut für img tags gibt...
Mit Zitat antworten
  #8 (permalink)  
Alt 19.07.2007, 16:01
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.838
RoToRa wird schon bald berühmt werden
Standard

Zitat:
Zitat von Ernie Beitrag anzeigen
Hätte er die Seite anschließend validiert, hätte er dann vielleicht ja auch gemerkt, daß es kein name-attribut für img tags gibt...
Doch in Transitional schon. Man sollte es trotzdem vermeiden...

Robin
__________________
CSS-Rauch! Nicht einatmen!
Mit Zitat antworten
  #9 (permalink)  
Alt 19.07.2007, 16:36
Alles- & Nixkönne
XHTMLforum-Mitglied
 
Registriert seit: 05.10.2006
Ort: Hamburg
Beiträge: 156
Ernie wird schon bald berühmt werden
Standard

Stimmt auch wieder, das hatte ich schon völlig verdrängt.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 19.07.2007, 18:27
Benutzerbild von nick
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 01.08.2006
Ort: Rheinland-Pfalz
Beiträge: 386
nick befindet sich auf einem aufstrebenden Ast
Standard

Und wieso komme ich damit in den Block?
Code:
	while(CurObj = document.getElementsByName(elemente)[run])
was mir alerts bestätigen.
Und müsste dann nicht wenigstens eine Fehlermeldung dazu kommen?

Code:
<a href="#" onclick="alert(document.getElementsByName('galleriebild')[0].onmouseover); return false;">onmouseover-attributwert vom ersten bild ausgeben</a>
Hier kann ich den Wert des onmouseover-Attributes der ersten Grafik zum Beispiel abfragen.
Wie konnte das denn nur bitte zugewiesen werden?
Das ganze Problem ist, dass das event nun da ist, aber nie ausgelöst wird...

SELFHTML: HTML/XHTML / Referenz /HTML-Attribut-Referenz
Zitat:
Zitat von allmächtiges selfhtml
Erlaubt in den Varianten Seite Strict, Transitional, Frameset
(nicht in XHMTL 1.0 Strict)
Habt ihr gut erkannt.

// edit
Was heißt hier name nicht benutzen?
Es matcht alle Elemente mit dem selben name als Array, womit man jedes einzelne
beeinflussen kann, unabhängig von einer bestimmten Menge oder id-nummerierung.
Einfach jedem Bild im Doukment dieses namens sein event injektieren.

Geändert von nick (19.07.2007 um 18:45 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Problem mit dem Browserabstand Phöney CSS 2 05.04.2008 16:18
Problem mit dem IE7 uspri CSS 11 16.12.2006 18:07
Problem mit dem einbinden von Flash Lockhead883 (X)HTML 0 01.03.2006 07:09
problem mit dem ie beim anzeigen von infoboxen /alternative Mythic CSS 2 01.02.2006 10:36
problem mit dem JS für css-menü nevermind Serveradministration und serverseitige Scripte 4 25.01.2006 12:46


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:02 Uhr.