[kimmi_baby]

Hi,
I have searched EVERY WHERE. Posted this question on many different forums and not one person has replied. I really hope someone will be able to help me here as I'm getting quite stressed about it!

I need to create a rollover image menu. So far I have done this. BUT I also need the background image to change too, not just the rollover image. IS this possible? It doesn't have to be the background image that changes, it can just be an image floated right which changes. Although the background image would be more ideal.

If someone could just point me in the right direction or let me know if it is indeed possible?? I would so greatly appreciate it!!

[JackOfAllTrades]

Moved to Web Development. This is probably an HTML/CSS/Javascript issue, rather than being anything Joomla-specific.

[marinus]

Normally this is dictated by you're Joomla template you are using, you can get some extensions that can add a new menu in a template position's , which you can see by www.mydomain.com by adding ?tp=1 at the back of you're url.

you might want to look at this link

http://extensions.jo...g/search?q=menu

As JackOfAllTrades suggested , you might need to add some CSS,

like

li
{
background-image:url('images/menuBar.jpg');
}

This post has been edited by marinus: 18 April 2011 - 06:52 AM

[kimmi_baby]

marinus, on 18 April 2011 - 06:49 AM, said:

Normally this is dictated by you're Joomla template you are using, you can get some extensions that can add a new menu in a template position's , which you can see by www.mydomain.com by adding ?tp=1 at the back of you're url.

you might want to look at this link

http://extensions.jo...g/search?q=menu

As JackOfAllTrades suggested , you might need to add some CSS,

like

li
{
background-image:url('images/menuBar.jpg');
}

Thanks for your reply. Well the problem is that the image of the button is actually a background image including during the hover. I just don't know how to actually change the template background image as well.

#services_menu {
	width:391px;
	margin-top:-400px;
	margin-bottom:900px;
	padding-bottom:-50px;
	margin-right:700px;
	height:300px;
	float:left;
	
}



#services_menu li {
	list-style: none;
	float:left; 
	font-style: italic;
	
}


#services_menu li.item19 a {
  width: 391px;
  height:51px;
  background:url(../images/services_nav_waxing&tinting.png) 0 0 no-repeat;
}


#services_menu li.item20 a {
  width: 391px;
  height:51px;
  background:url(../images/services_nav_hand&feet.png) 0 0 no-repeat;
}

#services_menu li.item21 a {
  width: 391px;
  height:51px;
  background:url(../images/services_nav_facials.png) 0 0 no-repeat;
}

#services_menu li.item19 a:hover {
  background:url(../images/services_nav_waxing&tinting_rollover.png) 0 0 no-repeat;
}


#services_menu li.item20 a:hover {
  background:url(../images/services_nav_hand&feet_rollover.png) 0 0 no-repeat;
}
#services_menu li.item21 a:hover {
  background:url(../images/services_nav_facials_rollover.png) 0 0 no-repeat;
}

I've included a little bit of my code so you can see. Maybe I've misunderstood what you've said.

[marinus]

You should try somehing like this.

e.g

The menu bar is probably a div so i writing some code that uses is as a div

<div id="service_menu"  ><ul><li onmouseover="ChangeBg()" onmouseout="OldBg()"></li> </ul><div>

  <script type="text/javascript">
   
function ChangeBg()
   {
document.getElementById("service_menu")style.background-image = "linktooldimage";
   }
   function OldBg()
   {
     document.getElementById("service_menu")style.background-image =    "linktooldimage";
   }
  </script> 

Then find this find this file and put in this code, but you have to modify it to fit you needs.

Or add the html file as an attachment, so i can help you a bit better.

This post has been edited by marinus: 19 April 2011 - 03:55 AM

[kimmi_baby]

marinus, on 19 April 2011 - 03:45 AM, said:

You should try this.

#services_menu {
	    width:391px;
	    margin-top:-400px;
	    margin-bottom:900px;
	    padding-bottom:-50px;
	    margin-right:700px;
	    height:300px;
	    float:left;
	     background-image:url('youbackgroundimageurl');

	}

Can I just ask what adding the background image to this will do? Sorry I'm just a little confused.

To change the backgound of template
try and find

body
{
background-image:url('youbackgroundimageurl');

}

Sorry what I mean is I want to change the div background. So the menu is in a div called service_menu which is inside a div called content. So I'd like the content div background to change everytime a button is rolled over. Hope this makes more sense now.

<div id="service_menu"  ><ul><lionmouseover="ChangeBg()" onmouseout="OldBg()"></li> </ul><div>

  <script type="text/javascript">
   
function ChangeBg()
   {
document.getElementById("service_menu")style.background-image = "linktooldimage";
   }
   function OldBg()
   {
     document.getElementById("service_menu")style.background-image =    "linktooldimage";
   }
  </script> 

Could you please explain this to me a little bit more? I'm not great with javascript so I'm not quite sure what's happening. Is it changing the background of the services menu?

This post has been edited by kimmi_baby: 19 April 2011 - 03:59 AM

[marinus]

