[RESOLVED] Hover Image Change Issues

@jdgFeb 07.2008

Hi all,

I have a suckerfish dropdown menu that uses images for the menu color (thanks to Centauri for getting it working for me, ~~[URL=”http://www.webdeveloper.com/forum/showthread.php?t=172855″]~~previous thread[/URL]).

However I had this problem before and I still have it now. On hover, I want to change the color, specifically, I want to change the images that I use for the menu to a different image. The problem is that the new image displays in the background, behind the original menu image instead of replacing it or appearing in front (does the same thing if I just use a regular background color too).

Can anyone help me to figure out why this is happening? I included the two images that are used for the menu (button-left and button-right), and the two images that I am trying to use for the hover (buttonOver-left and buttonOver-right). The css page, javascript page, and html page are below.

Thanks again.

~~[B]~~CSS[/B]

[CODE]#vertnav{ padding:0; margin:0; list-style: none; width: 12em; } #vertnav li { margin:0; position: relative; width: 11.5em; background-color:#CCC; border:solid 1px #CCC; border-bottom:none; padding: 0.25em; }

#vertnav li:last-child{border-bottom:1px solid #CCC;}

#vertnav a { text-decoration:none; display:block; height:1em; line-height: 1em; padding: 0.1em; } #vertnav .toplev { background-image: url(images/button-left.jpg); background-repeat: no-repeat; background-position: left center; } #vertnav .toplev a { background-image: url(images/button-right.jpg); background-repeat: no-repeat; background-position: right center; text-align: center; } #vertnav li:hover, #vertnav li.over { /*background-color:rgb(255, 255, 204);*/ background-image: url(images/buttonOver-left.jpg); background-repeat: no-repeat; background-position: left center; } #vertnav ul { list-style: none; width:12em; position:absolute; left: -999em; top: 0px; margin: 0; padding: 0; } #vertnav li:hover ul ul, #vertnav li:hover ul ul ul, #vertnav li:hover ul ul ul ul, #vertnav li:hover ul ul ul ul ul, #vertnav li.over ul ul, #vertnav li.over ul ul ul, #vertnav li.over ul ul ul ul, #vertnav li.ver ul ul ul ul ul { left: -999em; } #vertnav li:hover ul, #vertnav ul li:hover ul, #vertnav ul ul li:hover ul, #vertnav li.over ul, #vertnav ul li.over ul, #vertnav ul ul li.over ul { left: 12em; } * html #vertnav li { float: left; }[/CODE]

~~[B]~~Javascript[/B]

[CODE]sfHover = function() { var sfEls = document.getElementById(“vertnav”).getElementsByTagName(“LI”); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=” over”; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(” over\b”), “”); } } } if (window.attachEvent) window.attachEvent(“onload”, sfHover);[/CODE]

~~[B]~~HTML[/B]

[CODE]<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> <html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″> <title>Untitled Document</title> <script type=”text/javascript” src=”sfhover.js”></script> <link rel=”stylesheet” type=”text/css” href=”multimenuvert.css”> </head>

<body> <ul id=”vertnav”> <li><div class=”toplev”><a href=”#” >first Level menu</a></div> <ul> <li><a href=”#” >second Level menu</a></li> <li><a href=”#” >second Level menu</a> <ul> <li><a href=”#” >third Level menu</a></li> </ul> </li> </ul> </li> <li><div class=”toplev”><a href=”#” >fourth Level menu</a></div> <ul> <li><a href=”#” >fifth Level menu</a></li> <li><a href=”#” >fifth Level menu</a> <ul> <li><a href=”#” >sixth Level menu</a></li> </ul> </li> </ul> </li> </ul> </body> </html>[/CODE]

~~[upl-file uuid=66495b20-c68d-461c-9405-8a4260ebeed6 size=2kB]~~buttonOver-left.jpg[/upl-file]

~~[upl-file uuid=203f4df9-7fcd-49eb-b5c6-c49357f2f4f6 size=789B]~~buttonOver-right.jpg[/upl-file]

~~[upl-file uuid=c6daeb27-4316-4249-bc9a-899468a773ec size=1kB]~~button-left.jpg[/upl-file]

~~[upl-file uuid=fd8ee3ac-c9ef-40cd-a569-0da919cf0955 size=785B]~~button-right.jpg[/upl-file]

to post a comment

CSS

12 Comments(s) _↴

@matt_ritterFeb 07.2008 — #Not knowing exactly what effect you are looking I can tell you what is technically wrong. If i could see a image of what you want the menu to look like in the off state and on state might be able to help a little more with the css.

buttonOver-left.jpg is an attribute of vertnav li while button-left.jpg is an attribute of vertnav .toplev. So in that case you are not replacing anything but applying background-images to 2 different things.

<i>
 </i>	background-image: url(images/button-left.jpg);
 background-repeat: no-repeat;
 background-position: left center;
 }
 #vertnav .toplev:hover {
 background-image: url(images/buttonOver-left.jpg);
 }
 #vertnav .toplev a {
 background-image: url(images/button-right.jpg);
 background-repeat: no-repeat;
 background-position: right center;
 text-align: center;
 }
 #vertnav .toplev a:hover {
 background-image: url(images/buttonOver-right.jpg);
 }
 #vertnav li:hover, #vertnav li.over {
 /*background-color:rgb(255, 255, 204);*/
 background-image: url(images/buttonOver-left.jpg);
 background-repeat: no-repeat;
 background-position: left center;
 }

