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

Mike evolt at muinar.com
Tue Oct 5 14:22:50 CDT 2004


Hi gang   :)

Just integrated a CSS background image rollover nav into my
http://flash-sounds.com/ website and upgraded code and design.

You'll see the rollover nav in the middle of the header div.
The hover states are preloaded by integrating them as tiny 1 x 1
pixel images below the main content   :)   So there's no
JavaScript needed. So far so good. Now on to my questions:

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.

o       Can you see a way to shorten the CSS code for the 9
         rollovers, maybe by using some inheritance? Currently I
         have the following:

HTML:

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



CSS:

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

#chords {
         float:left;
         display:block;
         width:58px;
         height:58px;
         background:#fff url( ../i/sounds-chords.jpg );
         }

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

#clicks {
         float:left;
         display:block;
         width:58px;
         height:58px;
         background:#fff url( ../i/sounds-clicks.jpg );
         }

#clicks:hover {
         background:#fff url( ../i/sounds-clicks-over.jpg );
         }
.
.
.
... and so on, 9 times the same pair of blocks, one pair for each nav
icon. I thought about a way to combine the common parts in one
definition and thus reducing the rest to 1 line each (the background
image), but couldn't figure it out  :P       I think a list would be
uneffective because of the line breaks - ?

Again the URL: http://flash-sounds.com/

Thanks in advance for your ideas!

Mike

PS
The site is online, so signing up will charge the credit card.
So please don't send test signups   ;)

_____  mike s. krischker  http://webdesign-schweiz.ch/
        webpro mailing list  http://webdesign-list.com/
        flashpro mailing list  http://flash-list.com/



More information about the thelist mailing list