Смяна на background-image в div

B

backstage

Registered
Искам да направя едно меню и при преминаване с мишката през бутона, фонът му да се сменя. Изнамерих някакъв скрипт, но проблема идва от това, че карйните бутони ще се различни от централните - трябват ми три различни div-а. Но не знам защо когато минавам с мишката през някой от долните, се сменя само в първия. Ето малко код, да видите:

Код: 
<html>
<head>
<style type="text/css">
#test	{
	background-image:url(http://zakosite.com/pernik7/11.png);
	height:30px;
	width:100px;
}
#test2	{
	background-image:url(http://zakosite.com/pernik7/21.png);
	height:30px;
	width:100px;
}
#test3	{
	background-image:url(http://zakosite.com/pernik7/31.png);
	height:30px;
	width:100px;
}
</style>
<script type="text/javascript">
function changeBgImage (image, id) {
	var element = document.getElementById('test', 'test2', 'test3');
	element.style.backgroundImage = "url("+image+")";
}
</script>
</head>
<body>
<div id="test" onMouseOver="changeBgImage('http://zakosite.com/pernik7/12.png', 'test')" onMouseOut="changeBgImage('http://zakosite.com/pernik7/11.png', 'test')">
</div>

<div id="test2" onMouseOver="changeBgImage('http://zakosite.com/pernik7/22.png', 'test')" onMouseOut="changeBgImage('http://zakosite.com/pernik7/21.png', 'test2')">
</div>

<div id="test3" onMouseOver="changeBgImage('http://zakosite.com/pernik7/32.png', 'test')" onMouseOut="changeBgImage('http://zakosite.com/pernik7/31.png', 'test3')">
</div>
</body>
</html>

Ето го тук и ефекта направо: http://zakosite.com/pernik7/1.php
 
Код: 
 <html>
<head>
<style type="text/css">
div#test   {
   background-image:url('http://zakosite.com/pernik7/11.png');
   height:30px;
   width:100px;
}
div#test2   {
   background-image:url('http://zakosite.com/pernik7/21.png');
   height:30px;
   width:100px;
}
div#test3   {
   background-image:url('http://zakosite.com/pernik7/31.png');
   height:30px;
   width:100px;
}
</style>
<script type="text/javascript">
function changeBgImage (image, id) {
   var element = document.getElementById('test', 'test2', 'test3');
   element.style.backgroundImage = "url("+image+")";
}
</script>
</head>
<body>
<div id="test" onMouseOver="changeBgImage('http://zakosite.com/pernik7/12.png', 'test')" onMouseOut="changeBgImage('http://zakosite.com/pernik7/11.png', 'test')">
</div>

<div id="test2" onMouseOver="changeBgImage('http://zakosite.com/pernik7/22.png', 'test')" onMouseOut="changeBgImage('http://zakosite.com/pernik7/21.png', 'test2')">
</div>

<div id="test3" onMouseOver="changeBgImage('http://zakosite.com/pernik7/32.png', 'test')" onMouseOut="changeBgImage('http://zakosite.com/pernik7/31.png', 'test3')">
</div>
</body>
</html>

Я така
 
Ако питаш мене това id е напълно излишно, но твоя си работа ето малко код 8)
Код: 
<html>
<head>
<style type="text/css">
#test   {
   background-image:url(http://zakosite.com/pernik7/11.png);
   height:30px;
   width:100px;
}
#test2   {
   background-image:url(http://zakosite.com/pernik7/21.png);
   height:30px;
   width:100px;
}
#test3   {
   background-image:url(http://zakosite.com/pernik7/31.png);
   height:30px;
   width:100px;
}
</style>
<script type="text/javascript">
function changeBgImage(image, id) {
   var element = document.getElementById(id);
   element.style.backgroundImage = "url("+image+")";
}
</script>
</head>
<body>
<div id="test" onmouseover="changeBgImage('http://zakosite.com/pernik7/12.png', this.id)" onmouseout="changeBgImage('http://zakosite.com/pernik7/11.png', this.id)">
</div>

<div id="test2" onmouseover="changeBgImage('http://zakosite.com/pernik7/22.png', this.id)" onmouseout="changeBgImage('http://zakosite.com/pernik7/21.png', this.id)">
</div>

<div id="test3" onmouseover="changeBgImage('http://zakosite.com/pernik7/32.png', this.id)" onmouseout="changeBgImage('http://zakosite.com/pernik7/31.png', this.id)">
</div>
</body>
</html>
М/у другото картинка http://zakosite.com/pernik7/11.png ти е разменена с http://zakosite.com/pernik7/12.png и обратното !
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе