ID oder Name bei Eventhanlder (onmouseover / onmouseout)

[Messmar]

hallo,

ich habe in meinem XHTML-Code ein Eventhandler onmouseover / onmouseout für images.

In den Image-Tag, habe ich id='NameDesBildes'.
Der IE6 zeigt aber eine Fehlermeldung, weil er mit "ID" nichts anfangen kann. FireFox und NS7 haben damit kein Problem und führen den Evenhandler aus.

Wenn Ich aber name='NameDesBildes' in dem Image-Tag extra dazu für den IE6 schreibe (Was auch bei beiden Browsern funktioniert), dann habe eine Fehlermeldung bei dem HTML bzw. XHTML-Validator: "http://validator.w3.org/" was eigentlich nicht passieren darf, da ich XHTML-Strict verweden soll oder muss.

Hat jemand hier bitte einen Vorschlag oder Lösung oder Tipp.

Danke und Gruß
Messmar

[xjs]

hi,

Der IE6 zeigt aber eine Fehlermeldung, weil er mit "ID" nichts anfangen kann.

Ich denk mal, du solltest es so lassen und IE-Benutzer auf eine Download-Möglichkeit von Firefox o. Ä. hinweisen. Microsoft muss lernen, sich an die Regeln zu halten.

ciao,
xjs

[Ashura]

Hallo Messmar.

Hat jemand hier bitte einen Vorschlag oder Lösung oder Tipp.

Sicher doch. Wenn du mit etwas Code herausrücken würdest.

Einen schönen Mittwoch noch.

Gruß, Ashura

[Messmar]

Hallo Ashura,

Sicher doch. Wenn du mit etwas Code herausrücken würdest.

Danke zunächst.

Hier we are:

JScript-Code:
if (document.images)
{
   ceoHigh = new Image();bildOn.src ="bild_00.gif";
   ceoLow = new Image();BilOff.src = "bild_01.gif";
}

function changeImages()
{
   if (document.images)
 {
   for (var i=0; i<changeImages.arguments.length; i+=2)
  {
    document[changeImages.arguments[i]].src = changeImages.arguments[i+1] .src;
  }
 }
}

Html-Code:

<a href="#" onmouseover="changeImages('BildName', BildOn);" onmouseout="changeImages('BildName', BildOff);">
  <img src="bild.gif" width="85" height="14" name="BildName" id="BildName" alt="" />
  </a>

[Ashura]

Hallo Messmar.

JScript-Code:

Ich dachte, es ging um JavaScript?

if (document.images)

{
   ceoHigh = new Image();
   bildOn.src ="bild_00.gif";
   ceoLow = new Image();
   BilOff.src = "bild_01.gif";
}

>   
>   
> ~~~javascript

function changeImages()  

> {  
>   if (document.images) {  
>      for (var i=0; i<changeImages.arguments.length; i+=2) {  
>      document[changeImages.arguments[i]].src = changeImages.arguments[i+1] .src;  
>      }  
>   }  
> }

Html-Code:

<a href="#" onmouseover="[code lang=javascript]changeImages('BildName', BildOn);" onmouseout="changeImages('BildName', BildOff);">
  <img src="bild.gif" width="85" height="14" name="BildName" id="BildName" alt="" />
  </a>[/code]

Und wo übernimmt deine Funktion changeImages() nun die beiden ihr übergebenen Parameter?

Einen schönen Mittwoch noch.

Gruß, Ashura

[Messmar]

Hallo Ashura,

Und wo übernimmt deine Funktion changeImages() nun die beiden ihr übergebenen Parameter?

sorry, mein Fehler, der erste Teil des JavaScipt-Code muss foldes sein:
if (document.images)
{
    BildOn = new Image();BildOn.src ="bild_00.gif";
    BildOn = new Image();BilOff.src = "bild_01.gif";
}

Gruß
Messmar

[Ashura]

Hallo Messmar.

Ich frage mich gerade, warum du es dir so schwer machst.

Warum verwendest du nicht einfach eine Referenz auf this in deiner Funktion und änderst damit this.src anhand eines zweiten Parameters?

Einen schönen Mittwoch noch.

Gruß, Ashura

[Ingo Turski]

Hi,

Ich frage mich gerade, warum du es dir so schwer machst.

Warum verwendest du nicht einfach eine Referenz auf this in deiner Funktion und änderst damit this.src anhand eines zweiten Parameters?

weil er dann auch noch firstChild und ggfls. nextSibling kennen müßte? ;-)

Ich frage mich eher, warum er dafür überhaupt Javascript verwendet und nicht einfach einen CSS-Bildwechsel.

