Afbeeldingen vergroten dmv mouseover

[Chocomuffin]

Hallo,

Ik heb een pagina met allerlei kleine afbeeldingen en ik zou graag een grotere versie van deze afbeeldingen willen laten zien wanneer je er met je muis boven staat. Het liefst dat de grote en kleine afbeeldingen ook verschillende bestanden zijn (en niet dat de grote automatisch wordt verkleind tot thumbnail), omdat dit veel mooier en scherper is. Ik werk overigens met Dreamweaver.

Ik hoop dat iemand mij kan helpen, en het zou ook heel fijn zijn als het een beetje makkelijk uitgelegd wordt.

Alvast bedankt!

 

[Chocomuffin]

Om een beetje een idee te krijgen van wat ik wil:

http://www.tedbaker.com/women's/new_arrivals/list.aspx (maar dan worden de mijne rechthoekig en hoeven er niet van die kleuren aan de zijkant)

Als het mogelijk is, zou ik ook graag een link willen toevoegen in mouseover afbeelding.

 

[Goeroeboeroe]

Hallo en welkom op 't forum.
Aparte kleine bestanden is ook belangrijk omdat grote bestanden (veel) tijd kosten om te downloaden. Pas als iemand echt kiest om 'n grotere afbeelding te zien, wordt hij dan pas gedownload.
Ik begrijp uit je vraag dat je meerder thumbnails (die kleine afbeelding) op 1 pagina hebt. Je kunt JavaScript gebruiken om te doen wat jij wilt, bijvoorbeeld Lightox:
http://www.huddletogether.com/projects/lightbox2/
Daar zijn veel mensen nogal tevreden over.
Het kan ook alleen met html en css. 'n Paar voorbeelden daarvan (met uitleg) staan o.a. op http://css-voorbeelden.nl/afbeelding.html onder Thumbnails en Slideshow.
Als je nog vragen hebt, horen we 't wel.

 

[Chocomuffin]

Bedankt voor je reactie, maar het is helaas niet helemaal wat ik wil (of ik begrijp het verkeerd). Zoals ik het begrijp moet je bij Lightbox klikken op de afbeelding om een grotere versie te laten zien, maar ik zou juist willen dat je niet hoeft te klikken maar alleen maar met je muis erboven hoeft te staan. De andere site die je hebt gegeven is ook niet wat ik zoek, want ik wil juist dat de nieuwe grote afbeelding bovenop de kleine afbeelding komt, dus zonder zo'n speciale container ervoor aan te maken/ruimte op je pagina vrij te houden. Ik wil eigenlijk precies hetzelfde idee (en mijn indeling van de pagina is ook vergelijkbaar) als op de site die ik eerder hier heb geplaatst.

 

[Goeroeboeroe]

Aha, je wilt echt iets simpels. (Nee, je begrijpt Lightbox goed, je moet klikken.)
Kun je hier je code van die pagina 'ns neerzetten, of 'n link naar waar hij online staat? Op zich is het niet zo heel moeilijk, wat je witl. Alleen heb ik persoonlijk even wat weinig tijd, dus 't kan even duren. Of iemand anders moet zich er even op storten.
Moet het ook werken in IE 6? Persoonlijk ondersteun ik dat hopeloze fossiel steeds minder. Het gebruik neemt gelukkig ook vrij snel af. Je zou er ook voor kunnen kiezen om in IE 6 geen grote afbeeldingen te laten zien. Als 't ook in IE 6 moet werken, moet de hele constructie namelijk totaal anders worden.

 

[Chocomuffin]

Iets simpels? Ik dacht juist dat ik iets ingewikkelds wilde, omdat ik op internet zo weinig kon vinden en wat ik kan vinden snap ik niet. (ik wil trouwens geen rollover afbeelding, als dat je oplossing mocht zijn)

Ik plaats hier liever geen link naar mijn site, maar hoeveel/welke code heb je precies nodig? Want zodra ik erachterkom hoe ik een mouseover afbeeldingen kan maken ga ik mijn hele code wijzigen.

 

[Goeroeboeroe]

