myusufaya
 
  WELCOME
  C# Değişkenler [ video linkli ]
  contextMenuStrip Kullanımı[C#]
  Dosya(File) İşlemleri Örneği[C#]
  C# 'da yapılmış alarm programı
  C#’ta Yapıcı Metotlar(Constructors)
  CheckedListBox Kullanımı[C#]
  C # Döngüler [ video linkli ]
  Form Üzerinde Nesneleri Sürükle-Bırak[C#]
  Ekran koruyucu yapımı [ C# ]
  C# 'da paint kullanımı
  ASP.Net ile PDF Dosya Oluşturmak
  ASP.net Nitelik(Attribute) Bazlı Veri Doğrulama(Validation)
  Asp.Net PopupMessageBox
  ASP.Net ve Validation Kontrolleri
  Basit bir form yapmak
  ASP.NET Custom Control Gelistirme - Rollover Image Link
  faydalı bilgiler
  ASP.NET MVC2 - Model Bağlayıcılar ve Değer Sağlayıcılarnın başlığı
  İletişim
ASP.NET Custom Control Gelistirme - Rollover Image Link

Bir web sitesi hazirliyorsak ve flash bilmiyorsak menülerimizi hareketlendirmek için rollover dügmeler bizim için olmazsa olmaz denebilecek bir kontroldür. Ama ne yazik ki bu kontrol hazir bir sekil de visual studio içerisinde yer almiyor. Bunu halletmek için javascript ile kontrol etmek zorunda kaliyoruz. Eger resimin üzerindeyse su resmi getir, resmin üzerinde degilse bu resmi getir gibi. Ayrica her projemizde bu işlemi ayri ayri yapmak zorunda kaliyoruz. Kendi adima konusursam ben ayni seyleri tekrarlamayi hiç sevmiyorum. Bu yüzden de bu kontrolümü bir defa yazacagim ve bundan sonraki tüm projelerimde bunu kullanacagim.

NavigateURL, ImageURL ve HoverImageURL’i properties page’den seçip baska hiçbir işlem yapmadan rollover image linkimin çalismasini saglayacagim. Projemize baslayalim. Simdi ilk olarak yeni bir WebControl Library projesi olusturalim.

Projemi olusturduktan sonra ilk olarak Projemin referanslarina System.Design’i ekledim. Kontrolümüzü olusturmak için yazmaya baslayalim;

using System;

using System.Collections.Generic;

using System.ComponentModel;

using System.Text;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Drawing;

using System.Web.UI.Design;

using System.Drawing.Design;

 

 

namespace SemControls

{

 

//Konrolümün sayfa üzerinde alacagi adi belirliyorum…

[DefaultProperty("Text")]

[ToolboxData("<{0}:elcinRolloverButton runat=server></{0}:elcinRolloverButton>")]

public class elcinRolloverButton : WebControl

{

 

//Kontrolüme kazandiracagim özellikler için gerekli degiskenleri tanimliyorum…

 

private string imageURL;//Görüntülenecek olan Resim

private string hoverImageURL;//Mouse ile üzerine geldigimizde görüntülenecek olan resim…

private string navigateURL;//Resime tikladigimizda yönlenecek olan link…

 

// ElcinRolloverImage Isimli Bir PropertyGrubuna eklenecek bu özellik resim üzerinde geldiginde görüntülencek olan resimi seçmemizi saglayacak...

[Category("ElcinRolloverImage")]

[Browsable(true)]

[Description("Görüntülemek istediginiz dosyanin yolunu belirtiniz..")]

[Editor(typeof(System.Web.UI.Design.UrlEditor), typeof(System.Drawing.Design.UITypeEditor))]//Bu bize özellik penceresinde browse yapma imkani sunacak…

public string HoverImageUrl

{

get

{

return this.hoverImageURL;

}

set

{

this.hoverImageURL = value;

}

}

 

// ElcinRolloverImage Isimli Bir PropertyGrubuna eklenecek bu özellik görüntülencek olan resimi seçmemizi saglayacak...

 

[Category("ElcinRolloverImage")]

[Browsable(true)]

[Description("Görüntülemek istediginiz dosyanin yolunu belirtiniz..")]

[Editor(typeof(System.Web.UI.Design.UrlEditor), typeof(System.Drawing.Design.UITypeEditor))]

public string ImageUrl

{

get

{

return this.imageURL;

}

set

{

this.imageURL = value;

}

}

 

// ElcinRolloverImage Isimli Bir PropertyGrubuna eklenecek bu özellik yönlenecek olan sayfayi seçmemizi saglayacak…

 

[Category("ElcinRolloverImage")]

[Browsable(true)]

[Description("Görüntülemek istediginiz dosyanin yolunu belirtiniz..")]

[Editor(typeof(System.Web.UI.Design.UrlEditor), typeof(System.Drawing.Design.UITypeEditor))]

public string NavigateURL

{

get

{

return this.navigateURL;

}

set

{

this.navigateURL = value;

}

}

 

// Kontrol olusturulurken sayfaya eklenecek olan javascript… Bu olusturacagimiz kontroldeki resimi degistirmemizi saglayacak…

 

protected override void OnInit(EventArgs e)

{

if (!this.Page.IsClientScriptBlockRegistered("SemHoverButtons"))

{

this.Page.RegisterClientScriptBlock("SemHoverButtons", "<script DEFER = true language= "javascript" type="text/javascript"> <!-- rtfunction newRollOver(targetDOmUrlName,URL){ rttvar img = document.images; rttvar i =0;rtt// Look Though the DOM images for the one that is named correctly, then preform the swap.ttfor(i=0; i<img.length; i++)rtttif (img[i].name == targetDOmUrlName) img[i].src = URL; rt}r//--> </script>");

}

 

}

 

//Simdi kontrolümüzü olusturuyoruz…

protected override void Render(HtmlTextWriter writer)

{

try

{

string rolloverButton="";

 

if (navigateURL !="") rolloverButton += "<a href="" + navigateURL.Replace("~/", "") + "">";//Url’i belirledik…

rolloverButton +="<img border=0";

if (ToolTip.ToString() != "") rolloverButton += " alt=" + base.ToolTip.ToString();//Tooltip özelligini belirledik…

if (Height.ToString() != "") rolloverButton += " height=" + base.Height.ToString();Resmin yükseklik özelligini ekledik…

if (Width.ToString() != "") rolloverButton += " width=" + base.Width.ToString();//Resmin genislik özelligini ekledik…

rolloverButton+=" name=""+ this.UniqueID.ToString() + "" src='" + ImageUrl.Replace("~/", "")

+ "' onMouseOut="JavaScript:newRollOver('"

+ this.UniqueID.ToString() + "', '" + ImageUrl.Replace("~/", "")

+ "');" onMouseOver="JavaScript:newRollOver('"

+ this.UniqueID.ToString() + "', '" + HoverImageUrl.Replace("~/","") + "');">";

if (navigateURL !="") rolloverButton += "</a>";

writer.RenderBeginTag(HtmlTextWriterTag.Div);

writer.Write(rolloverButton.ToString());

writer.RenderEndTag();

 

}

catch

{

writer.RenderBeginTag(HtmlTextWriterTag.Div);

writer.Write("<img src="">");//Resim ilk eklendiginde bos bir resim gelsin…

writer.RenderEndTag();

}

 

 

}

 

 

}

 

// Simdi de Browse penceresi açildiginda bu pencerenin title’ni degistiriyoruz..

 

public class UrlGraphicEditor : UrlEditor

{

// Properties

protected override string Caption

{

get

{

return "Lütfen Birseyler Seçiniz";

}

}

}

 

 

 

}

Simdi test için projemize bir web site ekleyelim. Bu web Site’in Referencelerina olusturdugumuz WebControlLibrary’i ekleyelim.

 
 
   
Bugün 13 ziyaretçi (20 klik) kişi burdaydı!
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol