Hoi jeel2008 e.a.,
Ik was de laatste dagen ook wat aan 't prutsen met de vlek op vlek, en gedurende de bezigheden zag ik regelmatig nieuwe testen opduiken, met vaak wat andere randvoorwaarden. Maakte dat ik ook wat zigzaggend moest bijstellen, en ik wat later reageer dan het plan was.
Maar goed, wat dacht je van een javascriptje van 2.7kB en zoiets in de html:
HTML:
<p><img id="logo" src="images/vv-logo.png" alt="" /></p>
<ul id="hovercontainer">
<li id="visiedoel">
<a href="pagina-x.htm" onmouseover="fadeIn(0)" onmouseout="fadeOut(0)">
<em>Visie & doel</em>
<span onclick="return false"><!-- ! --></span></a>
</li>
<li id="dagbesteding">
<a href="pagina-y.htm" onmouseover="fadeIn(1)" onmouseout="fadeOut(1)">
<em>Dagbesteding</em>
<span onclick="return false"><!-- ! --></span></a>
</li>
<li id="nachtbesteding">
<a href="pagina-zzz.htm" onmouseover="fadeIn(2)" onmouseout="fadeOut(2)">
<em>Nachtbesteding</em>
<span onclick="return false"><!-- ! --></span></a>
</li>
</ul>
Dan is de hele jQuey-bieb van 92.6kB niet nodig, en ben je ook af van de in-page scripts om die aan de praat te krijgen.
=======
In den beginne
Afijn, om bij het begin te beginnen ...
Het script van Naarling in nummer #3 hierboven (
hier in de praktijk) ging gepaard met: "Nadeel van deze methode is wel dat de verborgen afbeelding ook verschijnt als je over de grote afbeelding heen gaat."
Dat is te ondervangen door de standaard logo-achtergrond uit de container van alles te halen, en die los op de pagina te zetten. Dan heeft de .container:hover {...} alleen invloed bij hoveren over de bollekes, die ver van het logo af staan.
=======
Bolletjes in meervoud
Het zat er al aan te komen dat het meer dan 1 bolletje zou worden, dus (volgens het principe van het "
gelaagd bouwen") begonnen met een kale versie, nog zonder scriptwerk.
In feite gaat het om een rijtje links, die ook zonder images en zonder css door een textbrowser en een voorleesbrowser op te pakken moeten zijn.
Een rijtje? Dus een <ul><li> list.
Voor deze basis is dit voldoende:
HTML:
<p><img id="logo" src="images/vv-logo.png" alt="" /></p>
<ul id="hovercontainer">
<li id="visiedoel">
<a href="pagina-x.htm">
<em>Visie & doel</em>
<span><!-- ! --></span></a>
</li>
<li id="dagbesteding">
<a href="pagina-y.htm">
<em>Dagbesteding</em>
<span><!-- ! --></span></a>
</li>
... enz.
</ul>
Alle kleine en grote images behalve het logo zijn gepromoveerd tot background-images, dat schoont de html-code mooi op: en in de css zijn ze makkelijk terug te vinden een aan te vullen.
Code:
#visiedoel a { background: url(images/vv-bollen-sprite.png) }
#visiedoel span { background: url(images/vv-visiedoel-groot.png) }
#dagbesteding a { background: url(images/vv-bollen-sprite.png) -105px 0 }
#dagbesteding span { background: url(images/vv-dagbesteding-groot.png) }
... enz.
Daarbij kunnen alle kleine bollen opgenomen worden in één gecombineerde
vv-bollen-sprite.png, dat scheelt een heel riedeltje http-requests en maakt de pagina sneller.
Via de id's van de <li>'s komt telkens de goede grote afbeelding in de bijbehorende <span>.
De <em>'s met de linknamen zijn voor de toegankelijkheid: ook zonder images en css zijn die aanwezig.
Voor op het scherm worden die namen weggewerkt achter de bolletjes (waarvoor ze niet te lang mogen zijn).
=======
Het faderen
Hiervoor is javascript van stal gehaald, en zwoegend in de najaarsstormen kwam er uiteindelijk toch iets eenvoudigs uit (de tussenliggende omzwervingen zal ik je besparen
)
Een paar van de valkuilen:
- Als tijdens een hover weggehoverd wordt van een bolletje, moet het in gang gezette infaden acuut stoppen als het nog niet klaar was.
- En dan moet het uitdoven niet vanaf 100% zichtbaar gaan, maar vanaf de opacity die het infaden op dat moment bereikt had.
- Dit geldt voor elk item apart, want de één moet kunnen infaden terwijl de andere aan het uitfaden is.
- Bij het weghoveren vanaf een bol mag de top="50%" niet teruggezet worden naar top="-10000px" (zoals de css voorschrijft), want de grote afbeelding moet nog blijven hangen terwijl het uitfaden plaatsvindt.
- Maar daarna moet de grote afbeelding (die er ondanks z'n 0-opacity nog steeds is!) wel fluks uit de span weg, omdat anders een hover over het logo weer infaden zou veroorzaken (want de span zit binnen de <a> die het zaakje triggert)!
Van dat soort. -Wat toelichting staat in de broncode.
=======
Vlekjes weghalen
Zover gekomen, is het tijd om de css en het script buitenboord te zetten.
- Daarmee kwam het tot deze: multiple-hoverfader.php
- Bijbehorend: multiple-hoverfader.css
- Bijbehorend: multiple-hoverfader.js
- Hij is IE7-bestendig.
- Alleen bij heel snel heen&weer muizen tussen twee bolletjes blijft een enkele keer het infaden achterwege (de volgende keer gaat het weer goed).
- Gelukkig heb je in je laatste versie de absolute verticale positie op de helft van de pagina er uit gehaald, want dat geeft ernstige problemen bij minder hoge beeldschermen/windows. - Wilde ik in een PS op wijzen, maar hoeft nu niet meer. Staat er in mijn css-versie nog wel in!
Voldoet dit aan de eisen?
Met vriendelijke groet,
CSShunter