Ik bedoel iets simpels in de zin van met weinig toeters en bellen. Meestal willen mensen allerlei langzaam openende en sluitende plaatjes en zo.
Het gaat me om de code van de pagina met afbeeldingen. Ik kan wel wat in elkaar knutselen, maar het is handig als dat enigszins op jouw pagina met kleine afbeeldingen aansluit.
Ik dacht zoiets: als je over 'n thumbnail hovert, opent 'n grotere afbeelding bovenop die thumbnail. Dus zoals op de pagina waar je naar linkt. Eventueel kan ook de tekst onder de thumb onder de grotere afbeelding worden gezet.
Ik zie nu trouwens dat er ook 'n link onder moet. In dat geval kan het ook simpel werken in IE 6.
Dit is relatief simpel te maken met css en html. Aangenomen dat die pagina van jou niet 'n heel ingewikkelde opmaak heeft.
Het basis-idee is ook simpel. (Heb vandaag 'n abonnement op 'simpel' geloof ik )

<a style="position: relative;" href="pagina.html"><img src="plaatje.jpg" alt="plaatje.jpg" width="200" height="100"><span></span></a>

a span {
     position: absolute;                             /* om rest pagina niet te verstoren */
     width: 400px; height: 200px;           /* om background-image in te kunnen zetten */
     left: -100px; top: -50px;                 /* positioneren t.o.v. <a> */
     display: none;                                /* verbergen */
     }

(top en left moeten even worden uitgeprobeerd)
Bij hoveren over het plaatje, dus over de link, moet er iets gebeuren. Zoals:

a:hover img {display: none;}           /* thumbnail verbergen */
a:hover span {display: block;}           /* vervangende afbeelding tonen */

 

[Chocomuffin]

Ik heb de code uitgeprobeerd, maar het werkt niet? (of kan het sowieso niet als je afbeeldingen in een tabel zitten) Ik heb trouwens die laatste code over hoveren niet toegevoegd, is dat ook nodig? Want ik wil eigenlijk niet dat ze de foto vervangen (want dan raakt mijn tabel uit zijn verband), maar dat de grote foto gewoon als een soort 2e laag erbovenop komt te liggen (en dus ook deels de kleine foto's ernaast bedekt).

 

[Goeroeboeroe]

Natuurlijk werkt dat niet. Dit was even 'n slordig kladje.
Maar ik ga geen code ontwerpen voor ik de pagina zie waar die komt te staan, dat is volkomen zinloos. Om iets te kunnen maken wat werkt, moet ik gewoon je code kunnen zien. Dat kan via 'n link naar waar hij staat, of je kunt de betreffende pagina hier neerzetten.

 

[Chocomuffin]

Dat was dan wel een hele domme actie van mij...

Dit is de code van de pagina, het is alleen niet de pagina zelf, maar de inhoud van de iframe (want daar staan de plaatjes in). Als het op deze manier niet mogelijk is kan ik ook wel de iframe verwijderen en het direct op de pagina zelf zetten.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/productenoverzicht.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Naamloos document</title>
<script type="text/JavaScript" src="java.js"></script>

<link href="stijlblad.css" rel="stylesheet" type="text/css" />

<style type="text/css">
<!--
.stijl1 {font-size: 14px}
-->
</style>
</head>

<body style="margin:0">
<table width="722" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="122" height="122" align="center" valign="middle"><!-- InstanceBeginEditable name="item1" --><a href="dresses/dress45oasis.html" target="frame"><img src="dresses/dress45koasis.jpg" alt="dress Oasis" width="110" height="110" class="border" /></a><!-- InstanceEndEditable --></td>
    <td width="122" align="center" valign="middle"><!-- InstanceBeginEditable name="item2" --><a href="dresses/dress54lipsy.html" target="frame"><img src="dresses/dress54klipsy.jpg" alt="dress Lipsy" width="110" height="110" class="border" /></a><!-- InstanceEndEditable --></td>
    <td width="122" align="center" valign="middle"><!-- InstanceBeginEditable name="item3" --><a href="dresses/dress47boohoo.html" target="frame"><img src="dresses/dress47kboohoo.jpg" alt="dress Boohoo" width="110" height="110" class="border" /></a><!-- InstanceEndEditable --></td>
    <td width="122" align="center" valign="middle"><!-- InstanceBeginEditable name="item4" --><a href="dresses/dress483suisses.html" target="frame"><img src="dresses/dress48k3suisses.jpg" alt="dress 3suisses" width="110" height="110" class="border" /></a><!-- InstanceEndEditable --></td>
    <td width="122" align="center" valign="middle"><!-- InstanceBeginEditable name="item5" --><a href="dresses/dress49lipsy.html" target="frame"><img src="dresses/dress49klipsy.jpg" alt="dress Lipsy" width="110" height="110" class="border" /></a><!-- InstanceEndEditable --></td>
    <td width="122" align="center" valign="middle"><!-- InstanceBeginEditable name="item6" --><a href="dresses/dress50boohoo.html" target="frame"><img src="dresses/dress50kboohoo.jpg" alt="dress Boohoo" width="110" height="110" class="border" /></a><!-- InstanceEndEditable --></td>
  </tr>
  <tr>
    <td align="center" valign="middle" height="122"><!-- InstanceBeginEditable name="item7" --><a href="dresses/dress51desireclothing.html" target="frame"><img src="dresses/dress51kdesireclothing.jpg" alt="dress Desire Clothing" width="110" height="110" class="border" /></a><!-- InstanceEndEditable --></td>
    <td align="center" valign="middle"><!-- InstanceBeginEditable name="item8" --><a href="dresses/dress55forever21.html" target="frame"><img src="dresses/dress55kforever21.jpg" alt="dress Forever21" width="110" height="110" class="border" /></a><!-- InstanceEndEditable --></td>
    <td align="center" valign="middle"><!-- InstanceBeginEditable name="item9" --><a href="dresses/dress53desireclothing.html" target="frame"><img src="dresses/dress53kdesireclothing.jpg" alt="dress Desire Clothing" width="110" height="110" class="border" /></a><!-- InstanceEndEditable --></td>
    <td align="center" valign="middle"><!-- InstanceBeginEditable name="item10" --><a href="dresses/dress46karenmillen.html" target="frame"><img src="dresses/dress46kkarenmillen.jpg" alt="dress Karen Millen" width="110" height="110" class="border" /></a><!-- InstanceEndEditable --></td>
    <td align="center" valign="middle"><!-- InstanceBeginEditable name="item11" --><a href="dresses/dress52desireclothing.html" target="frame"><img src="dresses/dress52kdesireclothing.jpg" alt="dress Desire Clothing" width="110" height="110" class="border" /></a><!-- InstanceEndEditable --></td>
    <td align="center" valign="middle"><!-- InstanceBeginEditable name="item12" --><a href="dresses/dress56karenmillen.html" target="frame"><img src="dresses/dress56kkarenmillen.jpg" alt="dress Karen Millen" width="110" height="110" class="border" /></a><!-- InstanceEndEditable --></td>
  </tr>
  <tr>
    <td align="center" valign="middle" height="136"><!-- InstanceBeginEditable name="item13" --><a href="dresses/dress33.html" target="frame"><img src="dresses/dress33k.jpg" alt="dress Republic" width="110" height="110" class="border" /></a><!-- InstanceEndEditable --></td>
    <td align="center" valign="middle"><!-- InstanceBeginEditable name="item14" --><a href="dresses/dress34.html" target="frame"><img src="dresses/dress34k.jpg" alt="dress Liberty" width="110" height="110" class="border" /></a><!-- InstanceEndEditable --></td>
    <td align="center" valign="middle"><!-- InstanceBeginEditable name="item15" --><a href="dresses/dress35.html" target="frame"><img src="dresses/dress35k.jpg" alt="dress Dorothy Perkins" width="110" height="110" class="border" /></a><!-- InstanceEndEditable --></td>
    <td align="center" valign="middle"><!-- InstanceBeginEditable name="item16" --><a href="dresses/dress36.html" target="frame"><img src="dresses/dress36k.jpg" alt="dress Oasis" width="110" height="110" class="border" /></a><!-- InstanceEndEditable --></td>
    <td align="center" valign="middle"><!-- InstanceBeginEditable name="item17" --><a href="dresses/dress37.html" target="frame"><img src="dresses/dress37k.jpg" alt="dress Dorothy Perkins" width="110" height="110" class="border" /></a><!-- InstanceEndEditable --></td>
    <td align="center" valign="middle"><!-- InstanceBeginEditable name="item18" --><a href="dresses/dress38.html" target="frame"><img src="dresses/dress38k.jpg" alt="dress Dorothy Perkins" width="110" height="110" class="border" /></a><!-- InstanceEndEditable --></td>
  </tr>
  <tr>
    <td height="20" colspan="6" align="center" valign="middle"><div align="right" class="body1 stijl1"><!-- InstanceBeginEditable name="EditRegion19" --><strong>1</strong> <a href="dresses2.html" class="blauw">2</a><!-- InstanceEndEditable --></div></td>
  </tr>
</table>
</body>
<!-- InstanceEnd --></html>

Graag geen commentaar over hoe slecht de code misschien is, ik ben nog maar een beginner.

 

[Chocomuffin]

Even ter verduidelijking: de grote afbeeldingen openen nu in een aparte iframe, maar daar wil ik dus vanaf door een mouseover afbeelding te laten zien.

 

[Goeroeboeroe]

Ik had er misschien ook even bij moeten zetten dat 't 'n slordig kladje was. Hoop niet dat je er 'n hele nacht op hebt zitten ploeteren
'n Paar dingen om onnodig werk te voorkomen:
* Ik weet niet hoe je 't in Dreamweaver moet inbakken, want daar heb ik geen ervaring mee.
* De pagina wordt 722 px breed, als ik het goed zie.
* De thumbs zijn 110 x 110 px
* De <td>'s zijn 122 x 122. Dus er moet 12 px tussen de thumbs komen?
* Hoe groot is de grote afbeelding?
Frames? Brrr. Die worden al ruim tien jaar afgeraden.
't Idee is om de thumb onzichtbaar te maken, zonder dat je pagina verder verandert. Op de plaats waar die thumb stond, komt dan 'n grotere afbeelding te staan, netjes gecentreerd boven de inmiddels met vakantie zijnde thumb. Als je de cursor weer van de afbeelding afhaalt, komt de thumb geheel verfrist en uitgerust weer terug.

Commentaar op je code? Goed idee, had ik nog niet aan gedacht Nee, serieus. In dit geval ga ik 't denk ik even opnieuw doen, dus dan heeft commentaar niet echt zin. Maar in 't algemeen is commentaar juist nuttig, daar leer je van. En commentaar is iets heel anders dan iemand belachelijk maken of zo.

 

[Chocomuffin]

Gelukkig was ik ook weer niet zo dom.

De iframe is inderdaad 722 pixels breed, en de grote afbeeldingen zijn 230x230 px. Ik zat me net te bedenken of het überhaupt wel mogelijk is als de afbeeldingen in een iframe staan. Als het dan 722 pixels breed is, en je krijgt een mouseover afbeelding van 230x230 px bovenop de linker afbeeldingen... dan valt een gedeelte buiten de iframe?

Ik snap niet helemaal wat je bedoelt met de thumbs onzichtbaar maken en daarvoor in de plaats de grote afbeelding plaatsen. Dan veranderen de verhoudingen toch tussen de afbeeldingen? (dus dan komt er een grotere witruimte tussen de kleine afbeeldingen in de hoogte) Of bedoel je dat de thumb wel onzichtbaar wordt, maar dat de grote afbeelding op een soort nieuwe laag erbovenop komt? (en dus een deel van de thumbs naast de 'actieve' thumb bedekt?) Want dat is eigenlijk wat ik wil.

Ik heb een keer eerder op een ander forum een vraag gesteld en werd toen helemaal afgezeken omdat ik er niet zo veel van af weet, vandaar dat ik dat erbij heb gezet.

 

[Goeroeboeroe]

De iframe is inderdaad 722 pixels breed, en de grote afbeeldingen zijn 230x230 px. Ik zat me net te bedenken of het überhaupt wel mogelijk is als de afbeeldingen in een iframe staan. Als het dan 722 pixels breed is, en je krijgt een mouseover afbeelding van 230x230 px bovenop de linker afbeeldingen... dan valt een gedeelte buiten de iframe?

Vanwege dit soort dingen zat ik dus zo te zeuren over de code. Nee, buiten 'n iframe kun je niets plaatsen. Dat zou 'n beveiligingsrisico van de eerste orde zijn, want als ik dan eenmaal maar 'n iframe ergens heb, zet ik daar onmiddellijk de site van de ING buiten neer met 'n verzoek om je tancode en zo. Heel kinderachtig, maar daar zijn bezwaren tegen.
In dit geval zou je de linker, bovenste, onderste en rechter afbeeldingen dus meer naar binnen moeten zetten. Dus de meer naar binnen liggende afbeeldingen gecentreerd over de thumbs, en de buitenste iets naar binnen.
'n Andere mogelijkheid is om álle grotere afbeeldingen in het midden te zetten, dus steeds op dezelfde plaats. Dat moet je even kiezen.
Misschien (misschien!) is het ook mogelijk het iframe groter te maken dan nodig is voor de thumbs. Met 'n onzichtbare achtergrond. Dan is er ruimte voor de grotere afbeeldingen. Maar dat heeft wel weer andere nadelen. Ook al zie je 't iframe niet, het dekt wel de pagina af, dus klikken of tekst selecteren zal niet gaan onder het deel dat wordt afgedekt door het iframe. Dat kan heel verwarrend zijn voor bezoekers.
Maar waarom gebruik je 'n iframe? Kan 't niet rechtstreeks op die pagina?

Ik snap niet helemaal wat je bedoelt met de thumbs onzichtbaar maken en daarvoor in de plaats de grote afbeelding plaatsen. Dan veranderen de verhoudingen toch tussen de afbeeldingen? (dus dan komt er een grotere witruimte tussen de kleine afbeeldingen in de hoogte) Of bedoel je dat de thumb wel onzichtbaar wordt, maar dat de grote afbeelding op een soort nieuwe laag erbovenop komt? (en dus een deel van de thumbs naast de 'actieve' thumb bedekt?) Want dat is eigenlijk wat ik wil.

Ja, dat is precies wat ik bedoel. Mogelijk wordt die thumb niet eens onzichtbaar gemaakt, als de grote afbeelding erboven staat zie je 'm toch niet meer. Maar ook als hij wel onzichtbaar wordt, kun je dat zo doen dat de rest van de thumbs gewoon stil blijft staan. Anders wordt 't meer 'n soort chachacha-pagina, wat 'n beetje onrustig is.

Op dit forum zie ik gelukkig heel weinig afzeiken. Ik doe 't zelf ook wel 'ns 'n heel enkele keer, maar eigenlijk alleen (hoop ik) als iemand er echt niets van weet, geen argumenten heeft en toch hartstikke eigenwijs 't verkeerd blijft doen. Volgens mij zijn er vrij weinig mensen die zonder te leren als baby al 'n site kunnen maken, dus 't is logisch dat er vragen zijn. Bovendien is dat nou juist de lol van zo'n forum: vragen beantwoorden (of stellen natuurlijk).

 

[Chocomuffin]

Er is nog witruimte over naast de iframe, dus ik zou de iframe wel wat groter kunnen maken en aan de zijkanten wat meer ruimte kunnen overlaten. Maar ik denk dat het slimmer is om de iframe te verwijderen en de afbeeldingen direct op de pagina te plaatsen. De reden dat ik een iframe heb gebruikt is omdat ik in eerste instantie een scrollbalk wilde plaatsen in de iframe (en voor zover ik weet, kun je geen tabel in een normale div met scrollbar plaatsen). Maar omdat dit uiteindelijk niet is gelukt (de scrollbar zelf lukte wel, alleen lukte het niet om de kleuren van de scrollbar te wijzigen in de iframe), heb ik de afbeeldingen verdeeld over 2 pagina's. Ideaal zou natuurlijk zijn dat ik alle afbeeldingen op 1 pagina kan plaatsen in de iframe, met een scrollbar met aangepaste scrollbarkleuren. (of nog beter waarschijnlijk: zonder iframe maar in een div, maar tot nu toe heb ik dus niet uit kunnen vinden of en hoe dat moet).

 

[Goeroeboeroe]

Een tabel kan gewoon in een div worden gezet. Maar als de tabel (of wat dan ook) te groot is voor de div, wordt standaard alles weergegeven. Om 'n scrollbar te krijgen in de div, moet je die 'n hoogte geven en overflow: auto; Mogelijk ben je dat vergeten.
Als het zonder iframe kan, is dat altijd beter. iframes hebben nogal wat nadelen.
'n Tabel voor lay-out is eigenlijk ook niet goed, die is bedoeld voor cijfer-overzichten, kalenders, e.d. Maar in dit geval, als er alleen maar thumbnails in staan, kan het wel, want dit levert geen extra problemen op voor toegankelijkheid e.d.
'n Tabel wordt van links naar rechts gelezen, niet kolom voor kolom. Ongeveer alsof je 'n krant regel voor regel leest, horizontaal, en niet kolom voor kolom. Niet alleen nadelig voor de toegankelijkheid voor bijvoorbeeld blinden, maar ook niet goed voor zoekmachines. Maar bij alleen afbeeldingen maakt dat weinig uit. Die kun je ook prima alleen horizontaal bekijken.

Als ik het nog even samenvat. Liefst alles gewoon op 'n pagina. Binnen 'n div met 'n scrollbalk. Dan kun je dus in principe net zoveel thumbs onder elkaar zetten als je wilt. De grotere afbeeldingen kunnen dan ook gewoon buiten de div getoond worden, is dat ook gelijk opgelost.
Die div wordt dan dus 722 breed, thumbs 110 x 110, 12 px marge tussen thumbs, grote afbeeldingen 230x230. Bij hoveren worden de grote afbeeldingen netjes midden over de thumb gezet.

Rest mij nog 1 vraag. Waarom moet die scrollbalk in de div? Is er 'n reden om niet de hele pagina te laten scrollen?
't Kleuren van de scrollbalken mag je zelf doen. Overigens is dat vrijwel nooit 'n goed idee, omdat mensen gewend zijn aan de standaardkleuren van hun browser/systeem. En 't kan alleen in Internet Explorer, tenzij je JavaScript of zo gaat gebruiken.

 

[Chocomuffin]

Ik weet niet meer precies wat ik toen had gedaan, maar ik zou best de hoogte en breedte vergeten kunnen zijn.

De reden dat ik een scrollbalk in de div wil is omdat ik graag alle pagina's op dezelfde hoogte wil houden (en dat je niet de pagina naar beneden hoeft te scrollen), en je dus de navigatie onderin de pagina nog kunt zien zonder te scrollen.

Ik zie net dat je de kleur van mijn scrollbalk idd niet ziet in firefox. Dus laat die scrollbalk maar zitten, ik wil het dan graag verdelen over 2 pagina's, zoals ik nu heb (maar dan in een div ipv een iframe).

 

[Goeroeboeroe]

Helaas, dat gaat niet lukken op korte termijn. Althans: niet door mij. Ik ga er nog naar kijken, maar dat kan 'n aantal weken duren.
't Is inderdaad heel simpel. Ik was echter even die twee ondingen Internet Explorer 6 en 7 vergeten. Die hebben 'n bug/opzettelijke afwijking van de standaard, waardoor dit uiterst moeilijk is. 't Effect is dat de vergrote afbeelding ónder de thumbs die erachter komen komt te staan. Dit is wel te omzeilen, denk ik, maar daar gaat knap wat tijd in zitten.
In alle echte browsers en ook in Internet Explorer 8 werkt het wel goed. Ik zet hier toch even de code neer, misschien heb je er toch nog wat aan of ziet iemand anders 'n snelle oplossing:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
	<style type="text/css">
		div#wrapper {width: 720px; margin: 100px auto 0; border: 0;}
		div#wrapper div {float: left; width: 120px; height: 122px;}
		div#wrapper a {position: relative;}
		div#wrapper img {border: 0;}
		div#wrapper span {display: block; z-index: 10; position: absolute; left: -60px; bottom: -60px; width: 230px; height: 230px; display: none;}
		a#een:hover span {display: block; background: url(001.jpg);}
		a#twee:hover span {display: block; background: url(002.jpg);}
		a#drie:hover span {display: block; background: url(003.jpg);}
		a#vier:hover span {display: block; background: url(004.jpg);}
		a#vijf:hover span {display: block; background: url(005.jpg);}
		a#zes:hover span {display: block; background: url(006.jpg);}
		a#zeven:hover span {display: block; background: url(007.jpg);}
		a#acht:hover span {display: block; background: url(008.jpg);}
		a#negen:hover span {display: block; background: url(009.jpg);}
		a#tien:hover span {display: block; background: url(010.jpg);}
		a#elf:hover span {display: block; background: url(011.jpg);}
		a#twaalf:hover span {display: block; background: url(012.jpg);}
		a#dertien:hover span {display: block; background: url(013.jpg);}
		a#veertien:hover span {display: block; background: url(014.jpg);}
		a#vijftien:hover span {display: block; background: url(015.jpg);}
		a#zestien:hover span {display: block; background: url(016.jpg);}
		a#zeventien:hover span {display: block; background: url(017.jpg);}
		a#achttien:hover span {display: block; background: url(018.jpg);}
		p#link {clear: both; text-align: center;}
	</style>
</head>
<body>
	<div id="wrapper">
		<div><a id="een" href="dresses/dress45oasis.html"><img src="001-t.jpg" alt="dress Oasis" width="110" height="110" /><span></span></a></div>
		<div><a id="twee" href="dresses/dress54lipsy.html"><img src="002-t.jpg" alt="dress Lipsy" width="110" height="110" /><span></span></a></div>
		<div><a id="drie" href="dresses/dress47boohoo.html"><img src="003-t.jpg" alt="dress Boohoo" width="110" height="110" /><span></span></a></div>
		<div><a id="vier" href="dresses/dress483suisses.html"><img src="004-t.jpg" alt="dress 3suisses" width="110" height="110" /><span></span></a></div>
		<div><a id="vijf" href="dresses/dress49lipsy.html"><img src="005-t.jpg" alt="dress Lipsy" width="110" height="110" /><span></span></a></div>
		<div><a id="zes" href="dresses/dress50boohoo.html"><img src="006-t.jpg" alt="dress Boohoo" width="110" height="110" /><span></span></a></div>
		<div><a id="zeven" href="dresses/dress51desireclothing.html"><img src="007-t.jpg" alt="dress Desire Clothing" width="110" height="110" /><span></span></a></div>
		<div><a id="acht" href="dresses/dress55forever21.html"><img src="008-t.jpg" alt="dress Forever21" width="110" height="110" /><span></span></a></div>
		<div><a id="negen" href="dresses/dress53desireclothing.html"><img src="009-t.jpg" alt="dress Desire Clothing" width="110" height="110" /><span></span></a></div>
		<div><a id="tien" href="dresses/dress46karenmillen.html"><img src="010-t.jpg" alt="dress Karen Millen" width="110" height="110" /><span></span></a></div>
		<div><a id="elf" href="dresses/dress52desireclothing.html"><img src="011-t.jpg" alt="dress Desire Clothing" width="110" height="110" /><span></span></a></div>
		<div><a id="twaalf" href="dresses/dress56karenmillen.html"><img src="012-t.jpg" alt="dress Karen Millen" width="110" height="110" /><span></span></a></div>
		<div><a id="dertien" href="dresses/dress33.html"><img src="013-t.jpg" alt="dress Republic" width="110" height="110" /><span></span></a></div>
		<div><a id="veertien" href="dresses/dress34.html"><img src="014-t.jpg" alt="dress Liberty" width="110" height="110" /><span></span></a></div>
		<div><a id="vijftien" href="dresses/dress35.html"><img src="015-t.jpg" alt="dress Dorothy Perkins" width="110" height="110" /><span></span></a></div>
		<div><a id="zestien" href="dresses/dress36.html"><img src="016-t.jpg" alt="dress Oasis" width="110" height="110" /><span></span></a></div>
		<div><a id="zeventien" href="dresses/dress37.html"><img src="017-t.jpg" alt="dress Dorothy Perkins" width="110" height="110" /><span></span></a></div>
		<div><a id="achttien" href="dresses/dress38.html"><img src="018-t.jpg" alt="dress Dorothy Perkins" width="110" height="110" /><span></span></a></div>
	</div>
	<p id="link"><strong>1</strong> <a href="dresses2.html" class="blauw">2</a></p>
</body>
</html>

div#wrapper div {float: left; width: 120px; height: 122px;}
De divs binnen div#wrapper naar links floaten. Hierdoor komen ze op één regel te staan, tot de regel vol is.

div#wrapper a {position: relative;}
Hierdoor kan ik de span positioneren ten opzichte van de <a>

div#wrapper span {display: block; z-index: 10; position: absolute; left: -60px; bottom: -60px; width: 230px; height: 230px; display: none;}
Binnen de span komt de grote afbeelding te staan. Voorlopig verberg ik hem.

a#een:hover span {display: block; background: url(001.jpg);}
Bij hoveren over a#een de bijbehorende afbeelding tonen.

 

[Goeroeboeroe]

Ik heb er toch nog even naar gekeken. Helemaal goed is het niet te krijgen, maar wel werkend. Om het helemaal goed te krijgen is veel meer werk nodig.
'n Alternatief zou ook zijn om JavaScript te gebruiken, maar dat is niet mijn afdeling.
Als je onder de style toevoegt:

<!--[if (IE 6) | (IE 7)]>
	<style type="text/css">
		div#wrapper a {display: block; overflow: hidden; width: 120px; height: 122px; background: url(space-1x1.gif);}
		div#wrapper a:hover {overflow: visible;}
		div#wrapper span {display: block; bottom: 10px; left: -120px;}
	</style>
<![endif]-->

Dan werkt het ook in die twee, die twee, pfff, die twee technische hoogstandjes van Microsoft.

<!--[if (IE 6) | (IE 7)]>
Dit wordt alleen door IE 6 en IE 7 gezien. Voor alle andere browsers is het gewoon commentaar, tot aan de <![endif]--> onderaan.. Volledig valid, want in commentaar mag je zo'n beetje alles neerzetten. De | betekent 'of'.

div#wrapper a {display: block; overflow: hidden; width: 120px; height: 122px; background: url(space-1x1.gif);}
De space-1x1.gif is een doorzichtig gifje van 1x1 px. Dit heeft IE 6 nodig, anders werkt het hoveren niet. Maar om die achtergrond te kunnen geven, moet de <a> dus ook een breedte en een hoogte hebben. En daarvoor moet het weer 'n blok-element worden. IE 7 heeft dit niet nodig, maar het stoort 'm ook niet.
De span wordt verborgen voor alle browsers met display: none;. Maar dan tonen IE 6 en 7 hem helemaal niet meer. Dus voor die twee schakel ik display: none uit (hieronder, in 'n volgende regel). Maar dan is de span altijd aanwezig en dus ook 230x230 px groot, waardoor hij thumbs eromheen afdekt.
Om dat te voorkomen zet ik de overflow van de <a> op hidden. En omdat de <a> maar 120x122 px groot is, kan de span daar nu ook niet aan ontsnappen.

div#wrapper a:hover {overflow: visible;}
Ik moet bij hoveren over de thumb de overflow weer zichtbaar maken, anders blijft de span 120x122 px (althans: het zichtbare deel).

div#wrapper span {display: block; bottom: 10px; left: -120px;}
display: block overruled de display: none uit de 'gewone' css. Dat moet, anders is de span helemaal niet zichtbaar. Vervolgens wordt de span met de grote afbeelding zo neergezet, dat hij niet onder 'n andere thumb verdwijnt.
Waarschijnlijk kan 't nog wel beter, maar daar is veel meer knutselen voor nodig. Wat op zich trouwens wel leuk is, alleen kost 't tijd. Ik ga hier zeker nog uitgebreider naar kijken, maar dat kan 'n tijd duren.
O, en als 't je niet bevalt, geen probleem. Ik ga 't zelf beter uitwerken en dan ook op m'n site opnemen.

 

[csshunter]

Alle détails hierboven heb ik niet gelezen, , maar mag ik me misschien toch even een terzijde veroorloven?

• Er schoot me namelijk deze pagina te binnen, die eventueel wat (scriptloze ) ideeën kan opleveren.
• De truc daar is dat de kleine plaatjes geen echte stuk-voor-stuk plaatjes zijn, maar één achtergrondafbeelding.
• De hover-images zijn er op de voorgrond in gezet (als links), en worden met css al of niet getoond. Een aantal ervan draaien als echte klikbare links.
• Op deze manier kunnen <span></span>'s met achtergrond-images in de html gemist worden.
• Voor belangstellenden: nog wat toelichting staat in dit draadje op het forum.

Deze oplossing is aardig voor vrij statische sites, waar weinig verandering in zit. Maar als je steeds wisselende plaatjes mocht hebben, is dit niet zo erg handig. Dan moet er steeds een nieuwe achtergrondfiguur aangemaakt worden.

Dat was 'm - nu ga ik weer in m'n hok.

Met vriendelijke groet,
CSShunter