C# - Nagyméretű kép megjelenítése scrollozható módon

forráskód letöltése
Ha egy web oldalon belül nagy méretű képeket kell megjelenítenünk, akkor valószínűsíthető, hogy az ki fog lógni a felhasználó böngészőjéből. Ekkor készíthetünk egy olyan megoldást, hogy a kép egy általunk megadott méretű területen belül jelenhet csak meg. Ezt a területet scrollozhatóvá tehetjük, így a felhasználó képes lesz a teljes kép megtekintésére is.
Ezt a módszert használva nem csak képet, hanem bármilyen egyéb HTML tartalmat is megjeleníthetünk így.
Mellékelt példa kipróbálásához szükséges egy BigPicture nevű virtuális könyvtár létrehozása, mely arra a könyvtárra mutat, amelybe másolta a példát. Ehhez legegyszerűbb út az adott mappa tulajdonság ablakában lévő Webmegosztás lapon található, ahol engedélyezzük a megosztást.
A megvalósításhoz az IFRAME HTML elemet használjuk fel. Ennek segítségével megoldhatjuk azt, hogy egy web lapon belül egy adott területen egy teljesen más forrást jelenítsünk meg úgy, mintha ez a terület egy önálló böngésző ablak lenne. Olyan ez mint a kép a képben szolgáltatás, csak most inkább böngésző a böngészőben szolgáltatásnak kellene nevezni.
A megoldás előtt hozzuk létre a WebForm2.aspx lapot, melyre csupán egyetlen, de igen nagy méretű képet helyezünk el.
Ezt követően térjünk vissza a WebForm1.aspx lapra és itt váltsunk át HTML nézetre, majd írjuk be a következőt:
      <iframe width="200" height="200" src="WebForm2.aspx" style="Z-INDEX: 101; LEFT: 32px; POSITION: absolute; TOP: 56px" frameborder="0">
      </iframe>
Ezzel létrehoztunk egy új területet a WebForm1-en belül, mely 200 pixel magas és széles. Ezen a területen belül a WebForm2.aspx lapot adtuk meg mint forrást, így az általa szolgáltatott tartalom jelenik meg az új területen. Ez jelen esetben nem más, mint egyetlen nagy méretű kép.