Solved

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

Posted on 2011-03-01
5
615 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
copy-item script help 15 66
CSS measurement 10 34
Do Psexec queries install files on remote computers 6 44
is this a cms? 8 32
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
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.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

932 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

12 Experts available now in Live!

Get 1:1 Help Now