изменить фоновое изображение другого div при наведении на элемент списка

Question

У меня есть список в div, и я хотел бы изменить фоновое изображение родительского div (#homepage_container) при наведении курсора на элемент списка.

вот сайт: -

http://www.thebalancedbody.ca/

Возможно ли это? Я предполагаю, что мне придется использовать JavaScript.

Спасибо

Jonathan

Answer 1

Это довольно просто с чистым JavaScript.

function changeBg(newBg)
{
    var imgdiv = document.getElementById("divwithbackground");
    imgdiv.style.backgroundImage = "url(" + newBg + ")";
}

Или используя спрайты:

imgdiv.style.backgroundPosition = "new position";

Это может быть выполнено при наведении курсора на любой из ваших li. Регистрация событий в javascript может быть осуществлена ​​многими способами, но для этого в сценарии я рекомендую метод QuirksMode здесь .

Что-то вроде:

function addEventSimple(obj,evt,fn) {
    if (obj.addEventListener)
        obj.addEventListener(evt,fn,false);
    else if (obj.attachEvent)
        obj.attachEvent('on'+evt,fn);
}

А на нагрузке:

// get the list items
var ul = document.getElementById("ulId");
var lis = ul.getElementsByTagName("li");

// add event handlers
for (var i = 0; i < lis.length; i++)
{
    addEventSimple(lis[i], "mouseover", (function(j) {
        return function() { 
            // get your background image from the li somehow
            changeBg(lis[j].id + "_bg.png");
        };
    })(i)); // use a closure to capture the current value of "i"
}

Answer 2

Вы должны использовать JS. Лучше научиться чему-то вроде jQuery. С ним вам придется делать что-то вроде

var images = ['img1.jpg', 'img2.jpg', ...]

for (var i = 0; i < li_count; ++i) // li_count is the number of li's
    $('li:eq(' + i + ')').mouseover(function() {$('#homepage_container').css('background-image', images[i]})

В любом случае, если вы хотите использовать такие методы, вы должны изучить JS. См. http://www.w3schools.com/js/default.asp и основы и http://docs.jquery.com/Tutorials для jQuery.

Answer 3

Я предлагаю установить библиотеку Jquery для этого (jquery.com)

Просто добавьте это в заголовок:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">

<script type="text/javascript">

      $(document).ready(function() {

          $('li').hover(function(){

         $('#homepage_container').css('background-image' : 'whatever.png');

            }

      });
</script>

Answer 4

Если вас не волнует IE6, вы можете сделать это с помощью CSS:

#homepage_container { background: url(normal.png); }
#homepage_container:hover { background: url(hover.png); }