Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

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

Posted on 2011-03-01
5
Medium Priority
?
628 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 1332 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 668 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 1332 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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…
Suggested Courses

564 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