Daar ontsnapte toch een spontaan "Hallo Marie!" uit mijn lippen, toen ik de de code van bovenstaande javascript-oplossing zag. Maar toen zag ik ook:
Dat verklaart veel!
- Het was toen 3 jaar vóór de geboorte van Firefox.
- Het was de tijd van Internet Explorer 4 en 5 en Windows 98 (IE 6 zou in Amerika pas eind augustus 2001 losgelaten worden, als onderdeel van de toen kersverse Windows XP).
- IE4 ondersteunde onvoldoende css: toen nog het toch al beperkte CSS-1; inmiddels is er al jarenlang CSS-2.1, en langzamerhand (héél langzamerhand
) is Microsoft met IE8 aan het begrijpen wat de css-standaarden zijn.
- Ook Netscape (nummertje 4) was in 2001 nog volop aanwezig; intussen is de laatste versie Netscape 9 al weer geruime tijd van het browser-strijdperk verdwenen.
- En nieuwe sterren aan het browser-firmament zijn verschenen: verschillende versies Opera, Safari, en nu ook Chrome. Allemaal behoorlijk css-standaard-vriendelijke browsers!
Kortom, om met
een bekend iemand te spreken:
Dus
het kan wel met javascript, maar dan zou
een zekere update niet misstaan.
Hoewel:
het kan ook met alleen css, dan heb je helemaal geen javascript nodig. Vind ik eigenlijk wel zo charmant - en bezoekers die surfen zonder javascript of met de tab-toets om de links af te wandelen (bv. mensen die geen muis kunnen bedienen), kunnen dan ook van de plaatjes genieten.
Hieronder volgt de code, wel een lapje (de css kan nog gecomprimeerd worden), maar in de html is het opeens kinderlijk eenvoudig geworden. Vergelijkenderwijs: met bovenstaand script is de html (
excl. images): 3,7kB; de onderstaande css-oplossing is 4,1kB (
incl. het ene image).
Maar eerst de testpagina, bij mij draaiend op IE 6, 7 en 8, Firefox, Opera, Safari en Chrome. *)
Met vriendelijke groet,
CSShunter
*) IE 6 en 7 hebben last van de "doubled margin at float bug", die in dit geval met de
normale middelen niet te bestrijden zijn. Vandaar een Conditional Comment, waarin tevens afgerekend wordt met de clear-height bug (IE6 en IE7 kennen meer hoogte toe dan de opgegeven 1px).
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="nl">
<title>fun 11 - css variant</title>
<!-- This page created on Friday, october 30, 2009 -->
<!-- http://www.helpmij.nl/forum/showthread.php?t=466191 -->
<!-- IE bug: zie http://www.positioniseverything.net/explorer/doubled-margin.html -->
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: "Trebuchet MS", trebuchet, arial, verdana, sans-serif;
background: #ffffcc;
color: #000;
}
.clearLeft {
clear: left;
height: 1px;
margin-bottom: -1px;
}
#menu {
width: 642px;
margin: 20px auto 0 auto;
padding: 5px 0;
background: #000083;
color: white;
text-align: center;
}
#menu ul {
list-style: none;
margin: 0 0 0 110px;
padding: 0;
}
#menu li {
float: left;
margin: 0 2px;
padding: 0;
}
#menu a, #menu a:link span, #menu a:hover span {
width: 100px;
height: 40px;
display: block;
padding: 0;
background: url(images/fun-11.png);
text-decoration: none;
}
#menu a:visited span { background: none; }
#menu a:hover span,
#menu a:focus span { background: url(images/fun-11.png); }
#menu #home a { background-position: 0 0; }
#menu #fotos a { background-position: -100px 0; }
#menu #videos a { background-position: -200px 0; }
#menu #links a { background-position: -300px 0; }
#menu #contact a { background-position: -400px 0; }
#menu a:link,
#menu a:visited { border: 1px solid #855364; outline: 0; }
#menu a:hover,
#menu a:focus { border: 1px solid #00C000; }
#menu a:active { border: 1px solid #855364; }
#menu a span { position: absolute; margin-left: -9999px; }
#menu a:hover span { position: relative; }
#menu #home a:hover span,
#menu #home a:focus span { margin-left: -108px; background-position: -500px 0; }
#menu #fotos a:hover span,
#menu #fotos a:focus span { margin-left: -214px; background-position: -600px 0; }
#menu #videos a:hover span,
#menu #videos a:focus span { margin-left: -320px; background-position: -700px 0; }
#menu #links a:hover span,
#menu #links a:focus span { margin-left: -426px; background-position: -800px 0; }
#menu #contact a:hover span,
#menu #contact a:focus span { margin-left: -532px; background-position: -900px 0; }
/* <de <span><span>'s zijn toegevoegd voor accessibility voor tekst-browsers (en Google!) */
#menu a span span,
#menu a:hover span span,
#menu a:focus span span,
#menu a:visited span span {
position: absolute;
margin-left: -9999px !important;
}
#smile { position: absolute; top: 50%; width: 100%; text-align: center; }
#validatie { position: absolute; bottom: 20px; width: 100%; text-align: center; }
</style>
<!--[if lt IE 8]>
<style type="text/css">
.clearLeft { margin-bottom: -6px; }
#menu #home a:hover span { margin-left: -212px; }
#menu #fotos a:hover span { margin-left: -424px; }
#menu #videos a:hover span { margin-left: -636px; }
#menu #links a:hover span { margin-left: -848px; }
#menu #contact a:hover span { margin-left: -1060px; }
</style>
<![endif]-->
</head>
<body>
<div id="menu">
<ul>
<li id="home"><a href="home.htm"><span><span>Home</span></span></a></li>
<li id="fotos"><a href="./"><span><span>Foto's</span></span></a></li>
<li id="videos"><a href="./"><span><span>Video's</span></span></a></li>
<li id="links"><a href="./"><span><span>Links</span></span></a></li>
<li id="contact"><a href="./"><span><span>Contact</span></span></a></li>
</ul>
<div class="clearLeft"><!-- ! --></div>
</div>
<p id="smile">pure css-power<br>
<img src="images/smiley.gif" width="15" height="15" alt=""><br>
<a href="http://developerscorner.nl/csshunter/images/fun-11.png">1 img</a><br>
0 javascript
</p>
<p id="validatie">
<a href="http://validator.w3.org/check?uri=referer">naar html-validator</a> |
<a href="http://jigsaw.w3.org/css-validator/check/referer">naar css-validator</a>
</p>
</body>
</html>
