Wie verdunkle ich ein Bild beim Mouseover?

Question

Nov 17, 2009, 10:35 AM

Wie verdunkle ich ein Bild beim Mouseover?

Mein Problem..

Ich habe eine Reihe von Bildern (innerhalb von Hyperlinks), und ich möchte, dass jedes bei Mouseover dunkler wird (d. H. Eine schwarze Maske mit hoher Deckkraft oder so etwas), und dann beim Mouseout wieder normal wird. Aber ich kann nicht herausfinden, wie es am besten geht.

Ich habe es versucht..

JQuery-Farbanimation und einige Javascript-Referenzen.Einstellen der Deckkraft des Bildes mit Javascript.

Ich will nicht ..

Bildstart bei 80% Deckkraft, dann bei Mouseover auf 100% (ganz einfach).Um zwischen 2 Bildern (ein helles und ein dunkles) zu wechseln, vergessen Sie die Erwähnung.

Wiederholen..

Ich möchte im Bild (einen Hyperlink einfügen) beim Mouseover abdunkeln und dann beim Mouseout die Dunkelheit verlieren.

Gedanken?

UPDATE:

Dies ist mein Fortschritt aus Vorschlägen. Sieht gut aus in IE8, aber nicht in FF3

<html>
    <body>
        <a href="http://www.google.com" style="background-color:black; opacity:1;filter:alpha(opacity=100)">
            <img src="http://www.google.co.uk/intl/en_uk/images/logo.gif" width="200" 
            style="opacity:1;filter:alpha(opacity=100)" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" 
            onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60" />
        </a>
    </body>
</html>

Gedanken?

- Lee

ANTWORTEN

Ich gehe damit (scheint in IE8 & FF zu funktionieren)

<html>
    <head>
        <style type="text/css">

        .outerLink 
        {
            background-color:black; 
            display:block; 
            opacity:1;
            filter:alpha(opacity=100);
            width:200px;
        }

        img.darkableImage 
        {
            opacity:1;
            filter:alpha(opacity=100);
        }
</style>
    </head>

    <body>
        <a href="http://www.google.com" class="outerLink">
            <img src="http://www.google.co.uk/intl/en_uk/images/logo.gif" width="200" 
            class="darkableImage" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" 
            onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60" />
        </a>
    </body>
</html>