Solved

How can I use a differnet hover image in a menu list?

Posted on 2011-03-01
5
616 Views
Last Modified: 2012-05-11
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-repeat;
      padding: 8px 0 0 10px;
      }
      
#menu li a:hover {
      color: #ffffff;
      background: url(images/v5.jpg) 0 -32px;
      background-repeat:no-repeat;
      padding: 8px 0 0 10px;
      }
      
#menu li a:active {
      color: #ffffff;
      background: url(images/menuImg2.jpg) 0 -64px;
      background-repeat:no-repeat;
      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-repeat;
      padding: 8px 0 0 10px;
      }

To this:
#menu li a:hover {
      color: #ffffff;
      background: url(images/menuImg1.jpg) 0 -32px;
      background-repeat:no-repeat;
      padding: 8px 0 0 10px;
      }

As you can see I only changed the filename to my new image. Any help will be appreciated.

0
Comment
Question by:cdlciddit
  • 2
  • 2
5 Comments
 
LVL 4

Accepted Solution

by:
KazooSoft earned 333 total points
ID: 35011822
Ahh,

Please take a look again what this is doing.

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-repeat;
      padding: 8px 0 0 10px;
      }

What they have done I can assume is create 1 image for the button and they are affsetting the image by 32 pixels.

So if you have made an image, then offset it by 32 pixels it will most likely display as nothing.

Am I on the right lines, if you look at the original image they sent the most likely have exactly the same button 1 on top of another with a different style (hover)

See attached for an example,
Thius is the image I use for KazooSoft with the same effect
See http://www.kazoosoft.eu for an example of this in action.




 
0
 
LVL 16

Assisted Solution

by:HagayMandel
HagayMandel earned 167 total points
ID: 35011839
Make sure the dimensions (Height/Width) of the new file is exactly like the original one.
0
 
LVL 4

Assisted Solution

by:KazooSoft
KazooSoft earned 333 total points
ID: 35011841
Button and hover image
See with the image I have used above, this is the CSS

.nav-end{
      background-image: url("http://www.kazoosoft.eu/images/button-end.png");
      background-repeat: no-repeat;
}
.nav-end:hover{
      background-position: 0 -38px;
      cursor: pointer;
      cursor: hand;
}
0
 

Author Comment

by:cdlciddit
ID: 35018226
Thanks guys. I think you are exactly right. I didn't create my image exactly like theirs. I will create a new image and see if that works.
0
 

Author Comment

by:cdlciddit
ID: 35018821
That worked. Thanks for all your help.
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Menu Selected on Chrome for Windows 13 18
Easy responsive table out of existing table 28 55
How can i open a .fxp file 3 33
Mobile page Scrolling down when refreshing 4 31
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question