Mit CSS "transparenten Schein" auf Tabellen-Zelle

    Hallo,

    habe eine Grafik (gesliced) für eine Webseite, welche in einer Tabelle dargestellt wird. Allerdings habe ich keine zweiten Bilder für das Navi als Mouseover, und würde hier gerne was mit CSS machen.

    Ich habe mir vorgestellt, dass wenn einer mit der Maus über einen Navi-Button (Grafik in einer Tabellen-Zelle) fährt, hier eine Art "transparenter Schein" drübergeworfen wird, aber nur auf die aktuelle Zelle.

    Ist das irgendwie machbar.

    Hier ein Auszug des Codes (vom Navi):

    Danke und gruß
    Chris

    Ja das ist machbar das verwende ich au auf meiner seite

    es ist ab css 3 verfügbar

    es ist aber nicht valide um ein valides css zu haben solltest du diese eigenschaft mit dem style attribut einbinden !

    für Mozilla usw.

    style="opacity:0.5;" <-- 1 keine Transparenz 0.0 totale transparenz

    für Internet Explorer :

    style="filter:alpha(opacity=50);" <-- 100 keine Transparenz 0 totale transparenz

    der rest mit JavaScript und onmouseover sollte klar sein, wenn nicht Fragen !

    ach ja man kann mit Hilfe von JS die Transparenz auch ein und ausblenden lassen, nur so als Tip !

    MFG
    WebCool

    webcool
    Erstmal vielen Dank für die Antwort.
    Habe leider damit noch nie was gemacht, wenn du mir nen Beispiel schicken könntest wie/wo ich was einbauen muss in das html-Gerüst, wäre ich dir sehr dankbar.

    Gruß
    Chris

    Die Frage ist möchtest du das diese Image beim onmouseout transparent ist und nur ein bisschen sichtbar ist und beim überfahren mit der Maus dann keine Transparenz mehr hat oder möchtest du die ausgrauen solange man sie nicht makiert oder mit der Maus berührt ?

    :)
    Also ich möchte, das der User sieht/erkennt, wenn er mit der Maus über einem Link ist und zwar solange, bis er diesen Button (das Bild) anklickt.
    Wie auch quasi bei einem Mouseover mit einem 2. Bild! Es würde auch langen, wenn ein Rahmen ausenrum gezogen wird, wenn man über das Link-Bild mit der Maus fährt.

    Aber sowas wäre auch cool, das es nur ein bischen transparent ist beim onmouseout und beim drüber fahren dann keine Transparenz mehr hat, das wäre genial, ja :)

    ich würde es lieber ausgrauen aber nagut ist ja deine sache :D

    Code
    !! LÖSUNG WEITER UNTEN !!

    Das müsste funktionieren hab es noch nicht getestet !

    Wenn du XHTML benutzt muss du statt <!-- das //<![CDATA[ und statt
    //--> das //]]>
    eintragen damit es valide bleibt und es ist darauf zu achten das du nicht die gleichen id`s hast das ist 1. nicht valide und 2. weiss das script dann nicht welche Image er bearbeiten soll !

    Hm, bekomme es irgendwie nicht hin, dann zeigt er mir garkein Bild mehr an.
    Vielleicht werde ich doch nen 2. Button/Bild erstellen und nen normalen Rollover-Effekt machen.

    Trotzdem Danke für deine Bemühungen.

    Bist aber hartnäckig, aber find ich ok :)
    Also hier mal der Code:


    Die Bilder ..05 bis ...14 sind die Links-Button in der Navi-Leiste.

    hi ich habe eine andere Lösung gefunden eine JavaScript unabhängige die besser ist ! den nicht jeder hat ja JavaScript aktiviert !

    wir machen das mal lieber mit css hätte ich au gleich drauf kommen können :roll:

    das kommt in den head bereich

    und die bilder müssen dann so ausgezeichnet werden ! :

    Code
    <tr>
      <td>
         [url='die adresse'][img]images/v1_forum_05.gif[/img][/url]</td>
   </tr>

    und so hast du ein menü wo die bilder transparent sind und wenn man mit der maus drüber geht sind sie es nicht mehr
    :D

    das geht nur wenn der img-Tag in einen a-Tag umschlossen ist !

    hier ist ein beilspiel :
    http://webcool.ordana.net/s.htm

    webcool
    Hey super, vielen Dank dir, funzt 1a und auch danke für die sehr schnelle Antwort (wie eigentlich immer hier im Forum)
    Echt spitze, bis zur nächsten "blöden" Frage :)

    Gruß
    Chris

    PS: Gibts ne Seite, wo man sowas über CSS lernen kann (außer css4you), wo solche Beispiele auch einsehbar sind und so?

    Zitat von webcool

    für Mozilla usw.

    style="opacity:0.5;" <-- 1 keine Transparenz 0.0 totale transparenz
    , du kannst also ein Wert zwischen 0.0 und 1 verwenden


    für Internet Explorer :

    style="filter:alpha(opacity=50);" <-- 100 keine Transparenz 0 totale transparenz, du kannst also ein Wert zwischen 0 und 100 verwenden

    :wink:

    Hallo,

    kann ich diese Funktion auch grad "andersrum" verwenden, also dass der "transparente Schein" erst auf den Linkbutton fällt, wenn ich mit der Maus drüber geh? Wie müsste dann der Code für CSS lauten?

    Vielen Dank.