Hoi-hoi,
Ik denk niet dat dat het antwoord is: het zit 'm er in dat de grote images rechtstreeks als bron (
src) voor een <iframe> worden opgegeven.
- Dan gaat het alléén goed in Firefox en Opera (die verkleinen dan het image tot het past in de maten van het iframe), en in alle andere browsers (Chrome, Safari en alle versies van Internet Explorer) gaat het mis: dan wordt het image op ware grootte weergegeven en wat niet in het iframe past wordt er af gehakt.
Een oplossing zou kunnen zijn om die iframes tot echte html-pagina's te maken, en met de css daarin dan het formaat van de images te bepalen. Dan zou voor elke grote afbeelding zo'n extra pagina gemaakt moeten worden...
Maar ... de pagina zoals die nu is, is een beetje een merkwaardig samenstel van frames (o.a. framesets in frame-pagina's) en iframes. Dat maakt het er niet makkelijker op.
Gelukkig is er een alternatief:
- De pagina opbouwen met <div>'s en css, dan zijn er helemaal geen frames en iframes meer nodig, en ook geen extra pagina's.
- Voor gelijkblijvende elementen op alle pagina's, zoals het menu en de footer, kan een php-include gebruikt worden (zie hier).
- Voor het tonen van de thumbnails op groot formaat kan een javascriptje van 1 regel dienen, dat telkens de grote afbeelding in zijn vakje plaatst.
Test: nilix-nw.htm
Toelichting:
- Alle css is hier vervangen door css in de <head> van de pagina; dat kan later verhuizen naar een los css-bestand.
- De grote images worden in het blok van 600*600px gedwongen door een {max-width: 600px} en een {max-height: 600px} voor de grote images op te geven, en geen maten in de html op te geven. Bij verkleining blijft dan de verhouding breedte/hoogte gehandhaafd en worden de foto's niet uitgerekt.
- De links voor de grote afbeeldingen met href="volporl.php?num=1.jpg" (een speciale php-pagina) is niet nodig. Dat kan hgewoon de plaats van de grote afbeelding zijn: href="fotoportret/1.jpg".
- Op deze links bij de thumbnails wordt een onclick-actie gezet: onclick="showBig(this); return false;". Hiermee wordt een functie showBig in werking gezet, terwijl het "return false" betekent dat daarna niet ook nog eens de link wordt geopend (wat vervanging van de pagina zou geven).
- De showBig(t)-functie bestaat uit de opdracht om de bestaande vindplaats van de grote foto te veranderen in de vindplaats van de nieuwe (die in de link staat; dat is de "this"):
[JS]function showBig(t){
document.getElementById('bigImage').src=t.href;
}[/JS]
- De aanwezige gradualfader blijft gewoon zijn werk doen.
Tenslotte zou het handig zijn om de thumbnails niet dezelfde grote images te laten zijn (verkleind door de browser), maar er echte kleintjes van te maken: dat scheelt enorm in de downloadtijd van de pagina.
Met vriendelijke groet,
CSShunter
_______
PS
@nloomans: (welkom op het forum!
) - De
les8.php van
webles.nl staat bol van de fouten! Geen wonder, want blijkens het internet-archief is deze pagina van december 2004 (
zie hier), dus ruim 8 jaar oud - en is sindsdien ongewijzigd.
Maar in die 8 jaar is er ontzettend veel veranderd!
- Bijvoorbeeld er wordt gesproken over "Omdat er aardig wat mensen NSN gebruiken, ...". Nou, met "NSN" wordt bedoeld NetScape Navigator: dat is een browser die al in begin 2008 de laatste adem uitblies en door niemand meer gebruikt wordt.
- In 2004 was de ondersteuning van css (met name door Internet Explorer) niet om over naar huis te schijven. Dat is de laatste 8 jaar aanzienlijk verbeterd, en bijna alle css2.1 wordt nu door IE ondersteund (en ook nog wat css3, in de laatste versies).
Verder wordt in deze les verzuimd te melden dat een z.g. "Doctype" essentieel is voor een goede cross-browser weergave, wordt verzuimd te melden dat een <meta>-tag met de z.g. "charset" even essentieel is voor goede weergave, en wordt een afgekeurde eigenschap als "bgcolor" gebruikt.
Ook staat er bv. te lezen
"Verder staat het altijd wel leuk, dat als je je muis stilhoud op je plaatje, dat er een tekst verschijnt. Dit kun je waarmaken door de ALT opdracht in de <IMG SRC> tag op te nemen. "
Nietes!
Dit geldt alleen voor Internet Explorer, en is eigenlijk een fout van IE. Een alt="..." omschrijving bij een image is alleen bedoeld om weergegeven te worden als het image
niet getoond wordt, en niet als het
wel getoond wordt. Wil je bij hoveren over een image een tooltip die wel getoond wordt in alle browsers, dan moet je de title="..." eigenschap gebruiken.
