[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"> </a></div>
<div><a id="clicks" href="library.php?choice=Clicks"> </a></div>
<div><a id="nature" href="library.php?choice=Nature"> </a></div>
<div class="clear"></div>
<div><a id="voices" href="library.php?choice=Voices"> </a></div>
<div><a id="sounds" href="library.php?choice=Sounds"> </a></div>
<div><a id="noise" href="library.php?choice=Noise"> </a></div>
<div class="clear"></div>
<div><a id="drumloops"
href="library.php?choice=DrumLoops"> </a></div>
<div><a id="noiseloops"
href="library.php?choice=NoiseLoops"> </a></div>
<div><a id="soundloops"
href="library.php?choice=SoundLoops"> </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