Member Avatar for kimmi_baby

Hi,
what I want to do is create a menu with rollover buttons but each button also changes the background image of a div.

I've managed to change the colour of the div but not add an image there. I've added my code so you can have a look. Case 0 shows me attempting to change the background image. I must be doing something wrong.

I've left the other cases as colours so you can see how I did that. I eventually want it all to be images. I'm creating a Joomla website (not sure if that makes a difference).

<body onload="addHandlers()"> 

<script type="text/javascript" language="javascript">  

 function addHandlers(){  

 var allMenus = document.getElementById("services_menu").getElementsByTagName("li");  

 for(var k = 0; k < allMenus.length; k++)
	{
	  allMenus[k].setAttribute('onmouseover', 'ChangeContentBg('+ k + ')' );
	allMenus[k].setAttribute('onmouseout', 'Reset()'); 
	}

 }  

 </script> 



<script type="text/javascript">  

 function ChangeContentBg(i)  

 {  

 var Num = parseInt(i);  

 var ContentDiv = document.getElementById("content");  

 switch(Num)  

 {  

 case 0:  

 ContentDiv.style.background-image = 'url(../images/waxingtinting_rollover_image.jpg)';

 break;  

 case 1:  

 ContentDiv.style.backgroundColor = 'red';  

 break ;  
 
 case 2:  

 ContentDiv.style.backgroundColor = 'purple';  

 break ;  
 
  case 3:  

 ContentDiv.style.backgroundColor = 'green';  

 break ;  
 
  case 4:  

 ContentDiv.style.backgroundColor = 'yellow';  

 break ;  


 /*For each new color you would have to add a new case and change ChangeContentBg() parameter , to the case you want in <li> tag*/  

 }  

 }  

 function Reset()  

 {  

 document.getElementById("content").style.backgroundColor = '';  

 }  

</script>
  • 1 Contributor
  • 1 Reply
  • 179 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by kimmi_baby
Member Avatar for kimmi_baby

I've also tried changing it to

case 0:
ContentDiv.style.backgroundImage = 'url(../images/waxingtinting_rollover_image.jpg)';
break;

Now the background completely disappears when rolling over the first button...

Edited by kimmi_baby because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.