A List Apart Image rollover effect - need help

Has anyone seen this amazing tutorial on the list apart forum?

http://www.alistapart.com/articles/sprites/

I'm trying to adapt it to use it for the navigation on a new site and can't get it to work. My nav has 8 buttons, one on top of the other, so it's quite different from the tutorial and I just can't figure out how to adapt it.

Has anyone done this kind of thing before?

Can anyone help?

Any pointers?

 

What doesn't work for you? Is it the positioning of the elements, getting the hover to work, ...?

 

If what you're trying to accomplish is use a sprite map as a basis for your rollover images, I can give you a little tutorial toshow its use in the simplest of forms.

Rather than using two images, you instead use a single image and adjust its background position. Here we'll use this image which is 100px wide and 50px tall to accomidate buttons that are 100px wide and 25px tall.


The CSS:

<style type="text/css">
a {
	display:block;
	width:90px;
	height:25px;
	color:#fff;
	font-size:12px;
	line-height:25px;
	padding-left:10px;}
a, a:visited {
	background:url(button.gif) 0px 0px;}
a:hover, a:active {
	background:url(button.gif) 0px 25px;}
</style>

Code (markup):

dislay:block allows our links to be treated as block elements. We can then define a width and height. the width and height of our buttons are 100 and 25 respectively. Because we are using 10px of left padding for asthetic purposes, we will make the width 90 and the padding-left 10 giving us an overal width of 100px.

setting line:height to be the same as the height of our block allows the text to be vertically centered.

with a, a:visited we set the background image and the position it is in relation to the top-left corner ofour link.

with a:hover, a:active we are moving the background image up 25px giving the appearance that it is another image.

I set up an example for you to see. View the source if you have any further questions. I hope this helped.


http://greg-j.com/help/css/DP.css.rollover/one.html

 

Hi there

I never got any emails from this post so didn't know folk had replied to it. I just could get that thing to work, but will try your tutorial out Greg-J as I'm having a similar problem with this site that I'm building at the moment:

http://www.heriot-toun.co.uk/studio/index.php

I ended up creating a very long winded version of the CSS as I couldn't undertsand a lot of the elements:

<div id="navcontainer">
				<ul id="navlist">
					<li><a href="/studio/index.php" class="studio_active" title="The Studio">The Studio</a></li>
					<li><a href="/projects/index.php" class="projects" title="Current Projects">Current Projects</a></li>
					<li><a href="/gettinghere/index.php" class="getting" title="Getting Here">Getting Here</a></li>
					<li><a href="/booking/index.php" class="booking" title="Booking">Booking</a></li>
					<li><a href="/archive/index.php" class="archive" title="Archive">Archive</a></li>
				</ul>
			</div>

Code (markup):

and here's the CSS:

#navlist {
	list-style: none;
	margin: 0px;
	padding: 0px;
}

/* STUDIO LINK ################ */
.studio {
	height: 30px;
	width: 170px;
	text-indent: -10000px;
	overflow: hidden;
	background: url(assets/site_nav.gif) 0px 0px no-repeat;
	display: block;
}
.studio:hover {
	background-position: -170px 0px;
}
.studio_active {
	height: 30px;
	width: 170px;
	text-indent: -10000px;
	overflow: hidden;
	background: url(assets/site_nav.gif) -170px 0px no-repeat;
	display: block;
}

/* PROJECTS LINK ############## */
.projects {
	height: 30px;
	width: 170px;
	text-indent: -10000px;
	overflow: hidden;
	background: url(assets/site_nav.gif) 0px -30px no-repeat;
	display: block;
}
.projects:hover {
	background-position: -170px -30px;
}
.projects_active {
	height: 30px;
	width: 170px;
	text-indent: -10000px;
	overflow: hidden;
	background: url(assets/site_nav.gif) -170px -30px no-repeat;
	display: block;
}

/* GETTING LINK ############### */
.getting {
	height: 30px;
	width: 170px;
	text-indent: -10000px;
	overflow: hidden;
	background: url(assets/site_nav.gif) 0px -60px no-repeat;
	display: block;
}
.getting:hover {
	background-position: -170px -60px;
}
.getting_active {
	height: 30px;
	width: 170px;
	text-indent: -10000px;
	overflow: hidden;
	background: url(assets/site_nav.gif) -170px -60px no-repeat;
	display: block;
}

/* BOOKING LINK ############### */
.booking {
	height: 30px;
	width: 170px;
	text-indent: -10000px;
	overflow: hidden;
	background: url(assets/site_nav.gif) 0px -90px no-repeat;
	display: block;
}
.booking:hover {
	background-position: -170px -90px;
}
.booking_active {
	height: 30px;
	width: 170px;
	text-indent: -10000px;
	overflow: hidden;
	background: url(assets/site_nav.gif) -170px -90px no-repeat;
	display: block;
}

/* ARCHIVE LINK ############### */
.archive{
	height: 30px;
	width: 170px;
	text-indent: -10000px;
	overflow: hidden;
	background: url(assets/site_nav.gif) 0px -120px no-repeat;
	display: block;
}
.archive:hover{
	background-position: -170px -120px;
}
.archive_active{
	height: 30px;
	width: 170px;
	text-indent: -10000px;
	overflow: hidden;
	background: url(assets/site_nav.gif) -170px -120px no-repeat;
	display: block;
}

Code (markup):

The problem I'm having is that Internet Explorer on the Mac [yuk!] doesn't show the nav at all - you just get a white empty box and I just can't have that happening. I know I don't want to support that browser, but I know a lot of my clients customers will probably still be using that browser and I can't run the risk of having a site with no navigation.

So I will try your tutorial out. What I'm doing above is using one image for the whole nav as it meant that it would always stay the same height as the image siting next to it. With your version if someone bumps up the text size the text gets bigger but the boxes stay the same height which is not desirable....is there a way around this?