cdlciddit
asked on
How can I use a differnet hover image in a menu list?
Hello. I got this code from http://cooltext.com. But when I tried to edit it to use 2 different images it won't work. I can't get my hover image to display in the #menu li a:hover section of the style sheet. When I use the original image it works fine. But when I replace the original image with a different image in the code it goes blank when I hover my mouse over the button. Here is the code that works:
#menu {
width: 200px;
border-style: solid solid none solid;
border-color: #0e69be;
border-size: 1px;
border-width: 1px;
}
#menu ul{
list-style:none;
margin:0px;
padding:0px;
}
#menu li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
font-weight:normal;
}
#menu li a:link, #menu li a:visited {
color: #ffffff;
display: block;
background: url(images/menuImg1.jpg);
background-repeat:no-repea t;
padding: 8px 0 0 10px;
}
#menu li a:hover {
color: #ffffff;
background: url(images/v5.jpg) 0 -32px;
background-repeat:no-repea t;
padding: 8px 0 0 10px;
}
#menu li a:active {
color: #ffffff;
background: url(images/menuImg2.jpg) 0 -64px;
background-repeat:no-repea t;
padding: 8px 0 0 10px;
}
But then when I change this section and hover my mouse over the button it goes blank. The new image doesn't display. I changed it from this:
#menu li a:hover {
color: #ffffff;
background: url(images/v5.jpg) 0 -32px;
background-repeat:no-repea t;
padding: 8px 0 0 10px;
}
To this:
#menu li a:hover {
color: #ffffff;
background: url(images/menuImg1.jpg) 0 -32px;
background-repeat:no-repea t;
padding: 8px 0 0 10px;
}
As you can see I only changed the filename to my new image. Any help will be appreciated.
#menu {
width: 200px;
border-style: solid solid none solid;
border-color: #0e69be;
border-size: 1px;
border-width: 1px;
}
#menu ul{
list-style:none;
margin:0px;
padding:0px;
}
#menu li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
font-weight:normal;
}
#menu li a:link, #menu li a:visited {
color: #ffffff;
display: block;
background: url(images/menuImg1.jpg);
background-repeat:no-repea
padding: 8px 0 0 10px;
}
#menu li a:hover {
color: #ffffff;
background: url(images/v5.jpg) 0 -32px;
background-repeat:no-repea
padding: 8px 0 0 10px;
}
#menu li a:active {
color: #ffffff;
background: url(images/menuImg2.jpg) 0 -64px;
background-repeat:no-repea
padding: 8px 0 0 10px;
}
But then when I change this section and hover my mouse over the button it goes blank. The new image doesn't display. I changed it from this:
#menu li a:hover {
color: #ffffff;
background: url(images/v5.jpg) 0 -32px;
background-repeat:no-repea
padding: 8px 0 0 10px;
}
To this:
#menu li a:hover {
color: #ffffff;
background: url(images/menuImg1.jpg) 0 -32px;
background-repeat:no-repea
padding: 8px 0 0 10px;
}
As you can see I only changed the filename to my new image. Any help will be appreciated.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
That worked. Thanks for all your help.
ASKER