Hoi trulier,
Als ik me uitschud als een hond, vliegen de zweetdruppels in het rond!
Oftewel: vreselijk puzzelen, alleen iets melden als het gelukt is, en dan achteraf net doen alsof het volstrekt logisch is (wat het eigenlijk ook is, als je de regels van de puzzel kent).
Ik heb even gekeken hoe die Porta zo'n SimpleViewer album genereert. Per album maakt ie in wezen dezelfde index.html aan, waarbij alleen de titel-namen en de onderschriften verschillen. Met javascript worden telkens de goede foto's opgehaald, zodat de images helemaal niet in de code van die index.html'en voorkomen.
Dat maakt het wel zo makkelijk!
Het bouwpakketje is nu als volgt:
- Begin met in de Verkenner in elke album-map de index.html te hernoemen tot index-oud.html (voor de reserve!).
- Een verbeterde model-pagina voor een album is: www.developerscorner.nl/csshunter/tests/laotkiekealbum-index.html (klik) *)
- Die ziet er incompleet uit, maar dat klopt (want het staat nog bij mij op de server en de verwijzingen kloppen daar niet).
- Ga in Firefox naar het Menu: Bestand > Opslaan als..., en neem de optie (onderaan): Opslaan als type: "Webpagina, alleen HTML" . Sla het op in een album-map (dezelfde directory als de index-oud.html).
- Hernoem het bestand nu in de Verkenner tot index.html.
- Kopieer het bestand in de Verkenner, en plak het in elke andere album-map.
- Open de nieuwe index.html in de eerste album-map, ga naar code-view in ExpressionWeb, en maak de aanpassingen in de titel enz. (in de code staat welke aanpassingen precies nodig zijn).
- Doe hetzelfde met elke index.html in de andere album-mappen.
- Nu alleen nog het bestand laotkieke-swfobject.js downloaden; weer Pagina opslaan als...; nu als type "Javascript Source Code".
- Deze niet van naam veranderen, maar via de Verkenner met dezelfde naam kopiëren naar alle mappen ext/js/ die onder een album zitten.
- En tenslotte alle nieuwe index.html'en en alle nieuwe laotkieke-swfobject.js'en uploaden naar de bijbehorende mappen op je server.
D.w.z. bij de eerste eerst even proberen of het goed gegaan is, en daarna de rest.
Terzijde: zeg maar "je" tegen CSShunter.
Hoe gedaan? Het grote logo gedownlaod en in PaintShopPro (een oude nr.6; ze zijn nu al op 11 of 12 geloof ik) verkleind tot het benodigde kleine formaat. Gekopieerd en met het pixel-pincet de provincie weggehaald en de hond weer compleet gemaakt. Toen ze alle twee onder elkaar in een nieuw img gezet. Dat was het minilogo zelf, dat nu een "css-sprite" geworden is.
Met css is de terug-link naar de overzichtspagina van de foto-albums precies op het formaat van de bovenste helft gezet. Het minilogo zit er als achtergrond-image in, en kan niet verder komen dan de grenzen van de link. Daarmee is de onderste helft onzichtbaar.
Maar met css kan je ook als er gehoverd wordt, iets aan de achtergrond-positie van een link doen. Die heeft nu een negatieve verticale hoogte van het logo-formaat gekregen, dus de dubbele afbeelding wordt nu voor de helft omhoog getrokken. En zo is de onderste helft zichtbaar, en de bovenste helft verdwenen (want nu valt die buiten het bereik van de link).
- Over het rangeren met achtergrond-posities: artikeltje De patrijspoort-theorie.
- Over het opschuiven van een bg-image bij een hover: artikeltje Een blokje knoppen, en dit praktijkvoorbeeld. Je hebt dan geen javascript nodig voor plaatjes-wisseling bij een mouse-over, en in plaats van de 9 images van de menu-items plus de 9 hover-varianten (samen dus 18 stuks) zit alles nu in één gecombineerd image.
Hé, dat had ik nog niet opgemerkt.
Ga ik naar kijken, en wordt vervolgd!
met vriendelijke groet,
CSShunter
_____________
*) Verwijzingen vast zoveel mogelijk omgezet naar de plek op jouw server, en nog wat aanvullende finishing tutsjes: taal van EN naar NL omgezet, het laotkieke-favicon er in i.p.v. het Porta-ding, paar aanvullende styles voor de #flashcontent, <noscript> ingebouwd voor als mensen wel de Flash-player hebben maar javascript uit hebben staan (dan zien ze niet dat ze Flash moeten installeren, maar dat ze javascript moeten aanzetten), en de noScript/noFlash mededelingen in het NL vertaald voor de vriendelijkheid.
