Изменить фон страницы при наведении изображения с использованием JavaScript - PullRequest
Новая
       16

Изменить фон страницы при наведении изображения с использованием JavaScript

1 голос
/ 04 января 2012

В настоящее время я использую javascript для этого, но если у вас есть лучшее решение, я весь слух. Итак, у меня есть моя обертка и ее фон, и в ней есть весь мой контент, включая кнопку, которую я хочу, чтобы при наведении курсора, чтобы изменить фон обертки / страницы.

мой css выглядит так 

#wrapper {position: absolute; min-width:550px; width:100%; height:100%; background: url(img/bg.jpg) no-repeat center top;}

, а затем мой HTML 

<div id="wrapper">
<div id="content">
<div class="logo">
<img src="img/logo1.png" />
</div>
<div class="button">
<img src="img/dj.png" onMouseOver="changeBgImage('img/bg2.jpg','wrapper')" onMouseOver="changeBgImage('img/bg2.jpg','wrapper')"/>
</div>
</div>
</div>

а затем мой javascript 

<script type="text/javascript">
    function changeBgImage (image, id) {
var element = document.getElementById(id);
element.style.backgroundImage = "url("+image+")";
    }
</script>

Таким образом, когда он работает, он меняет фон, а затем снова меняет его при наведении мыши, однако я хочу, чтобы он постепенно исчезал. Как мне поступить так ??

РЕДАКТИРОВАТЬ: попытка обоих решений ниже, ни один из них не работает или не применяется

Ответы [ 2 ]

2 голосов
/ 04 января 2012

Вот хороший, чистый способ сделать это.

http://jsfiddle.net/Diodeus/gYyBL/

<img src="http://i.imgur.com/vdDQgb.jpg" hoverImg="http://i.imgur.com/Epl4db.jpg">

$('body').find('*[hoverImg]').each(function(index){
    $this = $(this)
    $this.wrap('<div>')     
    $this.parent().css('width',$this.width())  
    $this.parent().css('height',$this.width())
    $this.parent().css('background-image',"url(" + $this.attr('hoverImg')+")")
        $this.hover(function() {
            $(this).stop()
            $(this).fadeTo('',.01)    
        },function() {
            $(this).stop()
            $(this).fadeTo('',1)             
        })                    
});
0 голосов
/ 04 января 2012

Мне нравится ваше решение. Проверьте это для опции для эффекта затухания, который вы пытаетесь достичь.

Удачи!

Редактировать: https://stackoverflow.com/a/1055432/752527 также кажется хорошим чистым решением.

...