Mousover bei Grafiken. Wie?

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Mousover bei Grafiken. Wie?

    Hallo Leute,

    ich suche einen funktionierenden Quelltext, wie ich ein Image Mousover erstellen kann. Aber ich suche nix mit "Img.Swap" ich will das alles über eine Grafik laufen lassen, also dass die so dunkel ist und beim mouseover hell wird.

    Am besten wär was fürs CSS

    mfg
    RAUFASER
  • Wenn du mit css arbeiten willst wirst du es nicht schaffen, dass das GLEICHE BILD von dunkel auf hell verändert wird.
    per css musst du eine zweite grafik mit dem gewünschten helligkeitsfaktor erstellen und diese dann bei mouseover anzeigen lassen.

    also erst entscheiden, dann kann ich dir eine source geben. ;)
  • aber mit javascript ist das doch auch mit css... sonst bekommste die klassen doch garnicht zum switchen...

    HTML-Quellcode

    1. <img class="bild1" onMouseOver="this.className='bild2'" onMouseOut="this.className='bild1'">


    das wäre das selbe nur mit css... und ansonsten müsste man mit nem z-index und nem layer darüber das ganze etwas tönen... also im prinzip das bild als hintergrund nehmen... und dann nen layer drüberlegen der transparent ist zu 50% oder so... und den dann halt sichtbar oder unsichtbar machen...

    wäre jedenfalls ne lösung

    lg
  • geht auch nur mit reinem css ganz sauber, denn dann braucht es gar keine klassen.

    HTML:

    HTML-Quellcode

    1. <a href="index.php" title="" id="meinlink"></a>


    CSS:

    HTML-Quellcode

    1. a#meinlink {
    2. display:block;
    3. margin:0;
    4. padding:0;
    5. width:100px;
    6. height:100px;
    7. border:1px solid #443E3E;
    8. // MUSS GESETZT WERDEN:
    9. background-image:url(pfad);
    10. }
    11. a#meinlink:hover {
    12. // ALLES GLEICH: (kann man beliebig abändern)
    13. display:block;
    14. margin:0;
    15. padding:0;
    16. width:100px;
    17. height:100px;
    18. border:1px solid #443E3E;
    19. // ÄNDERUNG:
    20. background-image:url(pfad2);
    21. }
    Alles anzeigen


    so betrifft es nur diesen EINEN link.
    macht man oben die ID-zuweisung im link-tag weg und ebenso vor den css-definitionen, gelten die css-defintionen für alle links auf der seite.
  • Mit reinen HTML wird das mit einem Bild nciht gehen. Dafür hat der Browser zu wenig Möglichkeiten. Vor allem möchtest Du dies ja vermutlich so realisieren, dass dies auch bei allen Browsern geht?
  • ich habe noch eine weitere lösung als vorschlag. bin mir an einer stelle aber nciht so sicher.
    und zwar solltest du es so machen wenn du den selben effekt bei mehreren (gleichgroßen) bildern haben möchtest, zB in einer navigations-/menüleiste.

    erstelle ein bild, welches halb transparent ist und halb weiss. (also nicht rechte/linke hälfte, sondern eben halb durchsichtig). meiner meinung geht das bei gif nicht, also png bild erstellen, die wiederum nicht vom inetexplorer erkannt werden, ODER?

    naja und dann nimmst du eben dieses bild als hover bild bzw mouseover.
    hat den vorteil, dass du weniger bilder brauchst. aber wie gesagt, bei den bildformaten und eigentschaften bin ich mir gerade nciht so sicher...
    There are 10 kind of people: Those who understand binary code, and those who don't.