Change hover color for each menu item

**nefarious2all** · 12-28-2008, 03:28 AM

I have searched this site (and the web in general) for a solution to my question and cannot seem to find it. I'm fairly new to this so I might have gone right by the solution and not know it.

If there's already a thread with my question answered just point me in it's direction.

I'm using the 'AnyLink Drop Down Menu' for the redesign of my site. I've got it working beautifully except for one little thing that I'm trying to change in it. The background color in the hover state, I want to change it for each menu item. So when you rollover an item in menu 1 it turns red, when you rollover an item in menu 2 it turns yellow, etc....

I'm using images instead of text so the background color in the hover state creates a rollover effect. Right now all the background colors are in a red, but here's what I've got at the moment...

~~~~~~~~~~~~~~~~~~

code in post below

~~~~~~~~~~~~~~~~~~

Thank you for any assistance!

**Nile** · 12-28-2008, 03:34 AM

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format when asking a question.

Please post a link to the page on your site that contains the problematic script so we can check it out.

Your page is in violation of Dynamic Drive's usage terms, which, among other things, states that the credit notice inside script must stay intact. Please reinstate the notice first.

**nefarious2all** · 12-28-2008, 09:56 PM

Sorry!

Script: AnyLink Drop Down Menu
http://www.dynamicdrive.com/dynamici...pmenuindex.htm

I cannot post the page that I'm using this script on because it's not up on any server yet, because it's not done. I only have it on my computer at the moment.

HTML Code:

style type="text/css">

#dropmenudiv{
position:absolute;
z-index:100;
}

#dropmenudiv a{
width: 100%;
display: block;
border-bottom: 1px solid white;
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: #ffffff;
}

</style>

<script type="text/javascript">
/***********************************************
* AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href=""><img src="ill01.png" border="0"></a>'
menu1[1]='<a href=""><img src="ill02.png" border="0"></a>'
menu1[2]='<a href=""><img src="ill03.png" border="0"></a>'
menu1[3]='<a href=""><img src="ill04.png" border="0"></a>'
menu1[4]='<a href=""><img src="ill05.png" border="0"></a>'

//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='<a href=""><img src="phsp01.png" border="0"></a>'
menu2[1]='<a href=""><img src="phsp02.png" border="0"></a>'
menu2[2]='<a href=""><img src="phsp03.png" border="0"></a>'
menu2[3]='<a href=""><img src="phsp04.png" border="0"></a>'
menu2[4]='<a href=""><img src="phsp05.png" border="0"></a>'
		
var menuwidth='165px' //default menu width
var menubgcolor='#ffffff'  //menu bgcolor
var disappeardelay=0  //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?

/////No further editting needed

Then I have this in the body

HTML Code:

<body onload="MM_preloadImages('illustratorOV.png','photoshopOV.png)">

<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1), MM_swapImage('IllustratorBT','','illustratorOV.png',1)" onMouseout="delayhidemenu(), MM_swapImgRestore()"><img src="illustrator.png" name="IllustratorBT" width="115" height="35" border="0" id="IllustratorBT" /></a>

<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2), MM_swapImage('PhotoshopBT','','photoshopOV.png',1)" onMouseout="delayhidemenu(), MM_swapImgRestore()"><img src="photoshop.png" name="PhotoshopBT" width="110" height="35" border="0" id="PhotoshopBT" /></a>

</body>

**Nile** · 12-28-2008, 10:06 PM

Find:

Code:

menu1[0]='<a href=""><img src="ill01.png" border="0" class="red"></a>'
menu1[1]='<a href=""><img src="ill02.png" border="0" class="yellow"></a>'

You'd have to do that on each menu, thats just an example. Then for every color class you have, put it in the CSS:

Code:

#dropmenudiv{
position:absolute;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}

#dropmenudiv a{
width: 100%;
display: block;
border-bottom: 1px solid white;
}

#dropmenudiv .red:hover{ /*hover background color*/
background-color: red;
}
#dropmenudiv .yellow:hover{ /*hover background color*/
background-color: yellow;
}

**nefarious2all** · 12-29-2008, 01:15 AM

Thank you for the reply.
But it didn't work, I actually get no hover background color. This is what I put...

HTML Code:

<style type="text/css">

#dropmenudiv{
position:absolute;
z-index:100;
}

