Topic: Random :Hover Backgrounds.

I have a menu of 3 list items. inside each list item is a link. I have the hover property of the li set to show a random background image, however when I hover over the link inside of the li the background image changes again. I don't want this, in fact I would prefer if the whole li acted as the link. I tried making code like this: [code]li a { height: 100%; width: 100%} in the hopes that the link would then fill up the li but no luck. Here is the page. BTW only the first menu item uses the javascript code for random background images. I would much prefer to use PHP but the php script I've been using will pick a random image once and not reset it each time another hover is preformed. If you guys could help diagnoses this I would be very greatful, I'm willing to use totally different code but I would definetly like to avoid the javascript if at all possible. My css is http://www.milkstreetmedia.com/styles/main.css

Thanks,
Schitzoboy

Setting the width and height of the A has no effect if you leave them in display:inline; ( their default display type ).

Also, IE6- only support the :hover pseudo-class on A, therefore li:hover does not work.

What I suggest is to do something like:

#navlist li a
{
	display:block;
	background:url(images/paint/cssSprite.png) no-repeat 0px 1000px;
}
#navlist li a:hover
{
	height:120px; /* height of the paint splashes */
}
#navlist li.paint_0 a:hover
{
	background-position:0px 0px;
}
#navlist li.paint_1 a:hover
{
	background-position:0px -200px; /* 1x the width of the links/paint splashes */
}
#navlist li.paint_2 a:hover
{
	background-position:0px -400px; /* 2x the width of the links/paint splashes */
}
#navlist li.paint_3 a:hover
{
	background-position:0px -600px; /* 3x the width of the links/paint splashes */
}

And add a random class ( paint_0 -> paint_N ) on the LI when you generate the markup of the page. The "bad" thing about this suggestion is that the A "grows" when hovered

For more randomness, the random class can be changed on each mouseover or mouseout using JavaScript.

Hope that helps.



(Edited by poi on 03-16-2008 05:36)

Aww damn, I dunno why I didn't think of the background-position trick, i've used it before. Thanks! I got it working much better here: http://www.milkstreetmedia.com/two.html

Glad that helped.

Two last things :

1. changing the class onmouseover shows the previous paint splash for the split of a second. Do the class change onmouseout and put an arbitrary paint_N class in the markup of the LIs and voila.

2. It would be nice if the JavaScript, including the event listener, where not in the markup. Something as simple as the code below should do the trick :

onload = function()
{
	var navlist = document.getElementById('navlist');
	if( !navlist )
		return;

	navlist.onmouseout = function( event )
	{
		var	event	= event||window.event;
		var	src		= event.target||event.srcElement;
		
		//	go up until we find the LI or the UL
		while( src!=navlist && src.nodeName.toLowerCase()!='li' )
			src	= src.parentNode;
		
		//	we hit the UL --> ciao
		if( src==navlist )
			return true;

		//	we hit a LI --> change className
		src.className = 'paint_'+ Math.round( Math.random()* 3 );

		//	stop propation of the event if possible
		if( event.stopPropagation )
			event.stopPropagation();
		return false;
	}
}

Of course that code could/should be beautified and made more generic and "standalone", but it works fine in IE7-8, Op9.5, Ff3 and Sf3

So long,

I hate to admit it, but you're getting a lil' too advanced for me and I'm a bit lost Its been a long while since I've worked in javascript but its coming back to me. I haven't seen the split second error you're talking about. I'm running firefox on linux. What browser do you see that error in? I'll have to keep my eyes on that. Not seeing it though makes it hard for me to implement your correction since I can't tell if I've fixed it or not. Also, I need some help understanding your code. I know that you can define funtions like random = function() {} but I've not done it before. Is there an advantage to doing it that way? Also you've named a function onload and onmouseout. Does that negate the need for onload= and onmouseout= in my html? If so then that is awesome. I dig externalizing the javascript as muchas possible and making my HTML cleaner.
Again, thanks for the help... now I'm gonna go try to install IE under linux so I can test this stuff out.

On your page, fixing the split second issue is just a matter of replacing onmouseover='...' by onmouseout='...' in the markup.

I only noticed it in a 2-3 months old beta of Opera 9.5, so this might well be a bug. OTOH I can see why this could happen : the :hover could very well kick in before JavaScript catches the mouseover event.

Regarding your JavaScript questions:

• no, there is no particular advantage in declaring regular function using the syntax: var foo = function(){}
  
  
• yes, it's possible to add event listeners by doing anElement.onNameOfAnEvent = function( event ){}. This is not the most elegant way to do so, but it's certainly the most cross-browser way. IE does not support the standard way of adding event listeners.
  
  
• yes, adding the event listeners in JavaScript negates the need for them in the markup, which makes the markup much cleaner, easy to maintain without breaking any additionnal behavior.

I just noticed that the vertical centering fails in IE8 ( things are at the top ), and Sf3 (things expend on the entire page )