Exactly!

when you mouse hover over a <li> button it changes the backgoundimage of the
div with id of "service_menu"

[kimmi_baby]

marinus, on 19 April 2011 - 04:08 AM, said:

Exactly!

when you mouse hover over a <li> button it changes the backgoundimage of the
div with id of "service_menu"

What if I want it to change the background of the content div instead of the service_menu div? Which is inside the content div.

[marinus]

Use getElementById() to get the element with the id.

You should learn Javascript , then you would know this.

e.g

<div id='txtBox'>
document.getElementById("txtBox").style.background-image = "linktooldimage";

This post has been edited by marinus: 19 April 2011 - 04:16 AM

[kimmi_baby]

marinus, on 19 April 2011 - 04:12 AM, said:

Use getElementById() to get the element with the id.

You should learn Javascript , then you would know this.

Well thanks. I realised I need to learn Javascript. I just need pointing in the right direction. Thank you very much for your help

This post has been edited by kimmi_baby: 19 April 2011 - 04:15 AM

[marinus]

I could help you if you supply me with you html file , and give me some rep

[kimmi_baby]

marinus, on 19 April 2011 - 04:17 AM, said:

I could help you if you supply me with you html file , and give me some rep

I've given you some rep Sorry im new to this forum haha, didn't quite understand how it works.
I'll start working on the file again tomorrow, so if you don't mind i'll reply again once I've got a little bit more to show you. Is that ok?

[marinus]

No problem , i started with Joomla, and im a expert C# programmer now , but it began with the humble Joomla

and i want to help a fellow Joomla Guru.

Only supply me with you homepage html file when you can .

Some good links to learn Javascript .

http://www.w3schools.../js/default.asp

http://www.javascript.com/

onmouseover , onmouseout

http://www.cs.runet....~pac/mouseover/

This post has been edited by marinus: 19 April 2011 - 04:32 AM

[kimmi_baby]

marinus, on 19 April 2011 - 04:26 AM, said:

No problem , i started with Joomla, and im a expert C# programmer now , but it began with the humble Joomla

and i want to help a fellow Joomla Guru.

Only supply me with you homepage html file when you can .

Some good links to learn Javascript .

http://www.w3schools.../js/default.asp

http://www.javascript.com/

onmouseover , onmouseout

http://www.cs.runet....~pac/mouseover/

I've attached my index file.  index.php (1.55K)
Number of downloads: 32
I'm not quite sure if it's what you're after. I haven't actually started on it yet. I'm researching javascript at the moment. You'll see I've actually created the menu items in Joomla and then linked them to the CSS by using the item number. I'm not sure if this is the right way to go. I did this because that way I can assign the different templates to each page.

you can see the page here: http://www.purplebla...e&id=2&Itemid=2
I've noticed for some reason, the buttons I have at the moment work in IE and Firefox but not Google Chrome.

[marinus]

Ok , here is what i came up with


Modify index.php like so .

HTML

    <li onmouseover="ChangeContentBg(1)" onmouseout="Reset()"><a href="http://www.purpleblaze.com.au/GlamourEscape/index.php?option=com_content&view=article&id=10&Itemid=18">Specials</a></li>
    </div> 

Then just copy\paste this code in the index.php.


Javascript

<script type="text/javascript">

function ChangeContentBg(i)
{
   var Num = parseInt(i);
   var ContentDiv = document.getElementById("content");

   switch(Num)
   {
     case 1: 
       ContentDiv.style.backgroundColor = 'aliceblue';
       break;

     case 2:
       ContentDiv.style.backgroundColor = 'red';
        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>

Now this ChangeContentBg(1) in my code sets the Current Color , say you want the color red that the below line would be

<li onmouseover="ChangeContentBg(2)" onmouseout="Reset()">

You would have to add a new case foreach color that you want .


FULL INDEX.PHP CODE

<html>
<body>
 <div id="content" class="float"><jdoc:include type="message" /><jdoc:include type="component" /></div>  
    <div id="services_menu" class="float"><jdoc:include type="modules" name="servicesmenu" /></div>
    
    <div id="sidebar_right" class="float"><jdoc:include type="modules" name="right" />
    <li onmouseover="ChangeContentBg(1)" onmouseout="Reset()"><a href="http://www.purpleblaze.com.au/GlamourEscape/index.php?option=com_content&view=article&id=10&Itemid=18">Specials</a></li>
       
    </div> 
<script type="text/javascript">

function ChangeContentBg(i)
{
   var Num = parseInt(i);
   var ContentDiv = document.getElementById("content");

   switch(Num)
   {
     case 1: 
       ContentDiv.style.backgroundColor = 'aliceblue';
       break;
   }


}
function Reset()
{
document.getElementById("content").style.backgroundColor = '';

}


</script>
</body>
</html>

Just copy and paste it in the following editor and see what it does

http://www.w3schools...tryjsref_splice

Remember to remove the numbers when you copy\paste the code

This post has been edited by marinus: 19 April 2011 - 05:32 AM