Como escurecer uma imagem ao passar o mouse?

Question

Nov 17, 2009, 10:35 AM

Como escurecer uma imagem ao passar o mouse?

Meu problema..

Eu tenho um número de imagens (dentro de hiperlinks), e eu quero cada um para escurecer no mouseover (ou seja, aplicar uma máscara preta com alta opacidade ou algo assim) e, em seguida, voltar ao normal no mouseout. Mas não consigo descobrir a melhor maneira de fazer isso.

Eu tentei..

Jquery cor animar e algumas referências javascript.Definir a opacidade da imagem com javascript.

Eu não quero ..

A imagem começa com 80% de opacidade e depois passa para 100% ao passar o mouse (é fácil).Para trocar entre 2 imagens (uma luz e uma escura), esqueci da menção isso desculpe ..

Reiterar..

Eu quero na imagem (inslide um hiperlink) para escurecer no mouseover e, em seguida, perder sua escuridão no mouseout.

Pensamentos?

ATUALIZAÇÃO:

Este é o meu progresso de sugestões. Parece bem no IE8, mas não no 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>

Pensamentos?

- Lee

RESPONDA

Eu estou indo com isso (parece funcionar no IE8 e 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>

leaveComments