Jak przyciemnić obraz po najechaniu myszą?

Question

Nov 17, 2009, 10:35 AM

Jak przyciemnić obraz po najechaniu myszą?

Mój problem..

Mam pewną liczbę obrazów (wewnątrz hiperłączy) i chcę, aby każda z nich przyciemniła się po najechaniu myszką (tzn. Nałożyła czarną maskę o dużej nieprzezroczystości lub coś), a następnie wróciła do normalnego trybu myszy. Ale nie mogę znaleźć najlepszego sposobu, aby to zrobić.

Próbowałem..

Animacja kolorów Jquery i niektóre odwołania do javascript.Ustawianie krycia obrazu za pomocą javascript.

Nie chce ..

Obraz zaczyna się od krycia 80%, a następnie przejdź do 100% po najechaniu myszką (to proste).Aby zamienić dwa obrazy (jedno jasne i jedno ciemne), zapomniałem o tej przeprosinie ..

Powtarzać..

Chcę na obrazie (przeskoczyć hiperłącze), aby przyciemnić po najechaniu myszą, a następnie stracić ciemność na myszy.

Myśli?

AKTUALIZACJA :

To jest mój postęp z sugestii. Wygląda dobrze w IE8, ale nie w 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>

Myśli?

- Lee

ODPOWIEDŹ

Idę z tym (wydaje się działać w IE8 i FF)

<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>