inzoomen html

[hasseholland]

Lieve mensen,

Kan iemand mij vertellen of en hoe ik kan inzoomen op een afbeelding in html? Dus als ik een mouse scroll over doe dat er dan zo`n vergrootglaasje komt?

Bij voorbaat dank.

 

[Frats]

Wil je het plaatje op de pagina zelf inzoomen, of wil je een grotere versie openen?

Je kunt met behulp van Lightbox vrij eenvoudig maken dat als je er op klikt, er een grote versie van de foto tevoorschijn komt:
http://www.huddletogether.com/projects/lightbox/

Een vergrootglas weergeven kan met behulp van de css property 'cursor':
http://www.w3schools.com/CSS/pr_class_cursor.asp

Je moet dan een plaatje van een vergrootglas uploaden als een .cur bestand, en dan die toewijzen aan het plaatje.
Alles bij elkaar zou het er dan ongeveer zo uit moeten komen te zien: (nadat je Lightbox in je header hebt opgenomen; zie de site voor instructies)

<style type="text/css">
.lookingglass {
  cursor: url("lookingglass.cur"), pointer
}
</style>
<img src="plaatje.jpg" rel="lightbox" title="Titel van plaatje" alt="plaatje" class="lookingglass" />

Ik geloof niet dat je letterlijk kunt inzoomen op een plaatje; misschien mbv een resize in javascript, maar dat ziet er niet netjes uit en kost onnodige bandbreedte, omdat altijd het grote plaatje geladen moet worden. Dan ben je beter af met Lightbox denk ik

 

[That Guy]

nouuuuuuu, mischien is dit idee wat: [ http://www.cssplay.co.uk/menu/lightbox.html#Trees (lightbox zoals Frats al zei) ], of deze: [ http://cssglobe.com/articles/link_tech/02.html (alleen css) ], of... kijk zelf maar eens: [ http://www.google.nl/search?hl=nl&e...=result&cd=1&q=pure+css+image+gallery&spell=1)) ]

Als je het geavanceerder wilt zul je inderdaad met javascript meoten gaan werken