Podświetlenie elementu obrazka po najechaniu myszką na inny element?

Witam,

na stronie chcę umieścić obrazek(obrazek.png) który jest złożony z sześciu części(1..6.png). Obok jest lista z siedmioma elementami. Chcę, aby po najechaniu myszką na pierwszy z nich podświetlił się cały obrazek, a po najechaniu na każdy kolejny punkt listy podświetliła się tylko jedna część obrazka.

(Przez podświetlenie mam na myśli to, że obrazek ma początkowo przeźroczystość 50%, a po podświetleniu 0).

Odpowiednie nałożenie na siebie obrazków oraz podświetlenie samo w sobie ogarnąłem w CSS'ie(Wszystkie obrazki mają identyczne wymiary, przeźroczyste tło i position: absolute).

Kod HTML:

				
<div id="obrazki">					
	<img id="calosc" src="obrazek.png" alt="Cały obrazek"> 
	<img id="czesc1" src="1.png" alt="Pierwsza część obrazka"> 
	<img id="czesc2" src="2.png" alt="Druga część obrazka"> 
	<img id="czesc3" src="3.png" alt="Trzecia część obrazka"> 
	<img id="czesc4" src="4.png" alt="Czwarta część obrazka"> 
	<img id="czesc5" src="5.png" alt="Piąta część obrazka"> 
	<img id="czesc6" src="6.png" alt="Szósta część obrazka">					
</div>

<div id="lista">
<ul>	
	<li id="li1">Podświetl cały obrazek</li>
	<li id="li2">Podświetl 1. część obrazka</li>
	<li id="li3">Podświetl 2. część obrazka</li>
	<li id="li4">Podświetl 3. część obrazka</li>
	<li id="li5">Podświetl 4. część obrazka</li>
	<li id="li6">Podświetl 5. część obrazka</li>
	<li id="li7">Podświetl 6. część obrazka</li>
</ul>
</div>

Z tego, co znalazłem, to tego efektu nie da się osiągnąć w czystym CSS. Niestety, nie kodziłem nigdy wcześniej w java scripcie, więc nie udało mi się skutecznie zintegrować ze stroną działającego kodu js, próbowałem coś w tym stylu:

KOD JS:

var lista1 = document.getElementById('li1');
var obrazek = document.getElementById('calosc');

lista1.onmouseover = function() { 
	obrazek.className = 'nieprzezroczysta';	
    }

lista1.onmouseout = function() {
	obrazek.className = 'przezroczysta';	
}

Macie jakieś pomysły, jak ugryźć to w łatwiejszy/działający sposób? Będę wdzięczny za każdą pomoc :)

Witam,
nie jest to nic trudnego, bardzo łatwo osiągnąć taki efekt przy pomocy jQuery.

 
$(document).ready(function(){
    $('#lista1').hover(function(){
        $('#obrazek2').animate({
            opacity: 1
        }, 800);
    }, function(){
        $('#obrazek2').animate({
            opacity: 0.5
        }, 800);
    });
});

Tak wygląda kod js myśle że ogarniesz sobie co robi, musisz porostu go spersonalizować pod swoje potrzeby. W razie pytań pisz.