freundliche Grüße
Ingo

[Struppi]

Ich frage mich gerade, warum du es dir so schwer machst.

Warum verwendest du nicht einfach eine Referenz auf this in deiner Funktion und änderst damit this.src anhand eines zweiten Parameters?

weil er dann auch noch firstChild und ggfls. nextSibling kennen müßte? ;-)

Nur wenn er unbedingt den Link haben will.

Ich frage mich eher, warum er dafür überhaupt Javascript verwendet und nicht einfach einen CSS-Bildwechsel.

So sieht's aus. Dann brauch er aber wieder den Link.

Struppi.

[messmar]

Hallo,

Nur wenn er unbedingt den Link haben will.

hmm, was menist du jetzt? ;-((

So sieht's aus. Dann brauch er aber wieder den Link.

Und mit dem satz hier auch ?

Messmar

[Struppi]

Hallo messmar

Hallo,

Nur wenn er unbedingt den Link haben will.

hmm, was menist du jetzt? ;-((

schau mal hier: https://forum.selfhtml.org/?t=111303&m=700334
du brauchst nicht <a href="#" ...>

So sieht's aus. Dann brauch er aber wieder den Link.
Und mit dem satz hier auch ?

das mit dem css:hover geht im IE nur bei Links.

Struppi.

[Ashura]

Hallo Ingo.

Warum verwendest du nicht einfach eine Referenz auf this in deiner Funktion und änderst damit this.src anhand eines zweiten Parameters?

weil er dann auch noch firstChild und ggfls. nextSibling kennen müßte? ;-)

Hm?

<script type="text/javascript">  
[code lang=javascript]function was(nun)  
{  
  var foo = "foo.gif";  
  var bar = "bar.gif";  
  if(nun.src == foo)  
  {  
    nun.src = bar;  
  }  
  else  
  {  
    nun.src = foo;  
  }  
}

</script>[/code]

<img src="foo.gif" onclick="was(this)" />

Einen schönen Mittwoch noch.

Gruß, Ashura

[Ingo Turski]

Hi,

weil er dann auch noch firstChild und ggfls. nextSibling kennen müßte? ;-)

Hm?

natürlich nur unter der Voraussetzung, daß er wie bisher das a-Element anspricht.

freundliche Grüße
Ingo

[Ashura]

Hallo Ingo.

weil er dann auch noch firstChild und ggfls. nextSibling kennen müßte? ;-)

Hm?
natürlich nur unter der Voraussetzung, daß er wie bisher das a-Element anspricht.

Achso.

Einen schönen Mittwoch noch.

Gruß, Ashura

[Messmar]

Hi,

weil er dann auch noch firstChild und ggfls. nextSibling kennen müßte? ;-)

Das ist richtig und dabei habe ich was neues und gutes gelernt.

Ich frage mich eher, warum er dafür überhaupt Javascript verwendet und nicht einfach [...]

Danke für den Tipp mit dem CSS. Das ist Cool man.

Gruß
Messmar

[Messmar]

Hallo Ashura,

Ich frage mich gerade, warum du es dir so schwer machst.

[...]anhand eines zweiten Parameters?

Hmmm, wie meinst du das ?

Eine kurze Frage wenn ich darf: Ashura ist ein arabischer Name oder nicht?

Gruß
Messmar

[Ashura]

Hallo Messmar.

[...]anhand eines zweiten Parameters?

Hmmm, wie meinst du das ?

Nichts für ungut, arguments war mir noch nicht bekannt.

Eine kurze Frage wenn ich darf: Ashura ist ein arabischer Name oder nicht?

Dem Ursprung entsprechend, ja. [Wikipedia: Ashura]

Einen schönen Mittwoch noch.

Gruß, Ashura

[Messmar]

Hallo Messmar.

Warum verwendest du nicht einfach [...]this.src anhand eines zweiten Parameters?

Stop, ich habe es.

Danke
Messmar

[Struppi]

JScript-Code:

Nein, Javascript!

if (document.images)
{
   ceoHigh = new Image();bildOn.src ="bild_00.gif";
   ceoLow = new Image();BilOff.src = "bild_01.gif";
}

function changeImages()

