javascript - How to darken an image on mouseover?

Question

Ask a Question

Welcome To Ask or Share your Answers For Others

javascript - How to darken an image on mouseover?

asked Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

My problem..

I have a number of images (inside hyperlinks), and I want each to darken on mouseover (i.e. apply a black mask with high opacity or something), and then go back to normal on mouseout . But I can't figure out the best way to do it.

I've tried..

Jquery color animate and some javascript references.
Setting the opacity of the image with javascript.

I don't want..

Image start at 80% opacity then go to 100% on mouseover (that's easy).
To swap between 2 images (one light & one dark), forgot the mention this sorry..

To reiterate..

I want in image (inslide a hyperlink) to darken on mouseover and then lose its darkness on mouseout.

Thoughts?

UPDATE :

This is my progress from suggestions. Looks fine in IE8, but not 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>

Thoughts?

-- Lee

ANSWER

I'm going with this (seems to work in IE8 & 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>

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

427 views

1 Answer

深蓝 · Answer 1 · 2021-10-17T02:47:45+0000

Or, similar to erikkallen's idea, make the background of the A tag black, and make the image semitransparent on mouseover. That way you won't have to create additional divs.

CSS Only Fiddle (will only work in modern browsers)
JavaScript based Fiddle (will [probably] work in all common browsers)

Source for the CSS-based solution:

a.darken {
    display: inline-block;
    background: black;
    padding: 0;
}

a.darken img {
    display: block;

    -webkit-transition: all 0.5s linear;
       -moz-transition: all 0.5s linear;
        -ms-transition: all 0.5s linear;
         -o-transition: all 0.5s linear;
            transition: all 0.5s linear;
}

a.darken:hover img {
    opacity: 0.7;

}

And the image:

<a href="http://google.com" class="darken">
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200">
</a>

Categories

javascript - How to darken an image on mouseover?

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags