Makale Özeti

Bu makalemde asp.net sunucu kontrollerinden, içerisinde görsel materyal kullanabileceğimiz, görünümleri kısmen benzeyen fakat işlevleri farklı olan Image, ImageMap ve ImageButton kontrollerinden bahsedeceğim.

Makale

Bu makalemde asp.net sunucu kontrollerinden, içerisinde görsel materyal kullanabileceğimiz, görünümleri kısmen benzeyen fakat işlevleri farklı olan Image, ImageMap ve ImageButton kontrollerinden bahsedeceğim.

Bir masaüstü yada web uygulaması geliştirirken, öncelikli düşünce uygulamanın kullanıcıların ihtiyaçlarını karşılayıp karşılamadığıdır. Fakat kullanıcılar uygulamanın sadece yapabildiklerine, performansına bakmazlar. Kullanıcılar uygulamayla tanıştıkları anda görecekleri şey uygulamanın görünüşü, yani tasarımı olacaktır. Bu nedenle tasarım belki uygulamaya fazladan bir fonksiyonellik kazandırmasa da uygulamanın ilgi görmesi açısından önemlidir. Genelde web sayfalarının ilgi çekmesi için resimler, animasyonlar ve videolar kullanılır.

Bir web uygulaması geliştirirken kullanıcıya resim göstermek için kullanabileceğimiz en temel ve en basit etiket <img> etiketidir. Bu etiketin src özelliğine gösterilecek resmin tam yolu ve adını değer olarak veririz. Bu şekilde resmimizi göstermiş oluruz. Eğer bir asp.net web projesi geliştiriyorsak <img> etiketi veya Image sunucu kontrolünü kullanabiliriz.

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <asp:Image ID="Image1" runat="server"

            AlternateText="Resim gösterilemiyor"

            ImageUrl="Desert.jpg"

            ToolTip="Fare resmin üzerinde"

            Height="200px" Width="200px"  />

    </div>

    </form>

</body>

</html>

Yukarıdaki webformuna eklediğim Image kontrolünün temel özelliklerini kullandım. Çünkü amacımız kullanıcıya sadece bir resim göstermek ise Image kontrolü tamamiyle işimizi görüyor. ImageUrl özelliği ile, resimin tam yolbilgisini belirtiyoruz. AlternateText özelliği ile herhangi bir nedenden dolayı resim kullanıcıya gösterilemezse resmin olduğu yerde gösterilecek yazıyı belirtiyoruz. ToolTip özelliği ile fare imleci resimin üzerine geldiğinde gösterilecek yazıyı belirliyoruz.



Yukarıdaki resimde soldaki görüntü, resmin görüntülenmesi başarılı ve fare imleci resimin üzerinde bulunuyor. Sağdaki görüntüde ise görüntülenecek resimin adını değiştiriyorum. Bu nedenle, resim görüntülenmiyor. Resim görüntülenmediğinde AlternateText özelliğine girdiğimiz değer, resimin görüntülenmesi gereken yerde görüntüleniyor. Eğer amacımız sadece resim göstermek değilse, aynı zamanda görüntülenen resime tıklandığında birtakım işlemler yapmak istiyorsak, kullanacağımız sunucu kontrolü ImageButton'dur. ImageButton kontrolünde bulunan Click olayı, kullanıcıya gösterilen resime bir de buton fonksiyonu kazandırır. Kullanıcıya varsayılan bir buton göstermek yerine arkaplanında resim olan bir buton göstermek kullanıcının ilgisini çekebilir.

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <asp:ImageButton ID="ImageButton1" runat="server"

        ImageUrl="~/buton.jpg"

        AlternateText="Butonun resmi gösterilemiyor"

        Height="50px" Width="100px" />

    </div>

    </form>

</body>

</html>

Image kontrolünde bulunan ImageUrl ve AlternateText özellikleri ImageButton kontrolünde de bulunuyor. Bunun nedeni ise ImageButton sınıfının Image sınıfıntan türetilmesidir. Eğer sitemizde göstereceğimiz resim büyükse, resmi bölümlere ayırıp ve ayırdığımız bölümlere ayrı ayrı link vermek istiyorsak ImageMap kontrolünü kullanabiliriz.



Örneğin, yukarıdaki gibi bir resmin sarı olan bölgelerine link vererek, bir resim üzerinden birden çok web sayfasına link verebiliriz. Bunu yapabilmek için webformumuza bir ImageMap kontrolü ekliyorum.

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <asp:ImageMap ID="ImageMap1" runat="server" Height="70px" AlternateText="resim görüntülenemiyor"                         ImageUrl="~/imagemapu.jpg" Width="700px">

            <asp:RectangleHotSpot Left="0" Right="175" Top="70" AlternateText="1.link" HotSpotMode="Navigate"

                NavigateUrl="http://www.google.com/" />

            <asp:RectangleHotSpot Left="175" Right="350" Top="70" AlternateText="2.link" HotSpotMode="Navigate"

                NavigateUrl="http://www.microsoft.com/" />

            <asp:CircleHotSpot X="400" Y="35" Radius="20" AlternateText="3.link" HotSpotMode="Navigate"

                NavigateUrl="http://www.hotmail.com/" />

            <asp:PolygonHotSpot Coordinates="700,0,700,70,500,70,600,0" AlternateText="4.link"

                HotSpotMode="Navigate" NavigateUrl="http://www.asp.net/" />

        </asp:ImageMap>

    </div>

    </form>

</body>

</html>

Webformuna eklediğim ImageMap kontrolünün yapısından bahsetmek gerekirse, ImageUrl özelliğiyle görüntülenecek ve bölmelere ayıracağımız resimin tam yolunu ve adını giriyoruz. Gösterilecek resim HotSpot denilen yapı kullanılarak bölmelere ayrılıyor. HotSpot'lar ise RectangleHotSpot, CircleHotSpot ve PolygonHotSpot olmak üzere 3 çeşittir. HotSpot nesnelerinin ortak olan özelliklerinden HotSpotMode özelliği ile, HotSpot'a tıklandığında, bir yönlendirme işlemi yapacaksak Navigate; sayfanın sunucuda işlendiğinde bir işlem yapacaksak PostBack değerini veriyoruz. HotSpot nesnelerinde bir diğer özellik olan AlternateText özelliği ile, HotSpot nesnelerinin fare imleci ile üzerine gelindiğinde gösterilecek yazıyı belirtiyoruz.

Yukarıdaki ImageMap kontrolünde 2 adet RectangleHotSpot, 1 adet CircleHotSpot ve 1 adet PolygonHotSpot nesnesi bulunuyor.  RectangleHotspot kontrolünün Left,Right,Top ve Bottom özellikleri ile HotSpot konumunu belirliyoruz. ImageMap kontrolünün sol üst köşesindeki noktayı orjin kabul eden bir dik koordinat sistemi olduğunu düşünelim. CircleHotSpot nesnesinin X,Y özellikleri ile merkezi X,Y noktasında olan bir çember oluşturuyoruz. Bu çemberin çapını ise Radius özelliğiyle belirliyoruz. PolygonHotSpot nesnesinin Coordinates özelliğine ise, sırasıyla (x,y) noktalarını vererek, düzgün veya düzgün olmayan bir çokgen çizebiliriz.



Asp.net ortamında web uygulaması geliştirirken kullanabileceğimiz, görsel içerikli sunucu kontrolleri olan Image,ImageButton ve ImageMap kontrollerini temel hatlarıyla açıklamaya çalıştım. Anlattıklarımın faydalı olması dileğiyle...