»{

if (document.images)
{
   for (var i=0; i<changeImages.arguments.length; i+=2)
  {
    document[changeImages.arguments[i]].src = changeImages.arguments[i+1] .src;

Hier greifst du auf document.images zu, dieses Objekt refrenziert die Bilder über den Namen nicht über die ID, wenn du die ID verwenden willst, mußt document.getElementById verwenden oder du mußt einen DOCTYPE verwenden der name zuläßt.

<a href="#" onmouseover="changeImages('BildName', BildOn);" onmouseout="changeImages('BildName', BildOff);">
  <img src="bild.gif" width="85" height="14" name="BildName" id="BildName" alt="" />
  </a>

Falls es wirklich nur um das Bild geht, warum führst du den Event nicht über dem Bild aus?
<img src="bild.gif" " ....
onmouseover="changeImages('BildName', BildOn);"
onmouseout="changeImages('BildName', BildOff);"
/>

ist durchaus ok, dann könntest du, wie schon erwähnt, mit this arbeiten.

z.b.
<img src="bild.gif" " name="BildName" id="BildName" alt=""
onmouseover="this.src = BildOn.src;"
onmouseout="this.src = BildOff.src;"

Struppi.

[molily]

Hallo,

document[changeImages.arguments[i]].src

Hier greifst du auf document.images zu, dieses Objekt refrenziert die Bilder über den Namen nicht über die ID, wenn du die ID verwenden willst

Doch, gemäß DOM HTML ist document.images als HTMLCollection von allen img-Elementen im Dokument definiert, und namedItem (das ist in JavaScript die Schreibweise images["name"]) sucht zuerst nach Bildern mit einem solchen id-Attribut, dann nach Bildern mit einem solchen name-Attribut (in echtem XHTML nur nach id-Attribut).
(Aber du hast Recht, DOM HTML sieht es nicht vor, dass man Bilder mit name- oder id-Attributen über document.bildname ansprechen kann, das ist Netscape-JavaScript-Erbe und gilt auch zumindest definitionsgemäß nur für name-Attribute.)

mußt document.getElementById verwenden oder du mußt einen DOCTYPE verwenden der name zuläßt.

Letzteres ist sowieso ratsam, weil document.images in mehr Browsern funktioniert als document.getElementById.

Mathias

[molily]

Hallo,

In den Image-Tag, habe ich id='NameDesBildes'.
Wenn Ich aber name='NameDesBildes' in dem Image-Tag extra dazu für den IE6 schreibe (Was auch bei beiden Browsern funktioniert), dann habe eine Fehlermeldung bei dem HTML bzw. XHTML-Validator: "http://validator.w3.org/" was eigentlich nicht passieren darf, da ich XHTML-Strict verweden soll oder muss.

Dann schreibe XHTML 1.0 Transitional.

Einige gängige Browser sind in in diesem Punkt nicht kompatibel mit XHTML 1.0 Strict (bzw. DOM 2 HTML). Wenn man abwärtskompatibel per JavaScript auf Formulare und Bilder zugreifen will, ist XHTML 1.0 Strict Unsinn und führt zu Scripten, die unnötig meist hohe Zugangshürden stezen. (Zugegeben, getElementById kann man voraussetzen, das können gängige Browser schließlich. Es besteht allerdings keine grundsätzliche technische Notwendigkeit, bei solchen Operationen die 4er-Browser zu diskriminieren. Die kommt erst auf, wenn man mit den Formularen bzw. Bildern elaborierte DOM-Operationen unternehmen will.)

Mathias

[Messmar]

hallo,

Damit iwr alle wasdavon haben.
Die Lösung ist nämlich einfach :
ansttat:

function changeImages()
{
if (document.images)
{
for (var i=0; i<changeImages.arguments.length; i+=2)
{
document[changeImages.arguments[i]].src = changeImages.arguments[i+1] .src;
}}}

sollte man fie Funktion folgendes schreiben:

function changeImages() {
if (document.images)
{
for (var i=0; i<changeImages.arguments.length; i+=2) {
    document.getElementById(changeImages.arguments[i]).src =
     changeImages.arguments[i+1].src;
}}}

Gruß
Messmar

[Struppi]

Damit iwr alle wasdavon haben.
Die Lösung ist nämlich einfach :

Wurde dir u.a. auch von mir schon gesagt, sie ist aber nicht Beste Lösung.
https://forum.selfhtml.org/?t=111303&m=700354

ansttat:
document[changeImages.arguments[i]].src = changeImages.arguments[i+1] .src;

sollte man fie Funktion folgendes schreiben:

document.getElementById(changeImages.arguments[i]).src =
     changeImages.arguments[i+1].src;

sollte man nicht, muss man, wenn man das name Attribut nicht verwenden mag, weil du einen DOCTYPE verwenden musst, der dieses nciht zuläßt. ansonsten ist das name Attribut das bessere Objekt deiner Wahl.

Struppi.