C# - HTML objektumok nagyítása, kicsinyítése

forráskód letöltése
ASP.NET-es alkalmazásaink készítésekor lehetőségünk van arra, hogy tetszőleges HTML objektumokat (<IMAGE>, <DIV>, stb.) tetszőleges mértékben nagyítsunk illetve kicsinyítsünk. Ezt a műveletet végezhetjük statikusan előre beállított értékkel, vagy akár dinamikusan változtathatjuk is a web oldalon.
Mellékelt példa megnyitása előtt szükséges egy Zoom nevű virtuális könyvtár létrehozása, mely a példa könyvtárára mutat. Ehhez nyissa meg a mellékelt mappa Tulajdonság ablakát és itt a Webmegosztás lapon engedélyezze a mappa megosztását olvasási és parancsfájlok futtatási jogával.
A megoldás igen egyszerű: a nagyítandó, kicsinyítendő objektumnál csupán csak egy stílust kell megadnunk.
Ez a stílus nem más, mint a zoom, melynek háromféle módon adhatunk értéket:
  • „normal” érték esetén az objektum eredeti méretben jelenik meg
  • százalékosan, pl.: 150%
  • érték alapján, pl.: 0.1
<STYLE>
  .zoom01 { zoom: 0.1 }
</STYLE>
Ezt felhasználva könnyen megvalósíthatjuk azt, hogy különféle effekteket hozzunk létre a zoom stílus felhasználásával. Így például, ha az egérrel a felhasználó egy megadott terület fölé ér, akkor megváltoztathatjuk a zoom mértékét, míg ha elhagyja ezt a területet, akkor visszaállíthatjuk az eredetire. Ehhez a onmouseover és a onmouseout eseményeket használhatjuk fel.
<DIV onmouseover="this.style.zoom='140%'" onmouseout="this.style.zoom='normal'" ...>