Hoi bhofkens en Milenko,
Rep-rep ... is het al 21u?
Ik ben er altijd voor, om zo min mogelijk javascript te gebruiken, als het ook met alleen css kan. Werkt altijd (bijna) hetzelfde in alle browsers, en ook als javascript uit mocht staan.
Mmm, en ik ben ook een groot voorstander van het wergwerpen van tabellen voor de opmaak.
Puntje 1
De pagina is
geen valid html, dat kan altijd roet in het eten gooien bij 1 of meer browsers.
Puntje 2: we maken een alternatief voor de scriptbende.
Uit de <head> wordt de regel:
HTML:
<script type="text/javascript" src="resource/js/algemeen.js"></script>
geschrapt, want die is niet meer nodig voor het logo-hoveren (eventueel wel nog voor iets anders op een pagina, moet je maar even kijken).
De regel:
HTML:
<body onload="MM_preloadImages('images/icoon_carwash.jpg','images/icoon_tanken.jpg','images/icoon_showroom.jpg','images/icoon_shop.jpg')">
wordt vervangen door:
met telkens de naam van de pagina als ID. Preloaden is niet meer nodig. De ID zorgt voor het automatisch leveren van de goede kleur rechterstreepje in het menu.
=======
Dan
het logo-blokje. Het hele verhaal ...:
HTML:
<td>
<table width="150" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/wit_links.jpg" alt="witlinks" width="10" height="130" /></td>
<td>
<table width="65" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<a href="javascript:;" target="_top"
onclick="MM_nbGroup('down','group1','carwash','images/icoon_carwash.jpg',1)"
onmouseover="MM_nbGroup('over','carwash','images/icoon_carwash.jpg','',1)"
onmouseout="MM_nbGroup('out')"><img src="images/bellen_grijs.jpg" alt="icoon_carwash"
name="carwash" width="65" height="65" border="0" id="carwash"
onclick="MM_goToURL('parent','carwash');return document.MM_returnValue" onload="" /></a>
</td>
</tr>
<tr>
<td>
<a href="javascript:;" target="_top"
onclick="MM_nbGroup('down','group1','tanken','images/icoon_tanken.jpg',1)"
onmouseover="MM_nbGroup('over','tanken','images/icoon_tanken.jpg','',1)"
onmouseout="MM_nbGroup('out')"><img src="images/pomp_grijs.jpg" alt="icoon_tanken"
name="tanken" width="65" height="65" border="0" id="tanken"
onclick="MM_goToURL('parent','tanken');return document.MM_returnValue" onload="" /></a>
</td>
</tr>
</table>
</td>
<td>
<table width="65" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<a href="javascript:;" target="_top"
onclick="MM_nbGroup('down','group1','showroom','images/icoon_showroom.jpg',1)"
onmouseover="MM_nbGroup('over','showroom','images/icoon_showroom.jpg','',1)"
onmouseout="MM_nbGroup('out')"><img src="images/auto_grijs.jpg" alt="icoon_showroom"
name="showroom" width="65" height="65" border="0" id="showroom"
onclick="MM_goToURL('parent','showroom');return document.MM_returnValue" onload="" /></a>
</td>
</tr>
<tr>
<td>
<a href="javascript:;" target="_top"
onclick="MM_nbGroup('down','group1','shop','images/icoon_shop.jpg',1)"
onmouseover="MM_nbGroup('over','shop','images/icoon_shop.jpg','',1)"
onmouseout="MM_nbGroup('out')"><img src="images/eten_grijs.jpg" alt="icoon_shop"
name="shop" width="65" height="65" border="0" id="shop"
onclick="MM_goToURL('parent','shop');return document.MM_returnValue" onload="" /></a>
</td>
</tr>
</table>
</td>
<td><img src="images/wit_rechts.jpg" alt="witrechts" width="10" height="130" /></td>
</tr>
</table>
</td>
... kan vervangen worden door:
HTML:
<td>
<div id="logo">
<a class="carwash" href="carwash" title="Carwash"></a>
<a class="showroom" href="showroom" title="Showroom"></a>
<a class="tanken" href="tanken" title="Tanken"></a>
<a class="shop" href="shop" title="Shop"></a>
</div>
</td>
Zo, dat ruimt alvast lekker op: weg scripts, weg tabel, weg tabellen in de tabel! :d
NB: Er is ook geen image meer te bekennen; via de css komen de images komen er in als background-image. Zo kunnen ze ook bediend worden met een css-hover.
=======
Nu naar
het menu.
Aldaar aangetroffen:
HTML:
<table width="141" cellpadding="0" cellspacing="0">
<tr>
<td width="17"></td>
<td width="113" ></td>
<td width="3"></td>
</tr>
<tr class="menuitem menuoranje active"
onmouseover="MM_nbGroup('over','','images/icoon_.jpg','',1)"
onmouseout="MM_nbGroup('out')">
<td></td>
<td><a href="HOME" class="menuoranje">HOME </a></td>
<td></td>
</tr>
<tr class="menuitem menugroen inactive"
onmouseover="MM_nbGroup('over','carwash','images/icoon_carwash.jpg','',1)"
onmouseout="MM_nbGroup('out')">
<td></td>
<td><a href="carwash" class="menugroen">carwash </a></td>
<td></td>
</tr>
<tr class="menuitem menurood inactive"
onmouseover="MM_nbGroup('over','tanken','images/icoon_tanken.jpg','',1)"
onmouseout="MM_nbGroup('out')">
<td></td>
<td><a href="tanken" class="menurood">tanken </a></td>
<td></td>
</tr>
<tr class="menuitem menublauw inactive"
onmouseover="MM_nbGroup('over','showroom','images/icoon_showroom.jpg','',1)"
onmouseout="MM_nbGroup('out')">
<td></td>
<td><a href="showroom" class="menublauw">showroom </a></td>
<td></td>
</tr>
<tr class="menuitem menuoranje inactive"
onmouseover="MM_nbGroup('over','shop','images/icoon_shop.jpg','',1)"
onmouseout="MM_nbGroup('out')">
<td></td>
<td><a href="shop" class="menuoranje">shop </a></td>
<td></td>
</tr>
<tr class="menuitem menugrijs inactive"
onmouseover="MM_nbGroup('over','','images/icoon_.jpg','',1)"
onmouseout="MM_nbGroup('out')">
<td></td>
<td><a href="go the fresh way" class="menugrijs">go the fresh way </a></td>
<td></td>
</tr>
<tr class="menuitem menuoccasions inactive"
onmouseover="MM_nbGroup('over','showroom','images/icoon_showroom.jpg','',1)"
onmouseout="MM_nbGroup('out')">
<td></td>
<td><a href="occasions" class="menuoccasions">occasions </a></td>
<td></td>
</tr>
<tr class="menuitem menugrijs inactive"
onmouseover="MM_nbGroup('over','','images/icoon_.jpg','',1)"
onmouseout="MM_nbGroup('out')">
<td></td>
<td><a href="werkplaats" class="menugrijs">werkplaats </a></td>
<td></td>
</tr>
... enz.
</table>
Daar maken we van:
HTML:
<td>
<ul id="menu">
<li class="home"><a href="http://autoboeimeer.nl/">HOME</a><span></span></li>
<li class="carwash"><a href="carwash" title="Carwash">carwash</a><span></span></li>
<li class="showroom"><a href="showroom" title="Showroom">showroom</a><span></span></li>
<li class="tanken"><a href="tanken" title="Tanken">tanken</a><span></span></li>
<li class="shop"><a href="shop" title="Shop">shop</a><span></span></li>
<li class="fresh"><a href="go%20the%20fresh%20way" title="Go the fresh way">go the fresh way</a><span></span></li>
<li class="occasions"><a href="occasions" title="Occasions">occasions</a><span></span></li>
<li class="werkplaats"><a href="werkplaats" title="Werkplaats">werkplaats</a><span></span></li>
<li>... enz.</li>
</ul>
</td>
Hier is iets toegevoegd!
Bij elk list-item zit een lege
<span></span> ingepakt. Dit is het alternatief voor alle javascript-toestanden.
Via de class van het list-item zijn al deze <span>'s apart te stylen, ook bij een hover over het item.
Het apart stylen wordt genadeloos aangepakt: de <span>'s zijn elk zo groot als een icoontje en krijgen een absolute positie, namelijk boven het betreffende partje van het logo hangend. Met een
{margin-left: -9999px;} worden ze in normale toestand buiten het blikveld van het scherm gehouden. Bij een hover over een menu-item wordt dat veranderd in
{margin-left: 0;} en is het icoontje van dienst zichtbaar.
=======
De
images.
Alle benodigde icoontjes + hun hover-varianten kunnen worden opgenomen in één "css-sprite" (gecombineerd image). Dan hoeven er geen tig losse kleintjes gedownload te worden: dat scheelt èn downloadtijd, èn alles is meteen paraat voor een hover (geen aparte preload nodig).
=======
De
css.
Op onze vereenvoudigde html-structuur kan nu een partijtje stijlregels losgelaten worden die alles in het reine brengen:
Code:
body > table {
position: relative;
}
#logo {
width: 130px;
height: 130px;
margin-left: 10px;
}
#logo a {
float: left;
width: 65px;
height: 65px;
display: block;
background: url(images/boeimeer-sprite.png);
}
#logo .carwash { background-position: 0 0 }
#logo .showroom { background-position: -65px 0 }
#logo .tanken { background-position: -130px 0 }
#logo .shop { background-position: -195px 0 }
#logo .carwash:hover { background-position: 0 -65px }
#logo .showroom:hover { background-position: -65px -65px; }
#logo .tanken:hover { background-position: -130px -65px }
#logo .shop:hover { background-position: -195px -65px }
#menu {
width: 123px;
margin: 0 0 0 17px;
padding: 0;
list-style: none;
}
#menu li {
margin: 0;
padding: 0;
line-height: 20px;
border-bottom: 1px solid #CCCCCC;
}
#home #menu .home, #menu .home:hover { border-right: 2px solid #FF8000 }
#carwash #menu .carwash, #menu .carwash:hover { border-right: 2px solid #009900 }
#showroom #menu .showroom, #menu .showroom:hover { border-right: 2px solid #00B5F0 }
#tanken #menu .tanken, #menu .tanken:hover { border-right: 2px solid #FE0009 }
#shop #menu .shop, #menu .shop:hover { border-right: 2px solid #FE7E00 }
#fresh #menu .fresh, #menu .fresh:hover { border-right: 2px solid #40FF40 }
#occasions #menu .occasions, #menu .occasions:hover { border-right: 2px solid #00B5F0 }
#werkplaats #menu .werkplaats, #menu .werkplaats:hover { border-right: 2px solid #0079A0 }
/* enz. */
#menu a {
display: block;
}
#menu a:hover {
padding-left: 10px;
text-decoration: none;
}
#menu span {
position: absolute;
left: 0;
margin-left: -9999px;
width: 65px;
height: 65px;
background: url(images/boeimeer-sprite.png);
}
#menu .carwash:hover span { top: 11px; left: 10px; margin-left: 0; background-position: 0 -65px; }
#menu .showroom:hover span { top: 11px; left: 75px; margin-left: 0; background-position: -65px -65px; }
#menu .tanken:hover span { top: 76px; left: 10px; margin-left: 0; background-position: -130px -65px; }
#menu .shop:hover span { top: 76px; left: 75px; margin-left: 0; background-position: -195px -65px; }
#menu .fresh:hover span { top: 76px; left: 75px; margin-left: 0; background-position: -260px -65px; }
#menu .occasions:hover span { top: 11px; left: 75px; margin-left: 0; background-position: -65px -65px; }
#menu .werkplaats:hover span { top: 11px; left: 75px; margin-left: 0; background-position: -65px -65px; }
/* enz. */
De relatieve positie van de hoofdtabel in de <body> zorgt voor het goede aanknopingspunt voor de absolute posities van de <span>'s.
=======
Het
resultaat
- Aldus: test-boeimeer.htm
- Draait in Firefox, Chrome, Opera, Safari en Internet Explorer 7.
- Voor deze ene keer durf ik wel te vertrouwen op IE8 en IE9.
- De html is verder nog niet gecorrigeerd.
- De icoontjes kunnen makkelijk uitgebreid worden met nieuwe voor de andere menu-items. Ter illustratie gedaan met "Go fresh" en "Werkplaats".
- Het ene img waar alles in zit is dit: boeimeer-sprite.png
Met vriendelijke groet,
CSShunter
___________
PS: De menu-items zijn nu over de volle breedte aan te klikken ipv alleen op het woord zelf.
