Solved

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

Posted on 2011-03-01
5
619 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
CSS style formatting? 2 58
Select SamAccountName - powershell script 2 29
form isn't working is it missing a document 21 64
CSS Odd/Even Confusion 2 40
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…

739 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