onmouseover für mehrere Tabellenzellen

Einklappen
X
Einklappen
 
  • Seite von 2
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige 1 2 template Weiter
  • #1

    onmouseover für mehrere Tabellenzellen

    Hi@all

    Gibt es eine Möglichkeit für mehrere Tabellenzellen einer Tabelle einen mouseover zu deklarieren?

    Hintergrund:
    Ich habe eine Tabelle mit sagen wir mal 10x10 Zellen.
    Die Tabelle hat ein gemeinsames Hintergrundbild.
    Jede Zelle hat ein eigenes Hintergrundbild bzw. Hintergrundfarbe
    Wenn ich mit der Mouse über eine Zelle fahre soll der Zellenhintergrund dieser Zelle ausgeblendet werden und das dahinterliegende Teilbild des Tabellenhintergrundes sichtbar werden.
    Wie ein--> MOSAIK

    Ich möchte bei einer Tabelle, sagen wir mal 100x100 Zellen nicht die Deklaration in jede Zelle schreiben müssen.

    Eher so:
    function
    {
    wenn die mouse über irgendeine Zelle dieser Tabelle fährt soll der Hintergrund dieser Zelle ausgeblendet werden
    }
    und das als Deklaration in die Tabelle schreiben

    Ich hoffe es ist verständlich.

    Thx@all
    Stichworte: -
  • #2
    Kannst über eine schleife den Effekt, bzw. die Funktion dynamisch auf alle Zellen legen. Das solltest du generell so machen.

    Kommentar

    • #3
      Wenn's nur neuere Browser können müssten ...

      warum nicht so in der Art ...

      Code:
      <?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="de" lang="de" dir="ltr">
	<head>
		<title>Tablebg</title>
		<style type="text/css"><!--
			table {
				background: url('./background.jpg') no-repeat left top;
				width: 640px;
				height: 480px;
				border: solid 1px #ffffff;
				border-collapse: collapse;
			}
			
			td {
				border: solid 1px #ffffff;
				background: #dddddd;
			}
			
			td:hover {
				background: none;
			}
		//--></style>
	</head>
	<body>
		<table>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
		</table>
	</body>
