change backround image of another div when hovering over list item

Question

Hi

I have a list in a div and I would like to change the background image of the parent div (#homepage_container) when I hover over a list item.

here's the site:-

http://www.thebalancedbody.ca/

Is this possible? I'm guessing I'll have to use javascript.

Thanks

Jonathan

Answer 1

You have to use JS. Better to learn something like jQuery. With it you will have to do something like

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]})

Anyway, if you wish to use such kinds of techniques, you have to learn JS. See http://www.w3schools.com/js/default.asp and for basics and http://docs.jquery.com/Tutorials for jQuery.

Answer 2

This is quite simple with pure javascript.

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

Or using sprites:

imgdiv.style.backgroundPosition = "new position";

This can be executed on mouseover for any of your li's. Event registration in javascript can be done many ways, but to do it in script, I recommend QuirksMode's method here.

Something like:

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

And on load:

// 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 3

If you don't care about IE6, you could do it with CSS:

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

Answer 4

I suggest installing the Jquery Library for this (jquery.com)

Just add this to your header:

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

<script type="text/javascript">

      $(document).ready(function() {

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

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

            }

      });
</script>