---

Jeg skal lave et lille webgalleri med klikbare thumbnails, således at når
man klikker på en thumbnail kommer billedet frem i stor størrelse
nedenunder.

Hvert stort billede skal være ledsaget af en tekst så det er nok noget med
at billedet og teksten skal ligge i et lag, en <DIV></DIV> altså.

Samtidig skal thumnailen skifte udseende så man ved at det er den man har
klikket på.

Effekten jeg vil opnå kan ses her: http://www.casabramasole.com/ klik på
"Exterior", dette er dog en Flash-løsning og det vil jeg ikke rode mig ud i.

Jeg ved ikke om det kan laves med ren CSS, tvivler på det, men eller ville
jeg blive glad for en henvisning til en JavaScript løsning.

Mvh. Stig

---

On Wed, 29 Jun 2005 18:08:37 +0200, Stig Holmberg
<stig-holmberg@tdcadsl.dk> wrote:

> Jeg skal lave et lille webgalleri med klikbare thumbnails, således at når
> man klikker på en thumbnail kommer billedet frem i stor størrelse
> nedenunder.

Her er et eksempel på, hvordan du kan gøre det.
<url:http://ryankristensen.com/tests/imggallery.html>

> Jeg ved ikke om det kan laves med ren CSS, tvivler på det, men eller
> ville
> jeg blive glad for en henvisning til en JavaScript løsning.

Hvis der kun skal bruges CSS, så er man nødt til at have alle billederne
preloaded eller åbne dem i et nyt vindue.
Følgende eksempel virker som det skal i IE. Mozilla vil ikke acceptere
a:active img (hvorfor den ikke vil det, kan jeg ikke lige gennemskue).
Hvis du også vil have Opera med her, så skal du manuelt ind og indsætte
nogle transparente png'er, modsat ovenstående eksempel hvor et javascript
automatisk ordner det.
<url:http://ryankristensen.com/tests/imggalleryIE.html>
Men der er ingen grund til at lave det uden javascript, så længe man bare
sørger for, at det også virker uden.

Der er i øvrigt ingen grund til at sende det samme indlæg i html og
clientside, hvis du føler der er behov for det, så benyt venligst
crosspost og lav follow-up til den mest relevante gruppe.

--
Ryan Kristensen

---

"Ryan Kristensen" <ryankristensen@hotmail.invalid> skrev i en meddelelse
news.ss5dczvoxxz6q7@news.inet.tele.dk...
> On Wed, 29 Jun 2005 18:08:37 +0200, Stig Holmberg
> <stig-holmberg@tdcadsl.dk> wrote:
>
>> Jeg skal lave et lille webgalleri med klikbare thumbnails, således at når
>> man klikker på en thumbnail kommer billedet frem i stor størrelse
>> nedenunder.
>
> Her er et eksempel på, hvordan du kan gøre det.
> <url:http://ryankristensen.com/tests/imggallery.html>
>
>> Jeg ved ikke om det kan laves med ren CSS, tvivler på det, men eller
>> ville
>> jeg blive glad for en henvisning til en JavaScript løsning.
>
> Hvis der kun skal bruges CSS, så er man nødt til at have alle billederne
> preloaded eller åbne dem i et nyt vindue.
> Følgende eksempel virker som det skal i IE. Mozilla vil ikke acceptere
> a:active img (hvorfor den ikke vil det, kan jeg ikke lige gennemskue).
> Hvis du også vil have Opera med her, så skal du manuelt ind og indsætte
> nogle transparente png'er, modsat ovenstående eksempel hvor et javascript
> automatisk ordner det.
> <url:http://ryankristensen.com/tests/imggalleryIE.html>
> Men der er ingen grund til at lave det uden javascript, så længe man bare
> sørger for, at det også virker uden.
>
> Der er i øvrigt ingen grund til at sende det samme indlæg i html og
> clientside, hvis du føler der er behov for det, så benyt venligst
> crosspost og lav follow-up til den mest relevante gruppe.
>
> --
> Ryan Kristensen

