Hoi Maarten,
In Firefox werkt het overigens wel.
Mmm, bij mij in FF3.01 niet zo erg. Gisteren schoot ik
dit screenshot (resolutie 1024x768), en vandaag flipt dezelfde Firefox helemaal (niets te zien):
- Voorafgaand aan de DOC-type declaratie (waar echt niets mag staan) staat in de html een merkwaardige javacript-codepagina regel. Google'en op die regel komt erop uit dat het waarschijnlijk een (herstelbare) Dreamweaver-fout is die dit op z'n geweten heeft.
- De plaatjes komen bij hoveren op de verkeerde plaats.
- De tekst van het citaat zit verstopt onder de vakjes.
- Er is een onnodige scrollbar links-rechts aan de onderkant, die naar lege ruimte scrollt.
Opera en Safari doen iets soortgelijks.
O ja, en in Firefox werkt het pop-up script voor de film niet.
Maar ook Internet Explorer versie 7 is
niet brandschoon.
- Hier zijn de laatste regels tekst van het citaat niet te zien, terwijl er geen rechter-scrollbar is om erbij te kunnen komen.
Maar goed, je zei:
...het kan evengoed zijn dat het met een kleine aanpassing al op te lossen valt.
Dat geloof ik niet, want de html-code is vrij onoverzichtelijk, en het zit waarschijnlijk in de (css-) positionering van de hover-plaatjes.
En je zei/vroeg:
Ik begrijp dat ik praktisch vraag: kan iemand mij een nieuw script hiervoor schrijven?
Mijn antwoord is:
nee, ik ga hiervoor geen nieuw script schrijven!
Maar wel even de code bekeken en daar eens lekker in gaan snijden: :evil:
- Die rare codepage-regel richting afvalbak.
- Het DOCtype verwijderd, en er de "strict" variant van gemaakt (veel meer kans op probleemloze cross-browser presentatie).
- Het script voor het vooraf laden van de images eruit gehaald (geeft alleen maar vertraging).
- Het pop-up script weggesneden.
- De styles die tussen de </head> en de <body> staan ( ! :shocked: ), weggehaald.
- Het attribuut scroll="no" uit de <body>-tag gehaald (ongeldige html).
- De hele inhoud van de body verwijderd, om me niet uit m'n concentratie te halen.
Zo, nu is er een mooie schone pagina om iets in te plaatsen (helemaal leeg dus)!
- Eerst eens naar de images kijken: de achtergrond is half oker en half bruin, maar liep niet naar de onderkant van de pagina door. Dat wordt dus een background-img voor de body.
- Dan de hele voorraad blokjes-afbeeldingen. Die hoeven niet! Met één gecombineerde achtergrond-afbeelding in een #wrapper-div'je ben je er ook. - Iets strakker uitgetekend, en voor het tegeltjes/glas-in-lood effect (leuke layout!) een mini-randje om elk vakje aangebracht. Kleurdiepte gereduceerd tot 256 kleuren (dat scheelt aanzienlijk in het aantal kB's), en opgeslagen.
- In de html een lijst van 4 rijen van 6 vakjes aangemaakt, die met css als onzichtbaar raster over de achtergrond komt te hangen.
- De 244x244-plaatjes geconverteerd naar jpg's met 15% compressie (zie je niets van): scheelt ook weer kB's en downloadtijd.
- De "css pop-up" techniek toegepast (zie ook hier), en de posities van de 244x244 plaatjes in de 6 kwadranten van de vakjes bepaald. - Meteen alles: zo kan er ook nog eens een plaatje in een ander vakje komen.
- De 244x244 images in de betreffende vakjes van de html gelijmd.
- De vakjes die moeten doorlinken (welkom en film) voorzien van de links; de rest heeft een "lege link" (die alleen voor de mouseover gebruikt wordt).
- En in de css het handje bij de hover-plaatjes vervangen door het gewone pijltje, zodat de argeloze bezoeker niet denkt dat er op een (vergroot) plaatje geklikt kan worden.
- Ook een hover-plaatje voor de twee Welkom's verzonnen (schoolbord met krijt leek me wel in de sfeer); anders zijn dit de enige vakjes waar niets gebeurt als je er overheen muist, terwijl je hier moet binnenkomen op de hele site erachter.
- Nu de film nog. Die komt niet met script tevoorschijn, maar met een gewone link!
- Een identieke pagina gemaakt (= copy/paste; zelfde achtergronden), maar nu alle vakjes met inhoud leeggeroofd. De 244x244 plaatjes komen hier dan niet tevoorschijn, maar dat zou alleen maar verwarrend werken als je met de muis over de pagina beweegt.
- In plaats daarvan een nieuwe <div> gemaakt waar de embedded player in zit, en die met css naar de juiste plek gerangeerd (met wat achtergrondzwart om precies de vakjes op te vullen).
- Een css-hover knopje rechtsboven in het film-vak erbij gezet, waarmee je weer terugkomt in de gewone pagina.
- Wisselen tussen de twee pagina's gaat nu razendsnel (het lijkt alsof je op één pagina blijft), want de 2 achtergrond-images zitten al in de cache van de browser - die waren al gedownload bij het bezichtigen van de eerste pagina.
Zo,
hier zijn ze dan.
Evaluatie:
- Er zitten nu 13 images in (in plaats van 29), en de totale grootte van alles bij elkaar in de startpagina is nu 220kB (in plaats van bijna 1MB: het was 876kB - geen wonder dat de plaatjes zo over het scherm dwarrelden).
- De Web Page Analyzer is dan ook in zijn nopjes: de pagina is 6x zo snel geworden.
- Hij werkt in ieder geval in Firefox 3 en 3.5, Internet Explorer 7 en 8, Opera, Safari en Chrome.
- Internet Explorer 6 pakt de hover-plaatjes niet. Waarschijnlijk is met wat css-gedoe ook IE6 aan de praat te krijgen, maar wie nu nog IE6 heeft, loopt toch wel stevige veiligheidsrisico's; de meeste IE6 gebruikers zullen nu wel 7 of 8 hebben (of een andere browser!).
- Het is valid css en valid html.
- Door er nog een (css!) onzichtbare menu-lijst in op te nemen kunnen zoekmachines makkelijk bij de vervolgpagina's komen, en is ook de toegankelijkheid gewaarborgd (dat moet nog gebeuren).
Tot zover!
Met vriendelijke groet,
CSShunter
PS: de pagina's zitten
hier, en de images zitten
hier.
[edit]O, er is dus geen javascript meer in te bekennen.
[/edit]
