frage zu onMouseOver

[Dani87]

hi liebe community habe ein kleines onmouseover problem und zwar ist das mein code:

[code=html]
<td width="14" height="17"  onmouseover="this.style.backgroundImage='url(/grafiken/vote.gif)';"
       onmouseout="document.getElemtById("test").style.backgroundImage='url()';
          this.style.backgroundImage='url(/grafiken/vote.gif)';"
       id="test"
       name="test"><a href=""><img src="/grafiken/spacer.gif" width="14" height="17" border="0"></a></td>

<td width="14" height="17"  onmouseover="this.style.backgroundImage='url(/grafiken/vote.gif)';"
       onmouseout="document.getElemtById("test").style.backgroundImage='url()';
          this.style.backgroundImage='url(/grafiken/vote.gif)';"
       id="test"
       name="test"><a href=""><img src="/grafiken/spacer.gif" width="14" height="17" border="0"></a></td>
[/code]

ja das sind nun zwei boxen eigentlich liegen 10 nebeneinander...
Wenn man mit dem cursor über eine box fährt erscheint ein hintergrundbild. es ist eig. so gedacht das wenn man über die zweite oder so wie es sein soll dritte, vierte, fünfte box fährt sich der hintergrund anpasst also erscheint und bei allen anderen td's wieder verschwindet weil ja alle die id und den name test besitzen und ich bei dem onmouseout befehl ja sage das sic bei dieser id der style ändern soll!

Allerdings passiert folgendes, wenn ich mit der maus über die td tags fahre bleibt der style erhalten, habt ihr da ne info für mich?

mfg dani

[Ashura]

Hallo Dani87.

<td width="14" height="17"  onmouseover="this.style.backgroundImage='url(/grafiken/vote.gif)';"
       onmouseout="document.getElemtById("test").style.backgroundImage='url()';
          this.style.backgroundImage='url(/grafiken/vote.gif)';"
       id="test"
       name="test"><a href=""><img src="/grafiken/spacer.gif" width="14" height="17" border="0"></a></td>

<td width="14" height="17"  onmouseover="this.style.backgroundImage='url(/grafiken/vote.gif)';"
       onmouseout="document.getElemtById("test").style.backgroundImage='url()';
          this.style.backgroundImage='url(/grafiken/vote.gif)';"
       id="test"
       name="test"><a href=""><img src="/grafiken/spacer.gif" width="14" height="17" border="0"></a></td>

  
Wie oft gibt es dich auf dieser Welt? Genau, nur ein einziges Mal. Für IDs gilt dasselbe, auch sie gibt es jeweils nur ein einziges Mal. Du kannst also nicht die ID „test“ zweimal vergeben.  
  
Des weiteren gibt es beim document-Objekt normalerweise keine „getElemtById“-Methode. Meintest du <http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id@title=getElementById>?  
  
Und wozu brauchst du noch „spacer.gif“? Schon seit dem letzten Jahrtausend gibt es die <http://de.selfhtml.org/css/eigenschaften/innenabstand.htm@title=padding>-Eigenschaft in CSS.  
  
  
Einen schönen Mittwoch noch.  
  
Gruß, Ashura  

