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.
