Solved

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

Posted on 2011-03-01
5
614 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
That worked. Thanks for all your help.
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

771 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now