[CSS] onmouseover thumbnail zonder Javascript

[Verwijderd]

Ik wil het volgende maken:

-> rijtje thumbnails
-> met je muis eroverheen
-> in <div id="image" ><img src="standaard_1e_plaatje.jpg"></div> wordt het grote plaatje getoond.

Ik geloof dat je dit kan maken met JavaScript met onmouseover. Maar dit gebruik ik liever niet, omdat gebruikers JavaScript kunnen uitschakelen en dan werkt het niet meer.

Nu mijn vraag. is dit te maken zonder JavaScript?
Zo ja, kan dat dat met CSS? bv met z-index o.i.d.?
Hiervoor zou je denk ik met ".thumbnail:hover", "#image" op z-index: 1 moeten zetten. Al vraag ik mij af of dat kan.

Hierbij moeten natuurlijk ook nog alle grote afbeeldingen ge-preload zijn, anders werkt het denk ik ook niet.

Graag jullie advies hierbij.

Alvast bedankt!

-- edit --

Ik heb op deze site nog wat interessants gevonden: http://home.planet.nl/~cruqsoft/fotoshow.html
Het lijkt er een beetje op. Alleen komen de images (images)uit een map en de thumbs ook (images/thumbs/). De thumbs en de image zitten ook niet tegen elkaar:
________
| .............|
| ..image..|
| .............|
|--------------|
|..th1 th2..| duidelijk?

De images en de thumbs, kunnen regelmatig wisselen, dat is dus het nadeel van het voorbeeld in de link. De thumb en de image zitten in 1 bestand.

[ Voor 33% gewijzigd door Verwijderd op 23-08-2007 20:33 . Reden: stukje vergeten ]

[Verwijderd]

css kan je net zo goed uitzetten...

kan wel op zich (maar niet zoals je zegt), maar dan moet je
a) alle plaatjes sowieso inladen (dus dan is het nut van de thumbs een beetje weg)
b) de boel wel raar in elkaar zetten, namelijk :hover over een container element van je twee plaatjes (thumb en origineel) en dan het origineel met absoluut positioneren ergens anders neer zzetten

[ Voor 3% gewijzigd door Verwijderd op 23-08-2007 20:10 ]

[funkwurm]

Verwijderd schreef op donderdag 23 augustus 2007 @ 20:09:
css kan je net zo goed uitzetten...

De gebruiker kan ook de browser afsluiten...

Ik denk dat je je javascript unobtrusive moet maken. Je kunt er bijvoorbeeld met simpele html voor zorgen dat als een thumbnail geklikt wordt, dat het grote plaatje dan ernaast weergegeven wordt. Dit kan met een iframe of liever misschien met een div die overflow:hidden heeft en dan linken naar de ankers die de verschillende plaatjes in beeld "scrollen".

Als je daar bovenop de javascript mouseover implementeerd werkt het in bijna alle browsers zoals je wil, en die paar mensen die javascript uit hebben staan hebben een html-alternatief.

[Zoefff]

Natuurlijk kan dat met CSS.

HTML:

<img class="thumbnail" src="thumbnail.png" alt="thumbnail" />
<img class="fullsize" src="fullsize.jpg" alt="fullsize" />

Cascading Stylesheet:

img.fullsize {
  display: none;
}

img.thumbnail:hover + img.fullsize {
  display: block;
  position: absolute;
}

Uiteraard moet je dan nog wel het een en ander knutselen met de positionering, maar bovenstaande CSS is de basis. Dit werkt overigens niet in IE6 omdat de adjacent selector niet ondersteund wordt. Daar zal je dus alsnog een Javascript oplossing voor moeten verzinnen (met behulp van jquery of een andere javascriptlibrary natuurlijk ook maar een enkele regel code).

[BtM909]

funkwurm schreef op vrijdag 24 augustus 2007 @ 02:49:
[...]

De gebruiker kan ook de browser afsluiten...

Waarom is deze commentaar aan mophor gericht

Ik denk dat je je javascript unobtrusive moet maken. Je kunt er bijvoorbeeld met simpele html voor zorgen dat als een thumbnail geklikt wordt, dat het grote plaatje dan ernaast weergegeven wordt. Dit kan met een iframe of liever misschien met een div die overflow:hidden heeft en dan linken naar de ankers die de verschillende plaatjes in beeld "scrollen".

Met een div ontkom je dan ook niet aan Javascript en volgens mij was dat juist de vraag van TS

