kostenloser Webspace werbefrei: lima-city


SW-Bild bei hover farbig

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    freakystyle

    freakystyle hat kostenlosen Webspace.

    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
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

  3. e********l

    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.
  4. 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
  5. e********l

    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
  6. Jedes "Bild" einzelnd in einem <DIV> absolut positionieren... schon kannst Du den Effekt perfekt nutzen!
  7. e********l

    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.
  8. 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
  9. e********l

    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.
  10. 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
  11. e********l

    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...
  12. 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
  13. Ü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
  14. e********l

    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.
  15. 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
  16. e********l

    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 ^^
  17. Autor dieses Themas

    freakystyle

    freakystyle hat kostenlosen Webspace.

    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^^
  18. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!