CSSKarma

Main Nav:

• home
• articles
• lab
• research
• portfolio
• contact

Social Nav:

• facebook
• twitter
• dopplr
• plurk
• pandora

Extra Nav:

• RSS
• Twitter
• FatFold

Reactive CSS Rollovers

About a month ago we wrapped up a really long project for a course at [college], for which I was the development lead. We ended up making some really cool apps for it ... anyway, at one point in the development I needed to find a way to rollover one area of a page and highlight something elsewhere on the page.

That sounds a bit confusing for me so, rather than show the original project due to [insert stupid lawyer crap here], I've made an example: view reactive rollovers

Cool? Cool. So that's what it needed to do, and this is how I did it:

XHTML

The XHTML structure is very imporant to me since I had to hand this off to someone with very little development knowledge, so (as always) clean code is a MUST. The first thing I did was look at the information for what it is...it's a list of things and descriptions. So I structured it as a list (most things can be put into a list, but don't go crazy with it).

<ul>

<li>
    <ul>
        <li><a href="#">My avatar<img src="bug.jpg" alt="my avatar"/></a></li>
        <li>This is the description for the above image</li>

    </ul>
</li>
<li>
    <ul>
        <li><a href="#">Some dog<img src="bug.jpg" alt="some dog"/></a></li>

        <li>This is the description for the above image</li>
    </ul>
</li>
<li>
    <ul>
        <li><a href="#">Little Fella<img src="bug.jpg" alt="swick"/></a></li>

        <li>This is the description for the above image</li>
    </ul>
</li>
</ul>

CSS

OK, first thing I did with the CSS was some resetting and centering, which isn't really important for this, so I'll move passed it.

ul li ul li * {border:2px solid #fff;} -- sets a white default border so when you hover, there's no wiggle when it changes the border width from 0 to 2px

ul li ul li:hover *{border:2px solid #036;} -- on list-item hover, show border on all elements under the list-item ("img" & "a"). This has IE6 problems.

img[alt $="my avatar"]{right:50%;top:250px;} -- grabs any image with the alt text "my avatar" and positions it. This also has IE6 problems, but its good because it forces you to use alt text, altough you can use any attribute to do this, I chose alt text.

*{margin:0;padding:0;}
html{text-align:center;}
body{text-align:left;}

ul{width:40em;list-style:none;margin:30px auto;}
ul li ul li * {border:2px solid #fff;}
ul li ul li:hover *{border:2px solid #036;}
ul li ul li img{position:absolute;height:75px;width:75px;}

img[alt $="my avatar"]{right:50%;top:250px;}
img[alt $="some dog"]{left:30px;top:100px;}
img[alt $="swick"]{left:100px;top:300px;}

IE 6 Javascript

The li:hover doesn't work in IE6 or lower so you'll need this javascript to fix that. On mouseover it writes a class called "node" to the list-item, so in the CSS you would do something like: li.node{border:1px solid red;}. I don't really have a version of IE6 with me to test this, but I've used it in the past and it's worked fine, its actually spitting out a script error on my IE6 stand alone version. So that's something to be aware of. Also, IE won't grab the attribute selectors I used (img[alt $="first bug"]{background:red;right:0;top:50px;}), so you may want to assign a class to the list item like this: <li class="first_item"> so you can target it in older browsers.

Event.observe(window, 'load', function() {
	if (!window.XMLHttpRequest) 
	{
		$$('ul').each( function(e) {
			Event.observe(e, 'mouseover', function() {
				Element.addClassName(e, 'node');
			});
			Event.observe(e, 'mouseout', function() {
				Element.removeClassName(e, 'node');
			});
		});
	}
});

So, I think it creates a nice effect when you can roll over a link and highlight the associated image and vice versa. Here's the example again. So that's all I have for now, I'm trying to write some more lately, but short on time. Anyway, I hope this helps some folks.

With_ease,
Tim