Jeg siger tak for eksemplerne, der er noget at bygge videre på, kan ikke
lige overskue om det kan forsvares at anvende opacity CSS´en på
thumbnailsene, det er CSS 2 ikke? det er i alt fald at være på forkant.

Crossposter næste gang.

Mvh. Stig

---

On Thu, 30 Jun 2005 23:20:46 +0200, Stig Holmberg
<stig-holmberg@tdcadsl.dk> wrote:

> Jeg siger tak for eksemplerne, der er noget at bygge videre på, kan ikke
> lige overskue om det kan forsvares at anvende opacity CSS´en på
> thumbnailsene, det er CSS 2 ikke?

Opacity er CSS3, og understøttes pt. kun af Mozilla, tidligere Mozilla
udgaver brugte -moz-opacity.
Konquerer (og Safari?) bruger -khtml-opacity.
Og så bruger IE et filter.
Derved kan man opnå transparens i alle browsere på nær Opera. I Opera kan
man så løse det ved at bruge en transparent png-fil.

> det er i alt fald at være på forkant.

Jo, det er måske nok at være på forkant, men man kan få det til at virke i
alle nyere browsere samt IE.
Og der sker vel ikke noget ved at bruge det. Så længe siden er lavet
sådan, at den er brugbar selvom det ikke virker.

> Crossposter næste gang.

Hvis du også vil klippe i dine citater, så er det bare helt perfekt.
<url:http://www.usenet.dk/netikette/citatteknik.html>

--
Ryan Kristensen

---

"Ryan Kristensen" <ryankristensen@hotmail.invalid> skrev i en meddelelse
news.ss7d1rqwxxz6q7@news.inet.tele.dk...
> On Thu, 30 Jun 2005 23:20:46 +0200, Stig Holmberg
> <stig-holmberg@tdcadsl.dk> wrote:
>
>> Jeg siger tak for eksemplerne, der er noget at bygge videre på, kan ikke
>> lige overskue om det kan forsvares at anvende opacity CSS´en på
>> thumbnailsene, det er CSS 2 ikke?
>
> Opacity er CSS3, og understøttes pt. kun af Mozilla, tidligere Mozilla
> udgaver brugte -moz-opacity.
> Konquerer (og Safari?) bruger -khtml-opacity.
> Og så bruger IE et filter.
> Derved kan man opnå transparens i alle browsere på nær Opera. I Opera kan
> man så løse det ved at bruge en transparent png-fil.

Jeg går ud fra at Opera er den eneste browser der kan vise en transparent
png-fil og dermed er man dækket ind.

>
>> det er i alt fald at være på forkant.
>
> Jo, det er måske nok at være på forkant, men man kan få det til at virke i
> alle nyere browsere samt IE.
> Og der sker vel ikke noget ved at bruge det. Så længe siden er lavet
> sådan, at den er brugbar selvom det ikke virker.

Ja kan se at det "degrader gracefully" som man siger.

>
>> Crossposter næste gang.
>
> Hvis du også vil klippe i dine citater, så er det bare helt perfekt.
> <url:http://www.usenet.dk/netikette/citatteknik.html>

> Ryan Kristensen

Selvfølgelig har bare tit svært ved at finde ud af hvor meget man skal
klippe væk sådan at det stadig giver mening.

Mvh Stig, og tak for hjælpen.

---

"Stig Holmberg" <stig-holmberg@tdcadsl.dk> writes:

> Jeg går ud fra at Opera er den eneste browser der kan vise en transparent
> png-fil

Næh. Det er snarere IE der er den eneste browser der ikke kan (ellers skal
man tilbage til Netscape 4 og deromkring).

IE kan faktisk godt, men ikke hvis man bare laver et img-element. Så
virker transparens-kanalen ikke. I stedet kan man bruge IE's "filter"-
funktionalitet med en AlphaImageLoader (svjh). Det forstår andre så
ikke.

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'