myNotlar Logo

onmouseover ve onmouseout ile Dönüşüm (Rollover) Uygulaması


Internet Explorer Firefox Opera

Bu konu, onmouseover ve onmouseout olay tutucuları kullanılarak herhangi bir HTML elementinde, resim değiştirme veya metin efektleri gibi konulardan bağımsız olarak herhangi bir dönüşüm (rollover) işleminin nasıl yapılacağını göstermektedir.

HTML dokümanlardaki neredeyse tüm elementler için geçerli olan onmouseover olayı, fare imleci ile elementin/nesnenin sayfa üzerindeki kapladığı alana girildiği zaman tetiklenir. Bu alandan çıkıldığı zaman ise onmouseout olayı tetiklenir. Bu olayların tetiklenmesi kendilerine JavaScript addEventListener veya attachEvent metodları ile "bağlanacak" bir yordamın (method) bu olaylar gerçekleştiği zaman çalıştırılmasını sağlayacaktır. Bu durumda ilgili yordamlar ile, hem girişte hem de çıkışta isteğe bağlı bir işlem yapma imkanı sağlanmış olur.

Aşağıda örnek, bir HTML <A> elementinin onmouseover ve onmouseout olay tutucularını kullanılarak style nesnesinin color ve backgroundColor özelliklerinin değiştirilmesini göstermektedir.

<style type="text/css">
.ornekLink
{    
    padding:5px 15px 5px 15px;
    border:solid 2px blue;
    color:blue;
    background-color:white;
    font-weight:bold;
}
</style>

<script type="text/javascript"> function mouseover(elem) { elem.style.backgroundColor = 'blue'; elem.style.color = 'white'; } function mouseout(elem) { elem.style.backgroundColor = 'white'; elem.style.color = 'blue'; } </script>
<a class="ornekLink" href="#" onMouseOver="mouseover(this)" onMouseOut="mouseout(this)">myNotlar</a>
Test Edin
myNotlar

Örnek üç bölümden oluşmaktadır. İlk bölümde <A> elementinde kullanılmak üzere varsayılan padding, border, color, background-color ve font-weight DOM Style (CSS) özellikleri ornekLink sınıfı (class) içinde isteğe göre tanımlanmıştır.

İkinci bölümde, fare işaretçisi ile element üzerine gelindiğinde yapılacak işlemleri gerçekleştirmesi için isteğe göre isimlendirilmiş mouseover metodu ve fare işaretçisi element üzerinden ayrıldığında gerçekleştirilecek işlemler için gene isteğe göre isimlendirilmiş mouseout metodu bulunmaktadır. mouseover metodu parametre olarak "referansını" aldığı nesnenin style alt nesnesini kullanarak arka plan rengini mavi, yazı rengini beyaz yapar. mouseout metodu ise parametre olarak "referansını" aldığı nesnenin arka plan rengini beyaz, yazı rengini mavi yapar. Aslında burada mouseout metodu, bu örnek için elementin varsayılan yazı ve arka plan renklerini uygular.

Üçüncü bölümde ise HTML <A> elementi üzerinde ornekLink isimli CSS sınıfı ile mouseover ve mouseout metodlarının uygulanması gösterilmektedir. Uygulaması karmaşık olmayan bu örnekteki belki de ince ayrıntı this anahtar kelimesidir. this anahtar kelimesi <A> elementinin "nesne referansının" mouseover ve mouseout metodlarına argüman olarak aktarılmasını sağlar. Başka bir ifadeyle, HTMLAnchorElement sınıfının örneği olan <A> elementinin kendisini bu metodlara parametre olarak aktarır.

Bu şekildeki dönüşüm işlemi ayrıca className özelliği ile gerçekleştirilebilir. Bu işlem için iki farklı CSS sınıfı tanımlandıktan sonra mouseover ve mouseout isimli metodlar içinde aşağıdaki gibi kullanım yeterli olacaktır.

<script type="text/javascript">
function mouseover(elem) {
    elem.className = 'sinif1';
}
function mouseout(elem) {
    elem.className = 'sinif2';
}
</script>

Hatta sınıflar, bu metodlar dahi kullanmadan elementin içinde "dahili kod" ile aşağıdaki gibi değiştirilebilir.

<a class="ornekLink" href="#" 
    onMouseOver="this.className = 'sinif1'" 
    onMouseOut="this.className = 'sinif2'">myNotlar</a>

Aşağıdaki örnek, yukarıdaki örneğin iki CSS sınıfı tanımlanıp elementin className özelliğini kullanarak renk dönüşümü (rollover) uygulanmasını göstermektedir.

<style type="text/css">
.ornekSinif1, 
.ornekSinif2
{
    padding:5px 15px 5px 15px;
    border:solid 2px blue;
    font-weight:bold;
}
.ornekSinif1 {
    color:blue;
    background-color:white;
}
.ornekSinif2 {
    color:white;
    background-color:blue;
}
</style>

<a class="ornekSinif1" href="#" 
    onMouseOver="this.className = 'ornekSinif2'" 
    onMouseOut="this.className = 'ornekSinif1'">myNotlar</a>

NOT : Sitede <a> elementi için önceden tanımlanmış CSS sınıfları olduğu için, bu örneğin uygulanmasında tam sonuç görülememektedir. Bu yüzden örneği, kendinizin oluşturduğu boş bir HTML dokümanın BODY etiketleri arasına kopyalayarak deneyebilirsiniz.

 
myNotlar Hakkında
Telif Hakkı © 2007-2009 mynotlar.com Tüm Hakları Saklıdır. Kopyalanamaz. Yayınlanamaz.
E-Posta : support@myNotlar.com

| Tek Kişilik Oyunlar | Sudoku | Oyunlar |