-- 
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|  
„It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“  
[[HTML Design Constraints: Logical Markup](http://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/HTMLConstraints.html)]

[Dani87]

hehe das scheint wohl alles zu stimmen, ok ich habs anders gemacht nach all den tipps, es sieht nun so aus:

[code=javascript]
function clear()
{
 var = i;

for(i=1; i<=10; i++)
 {
  document.getElementById(i).style.backgroundImage='url(http://www.talklevel.de/grafiken/spacer.gif)';
 }
}
[/code]

[code=html]
<td width="14" height="17"  onmouseover=" clear();
           this.style.backgroundImage='url(/grafiken/vote.gif)';"

id="1"
       name="1"><a href="/partybilder_vote.php?points=9&pic=16791"><img src="/grafiken/spacer.gif" width="14" height="17" border="0"></a></td>

<td width="14" height="17"  onmouseover=" clear();
           this.style.backgroundImage='url(/grafiken/vote.gif)';"

id="2"
       name="2"><a href="/partybilder_vote.php?points=9&pic=16791"><img src="/grafiken/spacer.gif" width="14" height="17" border="0"></a></td>
[code]

aber das script will nicht richtig funtzen, die clear funktion muss noch nen fehler haben aber ich finde ihn einfach nicht. hast du ne ahnung?

mfg dani

[Jörg Peschke]

Hallo,

function clear()
{
var = i;

for(i=1; i<=10; i++)
{
  document.getElementById(i).style.backgroundImage='url(http://www.talklevel.de/grafiken/spacer.gif)';
}
}

var = i;

gibts nicht.

Was Du meinst ist wahrscheinlich

var i;

[Dani87]

hast recht, ist quatsch, hab ich nach dem posten aber schon selber gesehen... daran liegt es leider auch nicht.

mfg dani

[Gunnar Bittersmann]

Hello out there!

id="1"

^
Fehler: Ungültiger Wert für IDs. [HTML401 §6.2]

<a href="/partybilder_vote.php?points=9&pic=16791">

^
Fehler: Es gibt keine Entität pic. [HTML401 §B.2.2]

aber das script will nicht richtig funtzen, die clear funktion muss noch nen fehler haben aber ich finde ihn einfach nicht. hast du ne ahnung?

Wie gesagt, der Fehler liegt im HTML.

See ya up the road,
Gunnar

[Dani87]

auch wenn ich davor ein 'test' hänge geht es leider nicht :-/

mfg dani

[Gunnar Bittersmann]

Hello out there!

auch wenn ich davor ein 'test' hänge geht es leider nicht :-/

Wie und wo hast du es davorgehängt?

See ya up the road,
Gunnar

[Dani87]

[code=javascript]
function clear()
{
 var i;

for(i=1; i<=10; i++)
 {
  document.getElementById('test'+i).style.backgroundImage='url()';
 }
}
[/code]

[code=html]
<td width="14" height="17"  onmouseover=" clear();
           this.style.backgroundImage='url(/grafiken/vote.gif)';"

id="test1"
       name="test1"><a href="/partybilder_vote.php?points=9&pic=16791"><img src="/grafiken/spacer.gif" width="14" height="17" border="0" alt="Rating: 9" title="Rating: 9"></a></td>

<td width="14" height="17"  onmouseover=" clear();
           this.style.backgroundImage='url(/grafiken/vote.gif)';"

id="test2"
       name="test2"><a href="/partybilder_vote.php?points=9&pic=16791"><img src="/spacer.gif" width="14" height="17" border="0" alt="Rating: 9" title="Rating: 9"></a></td>

[/code]

mfg dani

[Gunnar Bittersmann]

Hello out there!

var i;
for(i=1; i<=10; i++)

BTW, dafür kannste auch schreiben:
for (var i = 1; i <= 10; i++)

document.getElementById('test'+i).style.backgroundImage='url()';

^^^^^
Kein gültiger Wert für 'background-image'. [CSS2 §14.2.1, CSS2 §4.3.4]

<a href="/partybilder_vote.php?points=9&pic=16791">

Und den Fehler hast du auch noch nicht behoben.

See ya up the road,
Gunnar

[Dani87]

aber auch mit:

[code=javascript]
  document.getElementById('test'+i).style.backgroundImage='url(/grafiken/spacer.gif)';
[/code]

geht es nicht! :-/

mfg dani

[Gunnar Bittersmann]

Hello out there!

document.getElementById('test'+i).style.backgroundImage='url(/grafiken/spacer.gif)';

Stimmt der Pfad? (http://de.selfhtml.org/html/allgemein/referenzieren.htm)
See ya up the road,
Gunnar

[Dani87]

japo!!

hmm dann scheint es wohl nicht zu gehen, schade...

lg dani

[Gunnar Bittersmann]

Hello out there!

hmm dann scheint es wohl nicht zu gehen,

Natürlich geht es, wenn du’s richtig machst.

schade...

dass du es falsch machst.

Meine Vermutung mit der falschen Pfadangabe bleibt bestehen, solange du nicht deine Verzeichnisstruktur offenbarst. Du hast im verlinkten Abschnitt in SELFHTML über den Unterschied zwischen absoluten und relativen Pfadangaben nachgelesen?

See ya up the road,
Gunnar

[Dani87]

ich habe es hin bekommen:

[code=javascript]
function cleart(showID)
{
 for(var i=1; i<=3; i++)
 {
  var newid = 'test'+i;

if(showID == newid)
  {
   document.getElementById(newid).style.backgroundImage='url(/grafiken/vote.gif)';
  }
  else
  {
   document.getElementById(newid).style.backgroundImage='url(/grafiken/spacer.gif)';
  }

}
}
[/code]

[code=html]
<td width="14" height="17"  onmouseover="cleart('test1');" id="test1" name="test1" style="background-image:url(/grafiken/vote.gif');"><a href="/partybilder_vote.php?points=9&pic=16791"><img src="/grafiken/spacer.gif" width="14" height="17" border="0" alt="Rating: 9" title="Rating: 9"></a></td>
<td width="14" height="17"  onmouseover="cleart('test2');" id="test2" name="test2"><a href="/partybilder_vote.php?points=9&pic=16791"><img src="/grafiken/spacer.gif" width="14" height="17" border="0" alt="Rating: 9" title="Rating: 9"></a></td>
<td width="14" height="17"  onmouseover="cleart('test3');" id="test3" name="test3"><a href="/partybilder_vote.php?points=9&pic=16791"><img src="/grafiken/spacer.gif" width="14" height="17" border="0" alt="Rating: 9" title="Rating: 9"></a></td>

[/code]

mfg dani

[Gunnar Bittersmann]

Hello out there!

ich habe es hin bekommen:
for(var i=1; i<=3; i++)

^
Lag’s an der Abbruchbedingung? Hatteste da nicht vorher '10' zu stehen, wolltest also auf nicht existierende Objekte zugreifen?

Ich würd’s dennoch anders machen:

function set(a) {  
  a.style.backgroundImage='url(/grafiken/vote.gif)';  
}  
  
function unset(a) {  
  a.style.backgroundImage='url(/grafiken/spacer.gif)';  
}

Durch die getrennten Funktionen musst du zum Zurücksetzen nicht alle Elemente durchgehen, sondern setzt nur das jeweilige zurück – beim Ereignis 'onmouseout'.

Du rufst diese Funktionen für das jeweilige Objekt 'this' auf, dann musst du nicht immer alle Elemente aus dem Elementbaum raussuchen:

<td width="14" height="17" onmouseover="set(this)" onmouseout="unset(this)" style="background-image:url(/grafiken/vote.gif');">

Wenn du das 'vote.gif' schon im Hintergrund hast, warum willst du es nochmal in den Vordergrund tun?

<a href="/partybilder_vote.php?points=9&pic=16791">

^
Und das ist immer noch falsch!! Wird langsam mal Zeit, das zu berichtigen.

See ya up the road,
Gunnar