This might be closer to what you are trying for.

Just curious.. any reason why you have the background image split?

@jdgauthorFeb 07.2008 — #Thanks matt.ritter, that works almost perfectly. It works great in firefox, but in IE, I can't get the left image to display. I think it's cause hover doesn't work in IE except for links, and I haven't been able to get the "over" workaround to apply to the div part of the menu (where the left pic gets displayed). So if you or anyone else can help with getting the IE hover work around to apply to the div that would be great.

This is what I have for the CSS right now:

[CODE]#vertnav .toplev {
 background-image: url(test_menu/button-left.jpg);
 background-repeat: no-repeat;
 background-position: left center;
 }
 #vertnav .toplev:hover, #vertnav .toplev .over {
 background-image: url(test_menu/buttonOver-left.jpg);
 background-repeat: no-repeat;
 background-position: left center;
 }
 #vertnav .toplev a {
 background-image: url(test_menu/button-right.jpg);
 background-repeat: no-repeat;
 background-position: right center;
 text-align: center;
 }
 #vertnav .toplev a:hover {
 background-image: url(test_menu/buttonOver-right.jpg);
 background-repeat: no-repeat;
 background-position: right center;
 text-align: center;
 }[/CODE]

And this is what I have for the javascript to try and get it working (although it doesn't for the left pic):

[CODE]sfHover = function() {
 var sfEls2 = document.getElementByID("left");
 for (var i=0; i<sfEls2.length; i++) {
 sfEls2[i].onmouseover=function() {
 this.className+=" over";
 }
 sfEls2[i].onmouseout=function() {
 this.className=this.className.replace(new RegExp(" over\b"), "");
 }
 }
 
  var sfEls = document.getElementById("vertnav").getElementsByTagName("LI");
  for (var i=0; i<sfEls.length; i++) {
   sfEls[i].onmouseover=function() {
   this.className+=" over";
 
   }
   sfEls[i].onmouseout=function() {
   this.className=this.className.replace(new RegExp(" over\b"), "");
   }
  }
 }
 if (window.attachEvent) window.attachEvent("onload", sfHover);[/CODE]

For the html, I did put a "left" id in the div with the toplev class
[CODE]<div id="left" class="toplev"><a href="#" >first Level menu</a></div>[/CODE]

Like you asked, since it might help, I attached the pictures of what it should look like in the off and on state (although I think I reversed the names, but you get the idea).

And I am using two images because the menu can be different sizes depending on the content (sized to the largest item), and there is a border on both the left and right hand sides, so I need two images so it displays properly.

[upl-file uuid=55f7f78b-588b-491d-9c20-9430be8b4780 size=2kB]offState.JPG[/upl-file]

[upl-file uuid=bc1d1e86-fd17-471c-a908-6158ed2fc3b6 size=2kB]onState.JPG[/upl-file]

@WebJoelFeb 08.2008 — #Thanks matt.ritter, that works almost perfectly. It works great in firefox, but in IE,...[/quote] Nor will it.

#vertnav [B].toplev:hover[/B] {

background-image: url(images/buttonOver-left.jpg);

} [/QUOTE]The psuedo-classes will only work for IE when applied to an anchor (a:hover or a.toplev:hover,), etc

@jdgauthorFeb 08.2008 — #Thanks for the response WebJoel. However, I am aware that the hover class will only work on links in IE (I mentioned that I was pretty sure of this in my previous reply), but thanks for confirming what I was pretty sure was correct.

However this does not actually resolve my issue. I was already working on the assumption that hover won't work in this location for IE, but how do I fix it?

For the <LI>'s, there is the javascript workaround to apply the "over" class as an onMouseOver event. For the left pics, it is applied to a div, and trying to do the same workaround didn't work for me (see my previous reply for the code I tried to use).

Does anyone know how I would get it to apply to this left image div as well for my hover picture? I have tried adding an ID or another class to it but both attempts failed in IE.

Thanks

Jeremy

@CentauriFeb 08.2008 — #It is late at night here, so don't have much time to look at it until tomorrow, but try this :

[CODE]#vertnav .toplev {
 background-image: url(test_menu/button-left.jpg);
 background-repeat: no-repeat;
 background-position: left center;
 }
 #vertnav li:hover .toplev, #vertnav li.over .toplev {
 background-image: url(test_menu/buttonOver-left.jpg);
 }
 #vertnav .toplev a {
 background-image: url(test_menu/button-right.jpg);
 background-repeat: no-repeat;
 background-position: right center;
 text-align: center;
 }
 #vertnav .toplev a:hover {
 background-image: url(test_menu/buttonOver-right.jpg);
 }[/CODE]

You also only need to specify anything that is to [B]change[/B] in the psuedo classes.