#dropmenudiv a{
width: 100%;
display: block;
border-bottom: 1px solid white;
}

#dropmenudiv .#9e0b0f:hover{ /*hover background color*/
background-color: #9e0b0f;
}
#dropmenudiv .#a3620a:hover{ /*hover background color*/
background-color: #a3620a;
}

</style>

<script type="text/javascript">
/***********************************************
* AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href=""><img src="ill01.png" border="0" class="#9e0b0f"></a>'
menu1[1]='<a href=""><img src="ill02.png" border="0" class="#9e0b0f"></a>'

//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='<a href=""><img src="phsp01.png" border="0" class="#a3620a"></a>'
menu2[1]='<a href=""><img src="phsp02.png" border="0" class="#a3620a"></a>'
		
var menuwidth='165px' //default menu width
var menubgcolor='#ffffff'  //menu bgcolor
var disappeardelay=0  //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?

/////No further editting needed

**Nile** · 12-29-2008, 01:22 AM

Ooops! That was an example of Nile not thinking.

Here:

Code:

var menu1=new Array()
menu1[0]='<a href="" class="red"><img src="ill01.png" border="0"></a>'
menu1[1]='<a href="" class="yellow"><img src="ill02.png" border="0"></a>'

And:

Code:

#dropmenudiv{
position:absolute;
z-index:100;
}

Should be:

Code:

#dropmenudiv{
position:absolute;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}

(That was my fault, I copied to fast)

**nefarious2all** · 12-29-2008, 02:22 AM

Hey, no problem! You're the one helping me, so I can't complain.

But... I hate to say it... it still didn't work. Still get nothing.

Code:

<style type="text/css">

#dropmenudiv{
position:absolute;
z-index:100;
border-bottom-width: 0;
}

#dropmenudiv a{
width: 100%;
display: block;
border-bottom: 1px solid white;
}

#dropmenudiv .#9e0b0f:hover{ /*hover background color*/
background-color: #9e0b0f;
}
#dropmenudiv .#a3620a:hover{ /*hover background color*/
background-color: #a3620a;
}

</style>

<script type="text/javascript">
/***********************************************
* AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="" class="#9e0b0f"><img src="ill01.png" border="0"></a>'
menu1[1]='<a href="" class="#9e0b0f"><img src="ill02.png" border="0"></a>'

//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='<a href="" class="#a3620a"><img src="phsp01.png" border="0"></a>'
menu2[1]='<a href="" class="#a3620a"><img src="phsp02.png" border="0"></a>'
		
var menuwidth='165px' //default menu width
var menubgcolor='#ffffff'  //menu bgcolor
var disappeardelay=0  //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?

/////No further editting needed

**Nile** · 12-29-2008, 02:28 AM

You didn't read my whole post:

Originally Posted by Nile

And:

Code:

#dropmenudiv{
position:absolute;
z-index:100;
}

Should be:

Code:

#dropmenudiv{
position:absolute;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}

(That was my fault, I copied to fast)

Oh, also, you can't have # in a class name.

**nefarious2all** · 12-29-2008, 03:07 AM

I actually don't need that code for how I have the dropdown menu set up, but thank you.

And more importantly... IT WORKS! THANK YOU!

Code:

<style type="text/css">

#dropmenudiv{
position:absolute;
z-index:100;
border-bottom-width: 0;
}

#dropmenudiv a{
width: 100%;
display: block;
border-bottom: 1px solid white;
}

#dropmenudiv .red:hover{ /*hover background color*/
	background-color: #9e0b0f;
}
#dropmenudiv .yellow:hover{ /*hover background color*/
	background-color: #a3620a;
}

</style>

<script type="text/javascript">
/***********************************************
* AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="" class="red"><img src="ill01.png" border="0"></a>'
menu1[1]='<a href="" class="red"><img src="ill02.png" border="0"></a>'

//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='<a href="" class="yellow"><img src="phsp01.png" border="0"></a>'
menu2[1]='<a href="" class="yellow"><img src="phsp02.png" border="0"></a>'
		
var menuwidth='165px' //default menu width
var menubgcolor='#ffffff'  //menu bgcolor
var disappeardelay=0  //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?

/////No further editting needed

I had to specify what color I wanted 'red' to be! Now lets hope it works in all browsers.