foto vergroten muis erover

[timvl]

hallo

ik heb op mijn website op deze pagina een aantal foto's staan (http://www.vluttikhuizen.nl/foto's.html). nu wil ik dat als men er met de muis over een bepaalde foto heen gaat, de foto in het gehele scherm groter wordt. Hoe doet men dat. ik heb frontapge en expression web 4
alvast bedankt
mvg, Tim

 

[visha]

met css

howto

voorbeeld

 

[csshunter]

Ja, dat is een leuke manier.
Maar dit werkt alleen als je in de kleine afbeelding een gedeelte van de grote afbeelding kan gebruiken; beide zijn namelijk op ware grootte. - De kleine afbeeldingen op de stamboom-pagina zijn echter de complete plaatjes, die echt vergroot moeten worden, en dan werkt die methode niet. Wel mogelijk:

• Als een hover de grote foto tevoorschijn moet halen, kan het wel op een andere manier met css: http://home.tiscali.nl/developerscorner/css-discuss/showathover2.htm. Zie de broncode voor de methode. *)
  
  
• Als de grote foto (op dezelfde pagina) met een klik tevoorschijn moet komen, kan het heel mooi met een combinatie van css en javascript.
  Zie hier een voorbeeld met beschrijving: www.developerscorner.nl/css-exercitions/website-galery.php.
  
  
• En tenslotte zijn er ook klik-oplossingen als lightbox e.d. - Maar daarvoor moet je tegelijk met de pagina een hele vracht aan javascript-bibliotheken binnenhalen (zelf ben ik daar niet zo'n voorstander van).

Met vriendelijke groet,
CSShunter
_________________
*) In dat voorbeeld wordt de grote afbeelding onzichtbaar gemaakt met het naar rechts (buiten scherm) trekken ervan:

#pop1, #pop2, #pop3, #img-area { 
   right: -9999px;
   ...
   }
.showathover a:hover span#pop1,  
.showathover a:hover span#pop2, 
.showathover a:hover span#pop3, 
#img-area { 
   right:10px;
   float: none;
   }

Dat veroorzaakt een horizontale scrollbar!
Het kan beter met naar links buiten beeld zetten gebeuren:

#pop1, #pop2, #pop3, #img-area { 
   left: -9999px;
   ...
   }
.showathover a:hover span#pop1,  
.showathover a:hover span#pop2, 
.showathover a:hover span#pop3, 
#img-area { 
   right:10px;
   left: auto;
   float: none;
   }