[thelist] Easier code for 9 CSS background image rollovers?

Rick den Haan rick at countryexpress.nl
Tue Oct 5 15:54:58 CDT 2004


<quote from="Mike">
  o     Do you think that the 9 tiny images below the text might be
        misunderstood in any way by the search engines and lead to
        penalties? They aren't links, just static 1px images.
</quote>

I don't think the engines will make a big fuss about it. AFAIK, if you leave
the ALT-tags blank, the engines won't see any content there (most don't read
images anyway).

<quote from="Mike"> 
  o     Can you see a way to shorten the CSS code for the 9
        rollovers, maybe by using some inheritance?
</quote>

Here ya go:

#headerChoice {
	float:left;
	width:174px;
	height:174px;	
}

#headerChoice a {
	float:left;
	display:block;
	width:58px;
	height:58px;
}

#chords {
	background:#fff url( ../i/sounds-chords.jpg );
}
	
#chords:hover {
	background:#fff url( ../i/sounds-chords-over.jpg );
}

#clicks {
	background:#fff url( ../i/sounds-clicks.jpg );
}
	
#clicks:hover {
	background:#fff url( ../i/sounds-clicks-over.jpg );
}

Et cetera...

<quote from="Mike">
  I think a list would be uneffective because of the line breaks - ?
</quote>

I think you might get a list to work, if you add a class to every third
item... Something along these lines:

<ul id="headerChoice">
	<li><a id="chords" href="library.php?choice=Chords">&nbsp;</a></li>
	<li><a id="clicks" href="library.php?choice=Clicks">&nbsp;</a></li>
	<li class="break"><a id="nature"
href="library.php?choice=Nature">&nbsp;</a></li>
	<li><a id="voices" href="library.php?choice=Voices">&nbsp;</a></li>
	<li><a id="sounds" href="library.php?choice=Sounds">&nbsp;</a></li>
	<li class="break"><a id="noise"
href="library.php?choice=Noise">&nbsp;</a></li>
	<li><a id="drumloops"
href="library.php?choice=DrumLoops">&nbsp;</a></li>
	<li><a id="noiseloops"
href="library.php?choice=NoiseLoops">&nbsp;</a></li>
	<li class="break"><a id="soundloops"
href="library.php?choice=SoundLoops">&nbsp;</a></li>
</ul>

#headerChoice {
	list-style-type:none;
	list-style-position:outside;
	margin:0;
	margin-left:-40px;
}

/* trick for stubborn list margins: */

* html body #headerchoice {
	margin-left:0px;
}

/* end trick /*

#headerChoice li {
	display:inline;
	margin:0;
	padding:0;
}

#headerChoice li a {
	display:block;
	width:58px;
	height:58px;
}

#headerChoice li.break {
	display:block;
}

Play around with the values a bit if you're seriously considering using a
list.

Enjoy :)
Rick.



More information about the thelist mailing list