</html>
      Hintergrund mußt Du Dir selbst aussuchen ...

      Das & nbsp; hat sicher wieder das Forum gefressen ...
      carpe noctem

      [color=blue]Bitte keine Fragen per EMail ... im Forum haben alle was davon ... und ich beantworte EMail-Fragen von Foren-Mitgliedern in der Regel eh nicht![/color]
      [color=red]Hinweis: Ich bin weder Mitglied noch Angestellter von ebiz-consult! Alles was ich hier von mir gebe tue ich in eigener Verantwortung![/color]

      Kommentar

      • #4
        Hi@all
        und danke schon mal für die Antworten.

        @TobiaZ
        Hab ich nicht verstanden

        @goth
        Jo, so hatte ich auch gedacht

        ABER!!!:
        Sorry, ich hatte vergessen zu erwähnen das die Tabelle in einem <div> liegt und darüber noch ein weiteres <div> ist
        Nun wirkt sich leider der MouseOverEffekt bzw. der Hover nicht mehr auf die Tabelle aus.

        Ich habe jetzt als letztes <div> die erste Tabelle ohne Inhalt (also ohne Background) noch mal als drüber gelegt.
        Wenn ich jetzt auf dieser Tabelle mit der Maus über eine Zelle fahre soll sich der Hintergrund der Zelle der unteren Tabelle ändern.

        Grundaufbau (z-index):
        <div 0>Hintergrundbild</div>
        <div 1>Tabelle mit grauen Zellen</div>
        <div 2>eigentliche HTML Inhalt (Text und so)</div>
        <div 3>leere Tabelle</div>

        Also ich fahre auf Tabelle im <div3> mit der Maus über eine Zelle und in der Tabelle <div1> soll der Hintergrund (grau) der Zelle verschwinden, so dass an dieser Stelle der Teil des Hintergrundbildes <div 1> sichtbar wird.

        Frage:
        Kann man vielleicht im <style> td:hover {eine funktion aufrufen}

        Thx@all
        Zuletzt geändert von Prominenter; 09.04.2009, 14:28.

        Kommentar

        • #5
          Hm... Hat der IE nicht Probleme mit dem dt:hover? *erinner*

          Meinst Du sowas in der Art? -> Guggsu hier

          Kommentar

          • #6
            Original geschrieben von medium22
            Hm... Hat der IE nicht Probleme mit dem dt:hover? *erinner*
            Mein IE nicht ... ich habe allerdings auch keinen 6er mehr ...
            carpe noctem

            [color=blue]Bitte keine Fragen per EMail ... im Forum haben alle was davon ... und ich beantworte EMail-Fragen von Foren-Mitgliedern in der Regel eh nicht![/color]
            [color=red]Hinweis: Ich bin weder Mitglied noch Angestellter von ebiz-consult! Alles was ich hier von mir gebe tue ich in eigener Verantwortung![/color]

            Kommentar

            • #7
              Oh! Da haste Recht, hab' das Ding eben mal auf 7 geupt *g* (Wollte ich eigentlich gar nicht.. hmhm.. )

              Aber ein tr:hover (was oft auch gefragt ist) frisst auch der 7ner nicht - leider.

              Kommentar

              • #8
                Kannste dann aber (fast) erreichen in dem du ein

                Code:
                tr:hover td {
	background: irgendwas;
}
                verwendest ...

                P.S.: der IE6 sollte eigentlich mittlerweile zwangsgeupdated werden.
                Zuletzt geändert von goth; 10.04.2009, 00:14.
                carpe noctem

                [color=blue]Bitte keine Fragen per EMail ... im Forum haben alle was davon ... und ich beantworte EMail-Fragen von Foren-Mitgliedern in der Regel eh nicht![/color]
                [color=red]Hinweis: Ich bin weder Mitglied noch Angestellter von ebiz-consult! Alles was ich hier von mir gebe tue ich in eigener Verantwortung![/color]

                Kommentar

                • #9
                  Hi@all
                  Thx@ medium22

                  Jo, so hatte ich es auch gelöst, allerding muss ich dazu eben in jeder Tabellenzelle den mouseover und mouseout deklarieren, das macht sich bei einer Tabelle 100x100 sehr aufwendig, ich dachte ich könnte das irgendwie mit nem script umgehen, aber so geht´s halt erst mal.

                  Thx@all

                  Kommentar

                  • #10
                    Original geschrieben von Prominenter
                    ich dachte ich könnte das irgendwie mit nem script umgehen
                    Ja, das war ja auch Tobiaz' Vorschlag in der allerersten Antwort ...
                    I don't believe in rebirth. Actually, I never did in my whole lives.

                    Kommentar

                    • #11
                      @TobiaZ
                      Hab ich nicht verstanden
                      Jo, gut - ein Ansatz wäre nicht schlecht.
                      OK, ich hab was gefunden, aber es funzt noch nicht so richtig:
                      PHP-Code:
                      /* Ausgangs- und Hoverfarben angeben */
                      var colStartFarbe = "#D5E7FF";     // Ausgangsfarbe der Zeilen und Spalten
                      var colHoverFarbe = "";            // Farbe, in der die Zeile und Spalte gefärbt werden soll

                      function markTable(objTD, intOver)
                      {
                                             // Zeilen-Kollektion
                                             var objRows = objTD.parentNode.parentNode.rows;
                                             // Ermittelte Zeile durchlaufen
                                             for(var i=0; i<objRows[objTD.rowNr].cells.length; i++)
                       {
                                              // MouseOver
                                              if(intOver == 1) objRows[objTD.rowNr].cells[objTD.cellNr].style.backgroundColor = colHoverFarbe;
                                              // MouseOut
                                              else objRows[objTD.rowNr].cells[objTD.cellNr].style.backgroundColor = colStartFarbe;
                       }
                      }

                      function                       init()
                      {
                       var                       cell=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++)
                        {
                                               cell++;
                         if (                      cell<10) cell="00" + cell;
                         else                       cell="0" + cell;
                                               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(cell);
                                               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; 
                      Das funktioniert soweit in Tabelle (02), aber ich kann es nicht auf meine andere Tabelle(01) anwenden.
                      Dort haben die Zellen fortlaufend die ID:001 - 00X.
                      Deshalb meine Variable cell, welche auch die entsprechenden ID ausgibt.
                      wie kann ich jetzt aber mit diesem Script die Änderung (MouseOver etc.) auf meine Tabelle (01) anwenden

                      Wenn ich zum Beispiel am Ende des Scripts:
                      PHP-Code:
                      objRows[i].cells[j].onmouseover = new Function("fx", "markTable(this, 1)"); 
                      statt this cell eingebe um die ID zu übergeben bekomme ich den Fehler cell ist undefiniert.
                      ich aknn auch an dieser stelle nicht mein eeigene Funktion
                      PHP-Code:
                       document.getElementById(x).style.background=""; 
                      aufrufen, da passiert gar nichts

                      Bin ratlos, erbitte Hilfe.

                      Th@all
                      Zuletzt geändert von Prominenter; 11.04.2009, 20:06.

                      Kommentar

                      • #12
                        Habe den Thread nicht komplett gelesen, aber was ins Auge fällt: IDs müssen mit einem Buchstaben beginnen.

                        Kommentar

                        • #13
                          @pekka
                          Nein, nicht wirklich, wenn ich meine Funktion
                          PHP-Code:
                          document.getElementById(x).style.background=""; 
                          aufrufe und als x z.Bsp. 001 übergebe funktioniert das ganze.

                          Thx@all

                          Kommentar

                          • #14
                            Original geschrieben von Prominenter
                            @pekka
                            Nein, nicht wirklich, wenn ich meine Funktion
                            PHP-Code:
                            document.getElementById(x).style.background=""; 
                            aufrufe und als x z.Bsp. 001 übergebe funktioniert das ganze.

                            Thx@all
                            Solltest du trotzdem nicht machen, damit ist Ärger vorprogrammiert. Ich würde ein "c" o.ä. davorhängen.

                            Zum ursprünglichen Problem:

                            Bau doch Spaßeshalber ein alert() in die Function ein und laß dir eine Eigenschaft von "this" ausgeben (etwa die ID). Es könnte sein, daß "this" in dem Kontext nicht funktioniert.

                            Kommentar

                            • #15
                              @pekka
                              alert(this) gibt [object] zurück, damit kann ich nichts anfangen, wieso kan ich an dieser Stelle nicht den Wert von 'cell' übergeben, oder gleich an dieser Stelle meine Funktion aufrufen?

                              Thx@all

                              Kommentar

                              Vorherige 1 2 template Weiter
                              Lädt...
                              X