✔ horizontaler und vertikaler mouseover effekt für tabellenzeilen?

Status
Nicht offen für weitere Antworten.
Hi,

du müsstest die Funktionen zum Markieren/Demarkieren der Tabellenzellen so anpassen, dass
die Zellen im Hauptdokument bzw. iFramedokument ebenfalls eingefärbt werden.

Im Anhang ist ein Dokument, welches das bereits umsetzt. Zu beachten ist hierbei, dass die Tabellen
sowohl im Haupt- als auch im iFramedokument die ID t1 besitzen müssen. Weiteres sollte
aus dem kommentierten Quellcode ersichtlich sein.

Ciao
Quaese
 

Anhänge

  • tabelle.zip
    4,8 KB · Aufrufe: 77
MouseOver MouseOut Effekt für Tabellenzellen

Hi@all

bin nach langen suchem im Netz endlich auf diesen Artikel gestossen und absolut begeistert.
Allerdings habe ich noch ein Problem zu diesem Script.
Ich möchte mit dem MouseOver bzw. MouseOut Effekt den Zellenhintergrund einer anderen Tabelle ändern

PHP: 
 document.getElementById(x).style.background="url('images/mosaik_grau.png')";

bisher habe ich das also so gemacht, jede Zelle der anderen Tabelle hat eine ID von 001 bis 00X
Dazu musste ich allerdings in der zweiten Tabelle in jede Zelle den Funktionsaufruf schreiben.

Mit dem Script oben wird ja der Funktionsaufruf quasi dynamisch erzeugt, was ich sehr gut finde, da meine Endtabelle mal etwa 100 Zellen soll.

So habe ich jetzt im Script die ZelleID definiert.
PHP: 
function init()
{
 var zelleID=0;
 // Zeilen-Kollektion holen
 objRows = document.getElementById("table").rows;
 // Alle Zeilen durchlaufen
 for(var i=0; i<objRows.length; i++)
 {
  // Zellen der aktuellen Zeile durchlaufen
  for(var j=0; j<objRows[i].cells.length; j++)
  {
   zelleID++;
   if (zelleID<10) zelleID="00" + zelleID;
   else zelleID="0" + zelleID;
   
   objRows[i].cells[j].rowNr  = i;  // Zellen-Objekt um Zeilenindex-Attribut erweitern
   objRows[i].cells[j].cellNr = j;  // Zellen-Objekt um Spaltenindex-Attribut erweitern

   //alert(zelleID);
   objRows[i].cells[j].onmouseover = new Function("fx", "markTable(this, 1)");
   objRows[i].cells[j].onmouseout  = new Function("fx", "markTable(this, 0)");
  }
 }
}
window.onload=init;

Wie kann ich jetzt damit meine Funktion aufrufen,
Wenn ich anstelle von 'this' z.bsp. 'zelleID' übergeben will bekomme ich den Fehler zelleID ist undefined, oder wie kann ich an dieser Stelle direkt meine Funktion aufrufen.

Wär schön wenn mir jemand helfen kann.

Thx@all
 
Hi,

versuch es mal so:
Code: 
objRows[i].cells[j].onmouseover = new Function("fx", "document.getElementById('"+zelleID+"').style.background=\"url('images/mosaik_grau.png')\";");
objRows[i].cells[j].onmouseout  = new Function("fx", "document.getElementById('"+zelleID+"').style.background=\"\";");

Ciao
Quaese
 
@Quaese

Danke, ich glaube das wars, scheint erst mal zu funktionieren, muss ich aber noch genauer durchtesten.
Besten Dank

Bitte kannst du mir noch die Sacher erklären:
Was macht "fx" ?

Noch ne Frage,
wenn ich das Script am laufen habe wird ein anderes (ticker - wird mit <body onload=lauftext()> aufgerufen) nicht mehr ausgeführt.
 
Zuletzt bearbeitet:
Hi,

weiterführende Informationen zum Function-Objekt findest du bei SelfHTML.

Um sowohl das Script als auch den Ticker im onload-Event zu starten, kannst du sie innerhalb einer anonymen Funktion aufrufen.

Ersetze hierfür
Code: 
window.onload=init;
durch
Code: 
window.onload = function(){
  init();
  lauftext()
}

Das onload-Attribut im body-Tag wird im Gegenzug entfernt.

Ciao
Quaese
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück