Как исчезнуть фоновое изображение, чтобы ссылки / текст были видны? - PullRequest
Новая
       15

Как исчезнуть фоновое изображение, чтобы ссылки / текст были видны?

2 голосов
/ 19 ноября 2011

Я пытаюсь добиться того, чтобы при наведении мышки изображение исчезало, чтобы текст был виден - изображение (например, обложка компакт-диска), а когда указатель мыши находится над изображением, оно должно исчезать, чтобы показать трек-лист альбома. Каждый трек-лист является гиперссылкой на трек на YouTube.

У меня нет опыта работы с jquery, поэтому я надеюсь сделать это с помощью javascript.

Я был бы очень признателен за любую помощь, так как я потратил около двух дней, пытаясь найти ответ в Google.

Ответы [ 2 ]

0 голосов
/ 19 ноября 2011

Я действительно рекомендую вам использовать jQuery - это делает все намного проще.И это не очень сложно.В конце концов, у нас есть готовый код (и я был бы рад объяснить его дальше), поэтому все, что вам нужно сделать, это включить его.

Итак, если вы решите использовать jQuery, попробуйте это : 

$(".overlay").hover(function(){
    $(this).stop().fadeTo(300,0.8);   
},function(){
    $(this).stop().fadeTo(300,0);
});

А вот ваш HTML / CSS: 

<div class="container">
    <img src="http://placehold.it/200/200" />
    <div class="overlay">
        <a href="#">Hi</a><br>
        <a href="#">Hi</a><br>
        <a href="#">Hi</a><br>
    </div>
</div>

.overlay {
    position:absolute;
    margin-top:-205px;
    width:200px;
    height:200px;
    background-color:black;
    opacity:0;
}
0 голосов
/ 19 ноября 2011

Если под «затуханием» вы подразумеваете анимацию, попробуйте следующее: 

function SetObjectOpacity(obj, op, op100)
{
    obj.style.opacity = op.toString();
    obj.style["-moz-opacity"] = op.toString();
    obj.style["filter"] = "alpha(opacity=" + op100 + ")";
}

function FadeImage(imageid)
{
    var framedelay = 50;
    var frame = 0, img = document.getElementById(imageid), animint;
    animint = setInterval(function() {
        frame++;
        SetObjectOpacity(img, frame / 20, frame * 5);
        if (frame == 20) {
            img.style.visibility = 'hidden';
            clearInterval(animint);
        }
    }, framedelay);
}

А в HTML-коде: 

<div style="width: 200px; height: 200px; position: relative;">
    <div style="position: absolute; top: 0; left: 0; width: 200px; height: 200px;">
        text you want to show
    </div>
    <img src="yourimage.jpg" id="yourimage" onMouseOver="FadeImage('yourimage');" style="position: absolute; top: 0; left: 0;">
</div>

Отключение при наведении мыши очевидно.

...