SW-Bild bei hover farbig
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
absolut positionieren
anzahl
bild
browser
code
collage
design
effekt
einzeln austauschen
galerie
gedanke
http
legen
nutzen
perfekt nutzen
teilen
trick
url
wahl
weben
-
Hi!
Ich habe eine schwarz weiß-Fotocollage und hätte nun gerne den Effekt, dass man, wenn man über einen Bild der Collage hovert, dass dieses wieder farbig wird.
Ich hab mir schon überlegt, einfach die farbigen Bilder "über" das SW-Bild zu legen und unsichtbar zu machen und beim hovern eben wieder sichtbar zu machen. Jedoch kriege ich die Anordnung der Bilder nicht richtig hin.
Hier eine verkleinerte Version der Collage: http://photos-a.ak.fbcdn.net/hphotos-ak-snc1/hs244.snc1/9119_139952941243_79820146243_3102600_6297815_n.jpg
Kann mir vill jemand helfen?
lg -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Richtig SW bekommst du es nur, wenn du zwei Bilder erstellst. Einmal das farbige und einmal das SW. Die können auch in einem abgespeichert sein und dann mittels Hintergrundbild Position im CSS angezeigt werden. Soviel zur generellen Technik.
In deinem Collage Fall würde ich das SW Bild so belassen wie es ist und sofern es die Bildqualität zulässt transparente GIFs nutzen die in der selben Größe wie das SW Bild sind. Mit :hover wirst du es leider nicht lösen können. Du brauchst hier zwingend Javascript, mit dessen Hilfe du die einzelnen GIFs ein bzw. ausblendest. -
Guck mal hier...
http://www.sohtanaka.com/web-design/greyscale-hover-effect-w-css-jquery/
http://www.sohtanaka.com/web-design/examples/hover-over-trick/
Basiert auf dieser Technik...
http://james.padolsey.com/javascript/grayscaling-in-non-ie-browsers/
Ändert bei mouseover von Farbe nach S/W... sollte sich auch umkehren lassen.
Beitrag zuletzt geändert: 21.9.2009 14:32:21 von staymyfriend -
Bringt ihm an der Stelle nur herzlich wenig, wenn du dir sein Bild angeschaut hättest wüsstest du das aber auch. Er hat schließlich keine Galerie sondern eine Collage
-
Jedes "Bild" einzelnd in einem <DIV> absolut positionieren... schon kannst Du den Effekt perfekt nutzen!
-
staymyfriend schrieb:
Jedes "Bild" einzelnd in einem <DIV> absolut positionieren... schon kannst Du den Effekt perfekt nutzen!
Das ist zum einen extremst unsauber und zum anderen ein verhältnismäßig hoher Aufwand nur um einen JS Effektfilter nutzen zu können. Dann doch lieber mehrere Bilder erstellen und die über die Imagemap legen. -
Leute,
das geht doch viel einfacher über CSS
<style type="text/css"> .bild{ height: 200px; widht: 300px; background-position:0 0; } .bild:hover{ background-position:0 200px; } </style> <div class="bild" style="background-image: url(meinbild.jpg);"> </div>
Jetzt einfach beide Bilder in ein Bild untereinander tun. Dadurch muss das Bild auch beim drüberfahren nicht erst geladen werden, was unschöne Effekte gäbe.
Grüße,
Prog -
Schaut euch doch bitte mal sein Bild an. Das kann man nicht so mit den gängigen Mitteln ohne viel Aufwand realisieren! Selbst mit CSS Sprites ist es noch eine Menge Arbeit. Mal vom zusätzlichen Netzbalast zu schweigen.
-
wieso? Du kannst doch die divs mit den Bildern in einem "träger div" absolut positionieren.
z.B. so:
<div> <div class="bild1"> </div> <div class="bild2"> </div> <div class="bild3"> </div> ... </div>
Jetzt einfach nach meinem vorherigen Posten die Klassen anlegen:
<style type="text/css"> .bild1{ position:absolute; top:50; left: 20; height: 50px; widht: 60px; background-position:0 0; background-image: url(bild1.jpg); } .bild1:hover{ background-position:0 200px; } </style>
Beitrag zuletzt geändert: 21.9.2009 15:43:53 von prog -
Weil ich das nie mit absolut positionierten DIVs machen würde. Allein um die Anzahl an Requests gering zu halten. Allein bei dem besagten Bild entstünden durch einzelne Bilder mal so eben 11 Requests die zusätzlich abgearbeitet werden müssten. Wenn man nun bedenkt das ein Browser nur 2 Requests auf einmal bearbeiten kann und andere Bilder/Daten ebenfalls geladen werden sollen überlegt man sich wie man seine Website effizienter aufbaut...
-
Die Anzahl der Requests würde ansteigen, aber die Datenmenge würde nicht größer etvl. sogar geringer werden! Nicht umsonst werden auf vielen Webseiten große Grafiken in kleinere aufgeteilt...
Beitrag zuletzt geändert: 21.9.2009 18:20:26 von staymyfriend -
Über die Request würde ich mir nicht soviele Gedanken machen. Wenn man den aktuellen Thread und Lima zum ersten mal besucht, führt der Browser stolze 125 Requests in 7 sek aus.
Ich würde auch ehr große Bilder teilen. Zudem hast du garkeine andere Wahl, da du die Bilder ja einzeln austauschen(hovern) musst.
Grüße,
Prog -
prog schrieb:
Ich würde auch ehr große Bilder teilen. Zudem hast du garkeine andere Wahl, da du die Bilder ja einzeln austauschen(hovern) musst.
Muss ich das? In deinem Fall mit absolut positionierten Bildern würde ich auf CSS Sprites zurückgreifen. In meinem Fall hätte ich 12 Bilder für die Collage. Wobei ich letzteres technisch als wesentlich eleganter empfinde. -
Ja, du musst 12 Bilder haben. Du kannst ja nicht teile eines Bildes austauschen/verschieben.
Die Eleganteste Lösung sind sicher die CSS sprites, wie ich sie beschrieben hab.
Die funktionieren nämlich auch ohne JavaScript.
Grüße,
Prog -
Ja, das hab ich auch nie bestritten. Nur das mir der dafür notwendige Aufwand zu groß wäre.
Naja, lassen wir das und warten mal ab was der TE nun gemacht hat ^^ -
da ich erst anfänger bin -und nur die hälfte verstanden hab, was ihr hier so redet- frag ich nen freund ob er mir das machen kann^^
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
