onMouseOver(td.bg.img.change)

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • onMouseOver(td.bg.img.change)

    Hello again!

    Ich denke die einfachen onMouseOver Snippets wurden hier schon mehr als oft genug behandelt (lt. Suchfunktion zumindest) und so hab ich mal ne ähnliche Frage, die allerdings eine weit komplexere Lösung erfordert:

    Wie müsste ein Script aussehen, wenn ich in einer Tabelle onMouseOver ein Hintergrundbild (-> CSS) eines TD ändern will?

    Ansatz:
    PHP-Code:
    <table cellspacing="0" cellpadding="0" style="width: 250px; height: 25px; border: 0px;">
     <
    tr onMouseOver="testtd.class='class2'" onMouseOut="testtd.class='class1'">
      <
    td name="testtd" class="class1">lalala</td>
     </
    tr>
    </
    table
    Weiter bin ich noch nicht! Wie ich das mit nem Normalen Bild machen würde ist ganz einfach, aber da ja das Hintergrundild per CSS festgelegt werden soll ist das irgendwie auch nicht so einfach. Was meint ihr dazu?
    WHILE (!$asleep) { $sheep++; }

  • #2
    PHP-Code:
    document.getElementByID.style.backgroundImage 
    geht aber glaube ich nicht bei tr-elementen sondern nur bei td.

    gruß
    peter
    Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
    Meine Seite

    Kommentar


    • #3
      - gib deiner TD eine id
      - bastel dir eine Funktion auf, der die id übergeben wird
      - in der Funktion kannst mit getElementByID auf den style zugreifen
      - weise per style dem backgroundImage ein anders Bild zu
      ansonsten
      "I don't want to belong to any club that would accept me as a member."

      Groucho Marx

      Kommentar


      • #4
        Re: onMouseOver(td.bg.img.change)

        Danke Peter, Danke Murph!
        Also so klappt's auch nicht:

        Ansatz:
        PHP-Code:
        function change(tdbg) {
         
        document.getElementById('td').style.backgroundImage=bg;
        }
        --------------------------


        <
        table cellspacing="0" cellpadding="0" style="width: 250px; height: 25px; border: 0px;">
         <
        tr>
          <
        td onMouseOver="change('testtd', 'bild2.jpg')" onMouseOut="change('testtd', 'bild1.jpg')" id="testtd" style="background-image: url(bild1.jpg);">lalala</td>
         </
        tr>
        </
        table
        Any more ideas?

        Edit: Quotes gesetzt! Nützt auch nichts!
        Zuletzt geändert von nichtsooft; 25.10.2006, 15:17.
        WHILE (!$asleep) { $sheep++; }

        Kommentar


        • #5
          grundlagen!
          PHP-Code:
          onMouseOver="change('testtd', 'bild2.jpg')"
          ...
          document.getElementById(td).style.backgroundImage="url(" bg ")"
          btw: javascript-konsole vom firefox nutzen.

          gruß
          peter
          Zuletzt geändert von Kropff; 25.10.2006, 15:19.
          Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
          Meine Seite

          Kommentar


          • #6
            Alter Schwede! Liegt das nur an den Quotes? Muss ich gleich testen!

            Edit: *lol* 2 fast 4 your edit! *gg*
            WHILE (!$asleep) { $sheep++; }

            Kommentar


            • #7
              was sagt die javascript-konsole vom firefox?

              peter
              Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
              Meine Seite

              Kommentar


              • #8
                Fehlerfrei! Siehe: link

                1000 Dank Peter!
                WHILE (!$asleep) { $sheep++; }

                Kommentar


                • #9
                  ich hoffe da kommen später richtige bilder, sonst wäre ein style.backgroundColor angebracht.

                  noch ein tipp, die bilder werden vom ie nicht gecached und sobald die bilder eine bestimmte größe überschreiten, flackert es im ie ganz heftig.

                  gruß
                  peter
                  Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                  Meine Seite

                  Kommentar


                  • #10
                    Ja das wird in ein Navigationselement eingebaut und die Bilder bekommen so ca. 148x17px (1KB). Einstweilen klappt's auch mit IE!

                    Kann man da irgendwie ein preload einbauen?
                    WHILE (!$asleep) { $sheep++; }

                    Kommentar


                    • #11
                      Einstweilen klappt's auch mit IE!
                      6 oder 7!
                      Kann man da irgendwie ein preload einbauen?
                      ich habe es probiert und nichts hat funktioniert. ich glaube, der zieht sich bilder immer nur bei bedarf.

                      btw: bei mir im ie 6 flackert schon dein beispiel. teste das mal online!

                      gruß
                      peter
                      Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                      Meine Seite

                      Kommentar


                      • #12
                        *lol* also mein 6er IE flackert nicht!
                        Oder meinst du die kurzzeitige Anzeige des "Loading-cursors" (=Sanduhr) ?

                        Wie steht's nun mit preload?
                        WHILE (!$asleep) { $sheep++; }

                        Kommentar


                        • #13
                          noch ein tipp, die bilder werden vom ie nicht gecached und sobald die bilder eine bestimmte größe überschreiten, flackert es im ie ganz heftig.
                          Deshalb packe ich beide Bilder zusammen in EIN Bild, obere Hälfte Bild eins, untere Hälfte Bild zwei und ändere dann die backgroundPosition entsprechend ....
                          "I don't want to belong to any club that would accept me as a member."

                          Groucho Marx

                          Kommentar


                          • #14
                            Original geschrieben von mcmurphy
                            Deshalb packe ich beide Bilder zusammen in EIN Bild, obere Hälfte Bild eins, untere Hälfte Bild zwei und ändere dann die backgroundPosition entsprechend ....
                            das ist ja mal eine echt gute idee. warum bin ich nicht damals darauf gekommen?

                            gruß
                            peter
                            Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                            Meine Seite

                            Kommentar


                            • #15
                              ach ja, den Effekt des online Bsp. kriegts aber auch völlig OHNE Bild hin...
                              "I don't want to belong to any club that would accept me as a member."

                              Groucho Marx

                              Kommentar

                              Lädt...
                              X