Bilder ausgrauen

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Bilder ausgrauen

    Ich habe auf einigen Websiten Bilder gesehen, die wenn man die Maus nicht darauf hatte verschwommen bzw. dunkler waren.

    Wie mache ich das mit mouseover etc. und den richtigen CCS?
    (Habe keinen Schimmer von javascript...)

  • #2
    das läuft entweder mit javascipt mouseover() oder aber das sind echte java applets ...
    www.teamone.de/selfhtml
    h.a.n.d.
    Schmalle

    http://impressed.by
    http://blog.schmalenberger.it



    Wichtige Anmerkung: Ich habe keine Probleme mit Alkohol ...
    ... nur ohne :-)

    Kommentar


    • #3
      ja das klappt mit css:

      style beim mouseover eben filter: Alpha(Opacity=100)
      ansonsten filter: Alpha(Opacity=10)

      dann machen wenigstens die neuen ie's das bild in diesem fall beim mouseover von 10% nach 100% deckend. muss man nur hinter dem bild nen dunklen background einstellen und schon wirkt es dunkler

      mfg
      ben

      Kommentar


      • #4
        Danke werds mal versuchen...

        Kommentar


        • #5
          funktioniert nur im internet explorer
          Beantworte nie Threads mit mehr als 15 followups...
          Real programmers confuse Halloween and Christmas because OCT 31 = DEC 25

          Kommentar


          • #6
            OK

            Aber wie muss ich das nun genau bei den Eventhandlern machen?

            also was muss ich in onmouseover="" schreiben damit ich den eingestellten Filterwert ändern kann?

            Kommentar


            • #7
              ok, das ganze ist ziemlich simple.

              du schreibst dir deine verschiedenen stylesheets und gibst dem bild (oder jedem andren tag) eine "classover".

              hier kannst du es anschauen!

              <html>
              <head>
              <title>classover</title>
              <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
              <style type="text/css">
              <!--
              .bla {
              behavior:url(hover.htc);
              cursor: hand;
              width: 100%;
              clip: rect( );
              filter: Alpha(Opacity=30);
              }

              .blaOver {
              width: 100%;
              clip: rect( );
              filter: Alpha(Opacity=100);
              }

              .blaClick {
              width: 100%;
              clip: rect( );
              filter: Alpha(Opacity=10);
              }
              .table_bg { background-color: #000000}
              -->
              </style>
              </head>

              <body bgcolor="#FFFFFF" text="#000000">
              <table width="144" height="97" border="0" cellspacing="0" cellpadding="0" class="table_bg" align="center">
              <tr>
              <td><img src="tennis.gif" width="144" height="97" class=bla classOver=blaOver classDown=blaClick></td>
              </tr>
              </table>
              </body>
              </html>

              Damit das ganze funktioniert brauchst du die behavior datei:
              hover.htc


              <PUBLIC:COMPONENT>
              <PUBLIC:PROPERTY NAME="classOver" />
              <PUBLIC:PROPERTY NAME="classDown" />
              <PUBLIC:ATTACH event="onmouseout" handler="swapEffect" />
              <PUBLIC:ATTACH event="onmouseup" handler="swapEffect" />
              <PUBLIC:ATTACH event="onmousedown" handler="swapEffect" />
              <PUBLIC:ATTACH event="onmouseover" handler="swapEffect" />
              <PUBLIC:ATTACH event="onmouseup" handler="swapEffect" />

              <SCRIPT>
              // Copyright 1999 InsideDHTML.com, LLC. All rights reserved
              // This code can be reused as long as the above copyright
              // notice is not removed.
              var classDefault = element.className
              function swapEffect() {
              switch (event.type) {
              case "mousedown":
              if (classDown)
              element.className = classDown + " " + classDefault
              break;
              case "mouseup":
              case "mouseover":
              if (classOver)
              element.className = classOver + " " + classDefault
              break;
              default:
              element.className = classDefault
              }
              }
              </SCRIPT>
              </PUBLIC:COMPONENT>



              also bei mir klappts so. komischerweise geht der alpha-filter nur, wenn man eine width mit-definiert. keine ahnung


              die bescheuerten netscape-user können es zwar nicht sehen, kriegen aber auch keine fehler.. sind sie selber schuld


              mfg

              Kommentar


              • #8
                hm kurz ot frage:

                wie kommt man darauf eine *.htc in websiten einzubinden? irgendwie halte ich mit der aktuellen entwicklung nicht ganz schritt glaub ich

                naja gut egal, aber geht das nich auch einfacher, gehtz bestimmt
                ich bin Toxical, und werd es auch bleiben

                Kommentar


                • #9
                  Danke für die Antwort!

                  Nur noch eine Frage ()

                  Was ist eine .htc/behaviour Datei? hab ich ja noch nie gesehen. Kenn nur .js und .css Dateien, die included werden können (auf dem client Rechner)...

                  Kommentar

                  Lädt...
                  X