@WebJoelFeb 08.2008 — #...However this does not actually resolve my issue. I was already working on the assumption that hover won't work in this location for IE, but how do I fix it? ...[/quote] Your page is complex and I have not loaded it to desktop for experimentation, but I'd serve the :hover to an anchor, and in the HTML, give the anchor a "self" href and "display:block;" to cause it to 'shrink wrap' to the "<li>" (thus giving the seamless appearance that it is the "<li>" that is ":hover" when ikn fact, it is really :

CSS: #vertnav [B]a.toplev:hover[/B] {

background-image: url(images/buttonOver-left.jpg);

}[/QUOTE]and

HTML:<ul id="vertnav>

<li><a class="toplev"><a href="[SIZE=3][B]#[/B][/SIZE] [B]style="display:block;[/B]"></a></li>

....

</ul>[/QUOTE] (although this may not suit your layout, as said, -I have not reviewed your code in depth..) ?

If this doesn't work, you could use:

http://www.vladdy.net/demos/iepseudoclassesfix.html

Here, the "onMouseOver/onMouseOff" is 'trained' to respond to ":hover/:link". This URL deals with TABLE layout, but it can be done non-TABLE as well.

@CentauriFeb 08.2008 — #The exstng javascript dynamically attaches the "over" class to <li>s for IE, so it is simply a matter of referencing the .toplev div via the <li> :hover/.over class.

@jdgauthorFeb 08.2008 — #WebJoel, thanks again for the response. However I can't add the hover to an anchor as I have a picture for the right that is applied to an anchor (the left pic is assigned to a div with class "toplev" that surrounds the anchor), and if I add another to the left, with my luck it will probably screw things up, but if it doesn't, it will expand the code a lot more then I want or should be needed.

Centauri, thank you as well for the response. I have it just about working now. It will display both the left and right hover pics in IE, but when I am in the sub menu's, the left pic is still the hover image (the right disappears as it should). It stays with the hover image until I leave the menu (or change to a different parent menu item, then it does the same thing).

Here is the code I have for the left hover image:

[CODE]#vertnav .toplev:hover, #vertnav li.over .toplev{
 background-image: url(test_menu/buttonOver-left.jpg);
 background-repeat: no-repeat;
 background-position: left center;
 }
 [/CODE]

As far as I can tell it's right. But I'm not sure. I think it does what it does because the <li> isn't closed right after the parent menu item, only after all the sub menu's have been added and closed. So I know why it does it, I just don't know what to do to resolve it cause I can't close the <li> any earlier. But also, it still works fine in Firefox.

Thanks again,

Jeremy

@CentauriFeb 09.2008 — #You have to decide what you want the hover image to do. If you want the top level hover image to remain in the hover state when navigating the sub menus, then the image hover must be refered to the <li> hover ([COLOR="Blue"]#vertnav li:hover .toplev[/COLOR] and [COLOR="Blue"]#vertnav li:hover .toplev a[/COLOR]). If you want the top level image to drop back to normal when navigating the sub menus (ie only change to the hover state when hovering the top level only), then the hover must be associated with the <a> hover. In this latter case, the html will have to be altered so that the <a> is the outer of the two elements containing the sliding doors image.

@jdgauthorFeb 11.2008 — #Thanks for the information Centauri, I'll give it a shot and see what I can do. I'll post back whether it resolves my issue or not.

Thanks again,

Jeremy

@CentauriFeb 11.2008 — #Using the html you have now, the following will keep the top level image in the hover state whilst traversing the sub menus :

[CODE]#vertnav .toplev {
 background-image: url(images/button-left.jpg);
 background-repeat: no-repeat;
 background-position: left center;
 }
 #vertnav .toplev a {
 background-image: url(images/button-right.jpg);
 background-repeat: no-repeat;
 background-position: right center;
 text-align: center;
 }
 #vertnav li:hover .toplev, #vertnav li.over .toplev {
 background-image: url(images/buttonOver-left.jpg);
 }
 #vertnav li:hover .toplev a, #vertnav li.over .toplev a {
 background-image: url(images/buttonOver-right.jpg);
 color: #FFFFFF;
 }[/CODE]

If you only want the top level background colour change without the image hover when using the submenus, then the images will need to be applied to the <a> and an element inside (like a span) instead of outside (the current div), and the hovers referenced to the <a> instead of <li>.

@jdgauthorFeb 13.2008 — #Thanks again for the code Centauri. After seeing it it seems so easy to get it working properly, but I couldn't figure it out. It works perfectly.

I did see your note about how to get the hover image to disappear when navigating the sub menus (hover image stays on as I'm sure you are aware), but I've decided that it's better this way anyways. However at least you have told me how to do it to remove the hover image should I choose to.

Thanks again, and hopefully I won't have to trouble everyone with my problems for a little while.

Jeremy

Also in #CSS _↴

text "form" box bigger in safari than in firefox Can't create a transparent layer above the flashfile :([RESOLVED] list

Success!

Help @jdg spread the word by sharing this article on Twitter...

Tweet This

[RESOLVED] Hover Image Change Issues

12 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

[RESOLVED] Hover Image Change Issues

12 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

12 Comments(s) _↴

Also in #CSS _↴