[CSS] Rollover mit normalen Grafiken

[bodo2005]

Hat jemand eine Idee, wie man mit beliebigen Grafiken einen Rollover erzeugen kann mit CSS?
Es soll nicht mit der Hintergrund Methode gearbeitet werden, da die Grafiken wechseln und ich nicht Regeln für 1000 Bilder festlegen kann

Bin über jede Idee dankbar.

 

[mh1001]

Hallo,

wenn du das ganze mit reinem CSS realisieren möchtest und nebenbei auch noch alle gängigen Browser unterstützen möchtest bleibt dir nichts anderes als ein Weg über ein Hintergrundsbild und das sogennanten "Sliding-Door"-Prinzip.
Nachteilhaft daran ist jedoch, dass dazu entweder die Breite oder die Höhe des Bildes schon von vorneherein feststehen muss.

[...] Es soll nicht mit der Hintergrund Methode gearbeitet werden, da die Grafiken wechseln und ich nicht Regeln für 1000 Bilder festlegen kann [...]

Wie meinst du dies? Im Grunde sollte sich obige Lösung auch nahezu so kompakt wie eine vergleichbare JavaScript-Variante schreiben lassen.

MfG mh1001

 

[bodo2005]

Na wenn ich jedes mal einen Hintergrund festlege, ist dieser für jede Grafik anders, wenn ich 1000 Grafiken habe, muss ich tausend mal eine andere Definition in der css datei anlegen.

 

[tauven]

du kannst deine css datei auch mit php erstellen, so das du die daten für die bilder aus einer datei oder datenbank ausliest dann musst du die css datei auch nur einmal schreiben, und änderst die betreffenden stellen halt mit php. bzw setzt an diese stellen Variablen ein.

 

[bodo2005]

Problem: Wenn dies bsw. 5 user machen, würden 4 Bilder ausgelesen werden bsw. vom einen user und 4 andere vom anderen User, die CSS datei würde ziemlich oft überschrieben werden und/oder dies würde zu Auslesefehlern beim user führen, da ejder etwas anderes rein schreibt.
Bsw. beim Öffnen und Schreiben, da in der Zwischenzeit schon etwas hinzugekommen oder gelöscht wurden sein kann.

EDIT:

So würde ich es gerne haben, da dies scheint ja Syntaktisch inkorrekt zu sein, also kann ich keine "Anweisungen"/Definitionen schachteln?

#div_photo img
          {
           border: 1px;
           border-style: solid;
           border-color: #999999;
           border-left-color: #CCCCCC;
           border-top-color: #CCCCCC;
           padding: 4px;
          }
          
          #div_photo #hover
          {
           display: none;
          }
          
          #div_photo img:hover
          {
           display: none;
          #div_photo #hover
          {
           border: 1px;
           border-style: solid;
           border-color: #999999;
           border-left-color: #CCCCCC;
           border-top-color: #CCCCCC;
           padding: 4px;
          }
          }

 

[mh1001]

Problem: Wenn dies bsw. 5 user machen, würden 4 Bilder ausgelesen werden bsw. vom einen user und 4 andere vom anderen User, die CSS datei würde ziemlich oft überschrieben werden und/oder dies würde zu Auslesefehlern beim user führen, da ejder etwas anderes rein schreibt.
Bsw. beim Öffnen und Schreiben, da in der Zwischenzeit schon etwas hinzugekommen oder gelöscht wurden sein kann. [..]

Du brauchst ja nicht jedes mal ein neues CSS-File generieren und dieses auf dem Server abspeichern.
Viel mehr könntest du, wie tauven es sicher auch gemeint hat, dein Stylesheet dynamisch mit PHP oder einer anderen serverseitigen Sprache gestalten und dies dann bei jedem Aufruf parsen lassen.

Mit deinem folgenden CSS-Code kann ich allerdings recht wenig anfangen. Was genau willst du mit diesem auf welche Weise erreichen?

MfG mh1001

 

[bodo2005]

Es soll erreicht werden, dass wenn man über dem Bild ist (:hover), dann das zweite Bild angezeigt wird und das Original mit display: none; ausgeblendet wird...

 

[mh1001]

Achso, nun verstehe ich wie das gemeint war.
Kurz gesagt: Dies ist auf diese Weise mit CSS so nicht möglich. In dem Fall musst du auf Dinge wie JavaScript zurückgreifen.

Allerdings kannst du beispielsweise auch ein normales Bild ausgeben und darüber einen Container mit einem Hintergrundsbild ausgeben, welches du dann per ":hover" ausblendest.
Aber auch hier schaut es mit der Browserunterstützung nicht gerade gut aus.

MfG mh1001