kostenloser Webspace werbefrei: lima-city

Markierte Divs einfärben

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   m******1

   10:57, 26.1.2010

   Hallo,
   
   ich hab eine tag/tabelle">Tabelle im folgenden Format vorliegen:
   

   <table>
      <tr>
         <td><div></div></td>
      </tr>
      <tr>
         <td><div></div></td>
      </tr>
      <tr>
         <td><div></div></td>
      </tr>
   </table>

   
   
   Nun möchte ich erkennen, welche markiert sind und bei diesen markierter.style.backgroundcolor="red" machen.
   Meine erste Ansatzidee war, dass es vielleicht wie bei Links eine CSS-Eigenschaft gibt. Gibt es aber scheinbar nicht.
   Also will ich nun mit JavaScript erkennen, bei welchem Feld die Taste gedrückt und bei welchem sie losgelassen wird.
   Dann will ich alle Felder dazwischen durchgehen und style.backgroundcolor ändern.
   
   Ich hab aber keine richtige Idee wie und hoffe nun auf eure Hilfe
   
   Danke im Voraus
   mfg Mokuba01

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. barney

   

   barney hat kostenlosen Webspace.

   12:02, 26.1.2010

   Schau dir am besten mal die Event-Hanndler an:
   http://de.selfhtml.org/javascript/sprache/eventhandler.htm
   
   In CSS gibt es auch Dinge wie z.B. 'div:hover'. Wird aber leider nicht von allen Browsern unterstützt.

4. h**********d

   21:58, 26.1.2010

   ich würde einfach bei einem OnClick-Event per javascript die entschprechenden werte ändern.
   
   

   <div class="unmarkiert" onClick="this.class='markiert'">

   
   
   probier mal. müsste eig gehen

5. haniwo

   haniwo hat kostenlosen Webspace.

   1:05, 27.1.2010

   Versuch es mal mit der jQuery Bibliothek, damit ist so gut wie alles möglich - und das mit sehr wenig Code!
   
   

   http://jquery.com/

6. hasenmeister

   

   hasenmeister hat kostenlosen Webspace.

   7:05, 27.1.2010

   Lösungsansatz via css:
   
   CSS
   

   ...
   /*...style für dein ungehoverten div(größe...etc)*/
   div.foo {}
   
   /*...style für dein gehoverten div...*/
   div.foo:hover {
       background-color: #f00;
   }
   ...

   
   
   HTML
   

   ...
   <td>
       <div class="foo">...</div>
   </td>
   ...

   
   funktioniert in allen browsern ausser IE bis version 6 und opera bis version 5.
   Wichtig ist auf jeden fall deinen tags Klassen zu vergeben da sonst jedes div-tag interpretiert wird.
   __________________________________________________________________________________________________________________________________________________
   
   Lösungsansatz via jQuery:
   
   JS
   

   $('.foo').hover(function () {
         $(this).css({ backgroundColor:"red"});
       });

   
   
   HTML
   

   ...
   <td>
       <div class="foo">...</div>
   </td>
   ...

   
   
   auch hier ist eine vernünftige bennennungskonvention wichtig...
   
   __________________________________________________________________________________________________________________________________________________
   
   es gibt auch noch eine menge andere möglichkeiten dieses problem zu lösen, aber ich schließ mich mal dem vorposter an, die jQuery methode ist sehr einfach nachzuvollziehen, und funktioniert auch überall wo js im browser aktiviert(!) ist

7. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?