[crisp]

funkwurm heeft wel gelijk: dit is overduidelijk behaviour en moet je dus oplossen met standaard behavioral elements in HTML eventueel enhanced met unobtrusive scripting. CSS is hier niet voor bedoelt.

[funkwurm]

BtM909 schreef op vrijdag 24 augustus 2007 @ 09:24:
[...]

Waarom is deze commentaar aan mophor gericht

[...]

Met een div ontkom je dan ook niet aan Javascript en volgens mij was dat juist de vraag van TS

Met mijn commentaar richting mophor wil ik aangeven dat je ook tot in het absurde rekening kan willen houden met de mogelijkheden van de gebruiker, maar dat dat op een goed moment ook gewoon geen zin meer heeft. Javascript wordt nog wel eens uitgeschakeld dus moet je die waar mogelijk unobtrusive houden, maar het is onzin om je pagina zo te willen maken dat mensen zonder javascript en zonder css ook precies zien wat jij in je hoofd had.

De methode waar ik op duid demonstreer ik voor het gemak even alhier. Deze manier werd/wordt veel toegepast bij profiel-sites als cu2 omdat je daar geen javascript hebt en maar 1 pagina om te vullen. Als je dit combineert met wat zoeff voorstelt heb je jezelf aardig ingedekt, alleen de mensen die dan IE hebben en javascript uitgeschakeld zullen moeten klikken, de rest kan "hoveren".

offtopic:
Hoi crisp, thnx

[Verwijderd]

Thnx voor de reacties.

Een kleine waarschuwing dat het zo moet:

HTML:

<img class="thumbnail" src="thumbnail1.png" alt="thumbnail" />
<img class="fullsize" src="fullsize1.jpg" alt="fullsize" />

<img class="thumbnail" src="thumbnail2.png" alt="thumbnail" />
<img class="fullsize" src="fullsize2.jpg" alt="fullsize" />

en niet zo mag:

HTML:

<img class="fullsize" src="fullsize1.jpg" alt="fullsize" />
<img class="fullsize" src="fullsize2.jpg" alt="fullsize" />

<img class="thumbnail" src="thumbnail1.png" alt="thumbnail" />
<img class="thumbnail" src="thumbnail2.png" alt="thumbnail" />

had mij een vrije middag kunnen schelen.


Maar uiteraard bedankt!

offtopic:
Ik dacht dat ik dit op een ander forum had geplaatst en "wachtte" op een email dat er gepost was. Vandaar dat ik niet eerder reageerde. Gelukkig dat ik via google op mijn eigen post kwam.

[Verwijderd]

Je zult per website de systeemgrens moeten vast stellen, kijk naar je doelgroep. Als je een dynamische site gaat maken verwacht je geen omatjes van 80 jaar ofwel? Je kunt er veilig vanuit gaan dat 95% van jou bezoekers IE6+ of FF2 gebruikt met javascript enabled simpelweg omdat de gemiddelde gebruiker niet eens weet hoe en waar hij dit uit moet zetten.

Het is ook een kunst om javascript fueled sites te maken die ook sierlijk degraderen als javascript for some reason uitgeschakeld is.

Overgens geloof ik niet dat deze oplossing buiten FF2 om gaat werken. Volgens mijn weten is het <a> element de enige die crossbrowser de :hover selector onderdersteunt.

[Padschild]

Verwijderd schreef op donderdag 30 augustus 2007 @ 11:30:
Overgens geloof ik niet dat deze oplossing buiten FF2 om gaat werken. Volgens mijn weten is het <a> element de enige die crossbrowser de :hover selector onderdersteunt.

Correct, een :hover wordt in IE6 niet ondersteund op andere elementen dan <a>, in IE7 kan echter wel op elk element een :hover gebruikt worden.

Hoe het zit met andere browsers weet ik niet, volgens Quirksmode.org ondersteund het gros van de browsers het wel:

http://www.quirksmode.org/css/contents.html

Maar ik denk dat de TS zich nogal lelijk aan het inkapselen is als hij ervan uit gaat dat JavaScript is uitgeschakeld. Een hoop mensen gebruiken nog IE6, zoals j.ostie al aangaf, en dan zou ik de afweging maken om toch voor een javascript oplossing te gaan.

[Verwijderd]

Van een vriend van mij kreeg ik de volgende link en werkt perfect. Ook met IE6

http://www.dynamicdrive.c...y/item/css-image-gallery/