Ölçeklendirilebilir textarea ve Anlık düzenleme

Merhabalar, Sonzamanlarda yazdığım tüm scriptleri bir framework olarak bir araya topluyorum, saha tamamlamadım ancak yapımı sırasında da çok hoşuma giden ve herkesin işine yarıyacağını düşündüğüm bazı scriptler de yazdım ve onları sizlerle paylaşmak istedim, tabi bu arada yazdığım framework'ün de beta versiyonunu görmüş olacaksınız. framework tamamen bittiği zaman onun için ayrıca bir yazı ve dökümanasyon da hazırlayacağım şimdilik sadece bazı fonksiyonlara bakalım.

Yeni framework birçok özellik içericek bunlar genelde bir website inşaa ederken ihtiyac duyabileceğiniz çeşit çeşit fonksiyonlardır, ben bunların arasından eylenceli olan iki tanesini seçtim. umarım işinize yarar. bunları kullanabilmek için Framework.js dosyasını yüklemeniz gerekmektedir.

Blogger javascriptle ilgili bir sorun yarattı için kod örneklerini farklı bir sayfaya taşımak zorunda kaldım.

Ölçeklendirilebilir Textarea
Ölçeklendirilebilir textarea yı yaparken Drupal'dan esinlendim, kod olarak değil ama prensip olarak aynısını yaptım diyebiliriz. Peki nedir bu? sitenizdeki textarea lara ortak bir class ismi verin ardından aşağıdaki örnek fonksiyonu o class ismiyle birlikde çağırın, artık kullanıcılarınız yazı alanlarını istedikleri gibi ölçeklendirebilecekler.

Örnek sayfası

Anlık Düzenleme
Anlık düzenleme bizim zaten JotForm üzerinde kullandığımız birşeydi daha sonra diğer sitelerde de çok popüler oldu bende bunu bir fonksiyon haline getirdim artık belirlediğiniz class ismine sahip bir div, span yada benzeri objeyi bu anlık düzenleme kutularına dönüştürebilirsiniz. Mantık aynı. Ayrıca bunlara işlem tamamlandığında çalıştırmak istediğiniz fonksiyonlarıda verebilirsiniz aynı benim öneğimde olduğu gibi yeni değeri alıp ekrana basmasını istiyorum, siz ajaxla database'de yollayabilirsiniz :)

Örnek sayfası

Bu arada örnekde kullandığım Debug.echo fonksiyonu da framework tarafından yaratıldı. resize, drag&drop gibi özellikleri framework'ü inceleyerek keşfedebilirsiniz.
Herzamanki gibi umarım işinize yarar.

Browser information object

Merhaba,
Bu yazımda size kısa ve işe yarar bir koddan bahsedeceğim.
Hepimizin bildiği gibi JavaScript server tarafında değilde client yani kullanıcı tarafında çalışır. Bu durum bize bir çok avantaj sağlar, bu avantajlardan biride web sitemizin kullanıcı kitlesi hakkında bir çok bilgiye ulaşabilmemizdir. Mesela işletim sistemi, işlemcisi, ekran çözünürlüğü, kullanılan browser, sürümü hatta cookie'lerin çalışıp çalışmadığı gibi bilgiler.

Peki bu bilgiler ne işe yarar?
bu bilgileri kullanarak kullanıcı kitlenizi tespit edebilirsiniz ve web sitenizi buna göre ayarlayabilirsiniz mesela kullanıcılarınızın %80'i 800X600 çözünürlük kullanıyor, demekki sizinde sitenizde bu duruma göre bir ayarlama yapmanız gerekiyor yada kullanıcılarınızın %90'ı firefox kullanıyor o zaman IE bug'larıyla okadarda uğraşmanıza gerek yokmuş :) peki bu bilgileri nasıl toplayacağız.

Bunun için bir obje yazdım gayet derli toplu oldu.

// Define Browser
function Browser(){
   this.name          = navigator.appName;
   this.codename      = navigator.appCodeName;
   this.version       = navigator.appVersion.substring(0,4);
   this.platform      = navigator.platform;
   this.javaEnabled   = navigator.javaEnabled();
   this.cookieEnabled = navigator.cookieEnabled;
   this.userAgent     = navigator.userAgent;
   this.screenWidth   = screen.width;
   this.screenHeight  = screen.height;
   this.loc           = window.location.href;
   this.referrer      = (document.referrer)?     document.referrer     : "Direct";
   this.charSet       = (document.characterSet)? document.characterSet : document.charset;
   this.language      = (navigator.language)?    navigator.language    : navigator.browserLanguage;

   this.information = function(){
         info  = "\n== Client Descriptions ==\n";
         info += "Application Name is: "      + this.name          + "\n";
         info += "Application Code name is: " + this.codename      + "\n";
         info += "Application Version is: "   + this.version       + "\n";
         info += "Location: "                 + this.loc           + "\n";
         info += "Referrer: "                 + this.referrer      + "\n";
         info += "User agent: "               + this.userAgent     + "\n";
         info += "Platform is: "              + this.platform      + "\n";
         info += "Is java Enabled?: "         + this.javaEnabled   + "\n";
         info += "Is Cookie Enabled?:"        + this.cookieEnabled + "\n";
         info += "Language: "                 + this.language      + "\n";
         info += "Document Character Set: "   + this.charSet       + "\n";
         info += "Client screenWidth: "       + this.screenWidth   + "\n";
         info += "Client screenHeight: "      + this.screenHeight  + "\n";
         return info;
   }

   this.alert = function(){
         alert(this.information());
   }
}

Bu kodu kullanmak oldukça kolay. ilk önce bu objeden bir instance yaratmalıyız

var info = new Browser();

Artık browser bilgilerine info.information(); method'unu kullanarak ulaşabilirsiniz bu method kullanıcıdan toplanan bilgileri okunabilir bir string haline çevirip geri döndürür.
aynı çekilde info.alert(); method'uda bu mesajı alert box içerisinde gösterir.
bir deneyelim info.alert()

Sonuç genelde şuna benzer birşey olmalıdır:

== Client Descriptions ==
Application Name is: Microsoft Internet Explorer
Application Code name is: Mozilla
Application Version is: 4.0
Location: http://www.jotform.com/results.php

User agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)

Platform is: Win32
Is java Enabled?: true
Client screenWidth: 1280
Client screenHeight: 1024


Bu yöntemle alınan bilgiyi biz jotform'un error report'ları için kullanıyoruz.

bir runtime error oluştuğunda jotform sessizce ajax yoluyla bu error'u ve kulanıcı bilgilerini bize yolluyor bizde biran önce bu erroru onarıyoruz.

Jotform'un yaptığı şu:

var iserrorsent = false; // Global to check error status (sent or not sent)
// Error Handling, Handle errors gracefuly
window.onerror = function(desc, file, line, chr){
   // Ignore these errors
   if(desc.match(/onBG|offBG|buttonOver|buttonOut|buttonDown/gim)){ return true; }
   var info = new Browser();

   // Create message
   message  = "\n== Error Descriptions ==\n";
   message += "Error: "+ desc +"\n";
   message += "Ocuured in: "+ file +"\n";
   message += "Occured on line: "+ line +"\n";
   message += info.information();
   // Send message
   if(!iserrorsent){ //Dont send more than one error in one session
         reportError(   message   ,"Error occurred in Jotform: "+desc);
         iserrorsent = true;
   }
   return true;
}

// Send errors by ajax
function reportError(desc,title){
   var res = makeRequest("action=report_error" + "&title=" + encodeURIComponent(title) + "&desc=" + encodeURIComponent(desc));
}

Tabi burda karşımıza yeni bir şey daha çıktı window.onerror onerror event'i browserda runtime error oluştuğunda tetiklenen event'tir tam kullanımı şudur.

window.onerror = function(description, fileLocation, lineNumber){
   message  = "\n== Error Descriptions ==\n";
   message += "Error: "+ description +"\n";
   message += "Ocuured in: "+ fileLocation +"\n";
   message += "Occured on line: "+ lineNumber +"\n";
   alert(message);
}

Umarım bu bilgiler işinize yarar hepinize iyi çalışmalar.

JavaScript Button Rollover

Merhaba,
Bu yazımda biraz daha dizayn ağırlıklı bir konudan bahsedicez.
Konumuz rollover button'lar. Bilmeyenler için bir hatırlatma yapalım, Rollover bir çok sitede gördüğünüz farenin bir butunun veya bir imajın üzerine gelmesiyle o nesnenin değiştirilmesi işlemine verilen isimdir.

Bu işlem çoğunlukla web sitelerdeki tuşları tanımlamak ve tıklanabilir olduklarını anlatmak için kullanılır.

Aslında birçok kişi bu konuya Dreamweaver'dan aşina. Dreamweaver sizin için otomatik olarak rollover imagelar yaratabiliyor. Ancak yarattığı kod o kadar çirkin ve kullanışsızki, her yeni rollover image eklediğinizde HTML'inize birsürü karışık kodlar ekleyip daha sonra içinden çıkamıyacağınız bir hale getiriyor.
Bu iş için çok basit bir CSS Çözümü var aslında ancak IE herzamanki gibi oyun bozanlık yapıp bunu kullanmamızı engelliyor. Yinede ben %90 lık IE kullanıcılarını umursamıyorum diyorsanız CSS yöntemini bi hatırlatalım

.rollover{
   background:url(images/button.gif);
}

.rollover:hover{
   background:url(images/button_over.gif);
}

.rollover:active{
   background:url(images/button_down.gif);
}

Kodu biraz tanımlarsak. .rollover{ image'ın normal durumu .rollover:hower image'ın mouseover durumu ve .rollover:active ise image'ın mousedown durumudur. geri kalanı CSS sizin için halledicektir.
Gördüğünüz gibi oldukça basit, ancak iki kusuru var birincisi IE6 asla ne yapmaya çalıştığınızı anlamıyacak ve ikincisi her roll over image için ayrı ayrı bunları yazmanız gerekicek.

Durum böyle olunca bende kendi javascript fonksiyonumu yazmaya karar verdim. heryerde kullanılabilecek oldukça geliştirmeye açık ve anlaşılır olmasını istedim. Sonuçta JotForm üzerinde kullanıyoruz ve oldukça başarılı oldu.

İlk önce fonksiyonun nasıl çalıştığının bir örneğini görelim.



İlk tuş yukarda verdiğim CSS rollover örneğine ait. Alttaki iki tane ise benim javascript ile yaptığım örnekler
birisi normal imaj diğeri ise bir button, yazdığım fonksiyon ikisi arasındaki farkı anlayıp ona göre davranıyor. ayrıca fark ettiyseniz alttaki tuşda mousedown efekti yok buda fonksiyona gönderilen bir argumanla kapatılabiliyor.

evet şimdi fonksiyonu görelim.

function buttonOver(elem,noDown){
   var realImage = "";             // Should be empty. veriable to keep original background.
   var ext      = ".gif";          // Define Extention .gif .png .jpg
   var over_ext = "_over" + ext;   // Define subfix of images. Such as: image1.gif, image1_over.gif, image1_down.gif
   var down_ext = "_down" + ext;   // Define subfix of images. Such as: image1.gif, image1_over.gif, image1_down.gif
   var regEx = /\.\w+$|\.\w+\)$/;  // Remove extention of the image
   var preload_img = function(imgToLoad){
      var img = new Image;
      if(document.imageArray)
         document.imageArray.push(img.src = imgToLoad);
      else{
         document.imageArray = new Array();
         document.imageArray.push(img.src = imgToLoad);
      }
   }
   
   if(elem.style.backgroundImage){      // if object has a background.
      realImage = elem.style.backgroundImage.replace(regEx,"");  //Take original background and replace with over image.
      elem.style.backgroundImage = realImage + over_ext +")";
   }else if(elem.src){         // if object has a src .
      realImage = elem.src.replace(regEx,"");       //Take original background and replace with over image.
      elem.src = realImage + over_ext;
   }
   if(!noDown) preload_img((realImage + down_ext).replace(/^url\(/,"")); // Preload images
      elem.onmouseout = function(){ buttonOut(elem); }   // Define mouseout event.
      elem.onmousedown = function(){ buttonDown(elem); } // Define mousedown event.
      elem.onmouseup  = function(){ buttonUp(elem); }    // Define mouseup  event.
      var buttonOut = function(elem){      // on mouseOut revert back to original image.
         if(elem.style.backgroundImage){
            elem.style.backgroundImage = realImage + ext + ")";
         }else if(elem.src){
            elem.src = realImage + ext;
         }
      }
      var buttonUp = function(elem){      // on mouseUp revert back to mouseover image.
         if(elem.style.backgroundImage){
            elem.style.backgroundImage = realImage + over_ext +")";
         }else if(elem.src){
            elem.src = realImage + over_ext;
         }
      }
      var buttonDown = function(elem){    // on mouseDown replace with mouseDown image.
         if(noDown) return true;
         if(elem.style.backgroundImage){
            elem.style.backgroundImage = realImage + down_ext +")";
         }else if(elem.src){
            elem.src = realImage + down_ext;
         }
      }
}

buttonOver fonksiyonunu kullanmanız için ilk önce yapmanız gerek bir kaç küçük ayar var.
mesela fonksiyonun ilk satırındaki değerleri ayarlamak gibi.

function buttonOver(elem,noDown){
   var realImage = "";
   var ext      = ".gif";
   var over_ext = "_over" + ext;
   var down_ext = "_down" + ext;
[...]

Gayet açık kullanacağınız image'ların uzantısı ext, mouseover olduğunda gelicek resmin son eki over_ext, mousedown olduğunda gelicek olan resmin son eki down_ext
resimleriniz için genelde button.gif, button_over.gif, button_down.gif yada button.gif button2.gif button3.gif gibi isimler seçmeye özen gösterirseniz hem işinizde kolaylık sağlar hemde dosyaların yönetimi kolaylaşır.

Fonksiyon artık kullanıma hazır. fonksiyonu çalıştırmak için yapmamız grekende çok basit. Sadece mouseover event'inde buttonOver(this) yazarak çağırıcaz tek yapmamız gereken bu. Fonksiyon sizin verdiğiniz ayarlara göre davranarak diğer bütün eventleri ayarlayacaktır.
Ayrıca mousedown işleminde gelicek olan resim içinde küçük bir preload var.
eğer mousedown event'inin çalışmasını istemiyorsanız da buttonOver(this,true) diyerek çalışmasını engelleyebilirsiniz.

Fonksiyonla ilgili bir sorun yaşarsanız herzaman sorabilirsiniz.
İyi Çalışmalar.

Ajax için kullanışlı fonksiyonlar

Merhabalar.
7 aydır uğraştığımız projemiz JotForm'u tamamlama peşinde olduğumdan uzun zamandır blog'a vakit ayıramıyordum neyse ki JotForm başarıyla tamamlandı da sonunda içim rahat bi şekilde yazabiliyorum.

Neyse eğer Jotform'a girip bir bakacak olursanız sitenin işlevlerinin çoğunun ajax yoluyla yapıldığını hemen farkedeceksiniz. Özellikle yeni form yaratırken ve payment özelliklerini ayarlarken kullandığımız Wizard'lar tamamen ajax yoluyla yükleniyorlar.

Çalışmakta olan kodun üzerine server'dan yeni kod getirip sonra da çalışan kod dan bu yeni kod da bulunan bir javascript fonksiyonunu çağırmak istediğinizde ya da bu yeni çağırdığınız sayfadaki bir HTML elementini yakalamak istediğinizde bazı "zamanlama" hataları oluşuyor. Mesela, ya fonksiyonunuz daha sayfa yüklenmeden çalışıyor yada daha yaratılmamış bir elementi yakalamaya çalışıyorsunuz bazen de daha yüklenmemiş fonksiyonlara çağrı yapıyorsunuz. Tabi bunlar kişilerin internet hızlarına göre de değişim gösteriyor. Bu tür sorunları aşmak bizim için gerçekten de çok önemliydi bizde şu fikirle yola çıktık, bir fonksiyonu veya elementi çağırmadan varlığından emin olmalıyız eğer yoksa da yaratılana kadar beklemeliyiz.

Bu mantıkla bazı fonksiyonlar yazdık ve gerçekden işe yaradı, ben de sizinde işinize yarayabileceğini düşündüğümden burada paylaşmak istedim.

işte fonksiyonlar.

function isExist(funcName){
try{
 if(typeof eval(funcName) == 'function')
    return true;
 }catch(e){
    return false;
 }
}
}

isExist fonksiyonu isminden de anlaşıldığı gibi bir fonksiyonun varlığını kontrol ediyor. isExist("foo") ; şeklinde kullanmak gerek () kullanmadan sadece fonksiyonun ismini yollamanız yeterli size true yada false return edicektir.

function tryFunction(func,args,dur,trycount){
 args = args.replace(/\"/g,"'");
 trycount = (trycount)? trycount : 0;
 dur = (dur)? dur : 15;
 if(isExist(func)){
    eval(func + args);
    trycount=0;
 }else if(trycount < dur){
    trycount++;
    setTimeout("tryFunction(\""+func+"\",\""+args+"\","+dur+","+trycount+")", 100);
 }
}

tryFunction ise daha karmaşık, ayrıca isExist() fonkisyonunada bağımlı,şu şekilde çalışıyor, fonksiyon ismi ve argumanları verildiğinde bulana kadar deniyor bulursa da çalıştırıyor, bulamazsa hata vermeden çıkıyor.
iki şekilde kullanabilirsiniz,
ya tryFunction("funcName","(a,r,g,s)")
yada tryFunction("funcName","(a,r,g,s)",45)
sonuna eklediğiniz rakam fonksiyonu çalıştırmayı kaç kere deneyeceğini belirtiyor.
Buradaki 45, 4.5 saniye ye denk geliyor. hiç birşey vermezseniz de default olarak 15 alıyor.

function printInDiv(str,cnt){
 cnt = (cnt)? cnt : 0;
 if(document.getElementById('idDiv')){
    document.getElementById('idDiv').innerHTML = str;
 }else if(cnt < 45){
    cnt++;
    setTimeout("printInDiv('"+str+"',"+ cnt +")", 100);
 }else
    return false;
}

Bu bir fonksiyon değil bir yöntem,
burada varsayalım ki "printInDiv" diye bir fonksiyonumuz varmış ve biz bunu printInDiv("hello world") şeklinde kullanıyormuşuz. Ancak içine yazı koyulacak div, ajax'la geldiğinden ve hala yüklenmediğinden div element'inin orada olup olmadığını kontrol etmemiz gerek. fonksiyonu bu şekilde modifiye ettiğiniz zaman ya elementi bulup çalışıp durucak yada kendi kendisini 45 kere çağırıcak bulamayıncada hata verip durucak yine burda da 45, 4.5 saniye demek.

fonksiyonun eski hali şu şekildeydi

function printInDiv(str){
   document.getElementById('idDiv').innerHTML = str;
}

Bu yöntemler benim gerçekten çok işime yaradı umarım sizde faydasını görürsünüz.
İyi çalışmalar.

Gerçek Zamanlı Web Sayfası Düzenleme.

Selam,
Işte size çok güzel bi kod örneği.
bu kod sayesinde istediğiniz websiteyi Düzenleyebilirsiniz yazıların resimlerin yerini değiştirebilirsiniz. zevkli bi oyuncak. işte kod.

javascript:document.body.contentEditable='true'; document.designMode='on'; void(0);

yapmanız gereken tek şey istediğiniz site açıkkenn bu kodu alıp Adres Çubuğuna yapıştırmak
enter'a bastığınızda artık o sayfayı düzenleyebilirsiniz demektir.

bu kodu birçok WYSIWYG HTML editörleri kullanır. ben sacede browserdanda çalışabilmesi için değişiklik yaptım
iyi eğleneler :)

Bütün Form elementlerini değer olarak tanıtma, extract()

Merhaba,
Geçenlerde bir kod yazdım ve sizinle paylaşmak istedim. Bu kod body->onload event'inde çalıştırldığında bir form element'ini adeta

var textbox = document.getElementById("textbox");

şeklinde tanıtmışsınız gibi bütün elementleri yakalayıp id'lerine göre tanıtıyor.
Bu function'ın çok benzeri PHP'de de var yine extract ismiyle.
Neyse işte kod.

function extract(){
var ie = (document.all)? "var " : "";
var allelems = document.body;
for(var x=0;x < allelems.childNodes.length;x++){
  if(allelems.childNodes[x].id){
      eval(ie + allelems.childNodes[x].id + " = document.getElementById('"+ allelems.childNodes[x].id +"');");
  }
}
}

Bu fonksiyonun bazı problemleri var mesela body->onload'da luzümsüz şeyleri çalıştırmak programınızı yavaşlatabilir.
bunun yanında eğer form'unuzdaki elementlere id'olarak allocated isimler verdiyseniz. yani "window", "document", "if", "for", "while" gibi bu isimlerle değer tanıtmaya çalışacağından sorun yaratabilir.

Aslında bu probleminde bir çözümü var, değerleri şu şekilde:

var textbox = document.getElementById("textbox");

tanıtmak yerine, bu şekilde tanıtın.

var elems = new Array;
elems["textbox"] = document.getElementById("textbox");
elems["textbox2"] = document.getElementById("textbox2");

Bu sorunu çözecektir. size formdaki bütün elementleri içeren bir associative array vericek.

Çokta kullanışlı bir function olmadığını biliyorum. ancak bazı özel durumlarda mesela dosya boyutunu düşürmede kullanılabilir. neyse umarım işinize yarar,
iyi çalışmalar.

Rating Stars, Websitenize Yıldız Temalı Rating Ekleyin.

Bir çok sitede gördüğünüz rating yıldızcıklarını artık kendi sitenizede ekleyebilirsiniz.
İşlem oldukça basit.

Öncelikle yıldız resimlerinin içinde bulunacağı bir table yapmalıyız.

<table id="starTable" width="75" height="15" border="0" cellpadding="0" cellspacing="0" background="star0.gif" onMouseOut="resetRate(this)">
<tr>
  <td width="15" height="15" onMouseOver="changeRate('1')" onClick="rate(this,'1')"></td>
  <td width="15" onMouseOver="changeRate('2')" onClick="rate(this,'2')"></td>
  <td width="15" onMouseOver="changeRate('3')" onClick="rate(this,'3')"></td>
  <td width="15" onMouseOver="changeRate('4')" onClick="rate(this,'4')"></td>
  <td width="15" onMouseOver="change('5')" onClick="rate(this,'5')"></td>
</tr>
</table>

table'a ilk baktığımızda sanki ayrı ayrı yıldızlar varmış gibi gözükmesine rağmen aslında toplamda altı resim var.
Bir tane bütün yıldız ların sönük olduğu resim, ardından bütün yıldızların yanık olduğu resme kadar sırayla artan 5 resim daha. bu mantıkla işlem bir anda bebek işine dönüşüyor.
Şimdi kod'a dikkat ettiyseniz 3 adet function görürsünüz
bunlar
changeRate()
rate()
resetRate()
Ayrıca table'a birde background-image verdim bu image sıfır rating'i temsil ediyor.
functionların Şimdi hepsini bir bir açıklayalım Örnek kodu'da altta

function changeRate(val){
  document.getElementById('starTable').style.backgroundImage = "url(star"+val+".gif)";
}

function rate(val){
  document.getElementById('rated').value = val;
}

function resetRate(elem){
  var val = document.getElementById('rated').value;
  if(val == "")
      elem.style.backgroundImage="url(star0.gif)";
  else
      elem.style.backgroundImage="url(star"+val+".gif)";
}

onMouseMove event'inde çağırdığımız changeRate function'ı mouse'u üzerine getirdiğimiz TD'ye göre Table'ın background image'ını değiştiriyor. buda yıldızların dolma boşalma efektini oluşturuyor.
funtion table'ı id'sinden yakalayıp backgraound image olarak daha önceden hazırladığımız ve akıllıca isimlendirdiğimiz yıldız resimlerini atıyor. akıllıca diyorum çünki verdiğimiz isimler şöyle
star0.gif
star1.gif
star2.gif
vs.
hangi rating verildiyse
"star"+val+".gif"
diyerek sadece bir seferde if kullanmadan resimlere ulaşabiliyoruz.
bu tarz dosya isimleri çoğu zaman hayat kurtarır.
---
onMouseClick event'inde çağırdığımız rate function'ı tek değer alıyor. buda rating değeri.
function basitçe kendisine gönderilen değeri bir textbox'ın içine yazıyor. seçilen değeri bir yerlerde tutmalıyızki daha sonra yıldızlarımız kaç seçtiğimizi hatırlayabilsin.
bu function aslında en önemli function çünki oylama burda yapılıyor ve gerçek bir uygulamada bütün içeriği bu function'a yazmanız gerekebilir. isterseniz direk PHP ile istereniz (ki daha uygun) AJAX ile seçili değeri database'inize gönderebilirsiniz. textbox yerine hidden field kullanabilirsiniz ben burda demo olduğu için bir textbox kullandım.

Rating:
<input type="text" id="rated" />

---
Üçüncü ve son functionda resetRate Function'ı mouse'umuzu yıldızların üzerinden çektiğimizde değerlerini unutmamalarını ve göstermeye devam etmelerini sağlayan function. bu function'ı yıldızların tamamını kapsayan table'ın onMouseOut event'ine koyduk ki mouse terk ettiğinde çalışsın.
function direkt textbox'ımızın içindeki değere bakıyor. eğer textboxda hiçbirşey yoksa sıfır nolu resmi eğer bir değer varsada changeRate'de yaptığımız gibi o değerin resmini çağırıyor. bu functionda textbox'ın içindeki değeri doğrulayan herhangi bir kontrol kod'u koymadım çünki zaten büyük olasılıkla hidden kullanıcaksınız.
--
kodlar gayet basit olduğuiçin istediğiniz gibi düzenleyebilirsiniz. Örnek kod için buraya

Jotform.com

Sonzamanlarda sürekli üzerinde çalıştığım site Jotform.com. Şuan yurt dışında oldukça sık kullanılan bu site sayesinde web tabanlı formlar yaratabiliyorsunuz. bu size çok kolay bi şekilde web sitenize e-mail formu. contact formu. yada anketler, nebiliyim rezervasyon bilgileri fln filan toplama formları eklemeimkanı sağlıyor. ve bunu okadar kolay yapıyorsunuzki adeta istediğiniz form'u kağıda yazar gibi. Jotform sadece bununlada yetinmiyor birde size bu sonuçları listeliyor raporluyor. e-mailinize gönderebiliyor. EXCEL formatında sonuç verebiliyor. Ayrıca en güzel özelliklerinden biri Upload yapılabilmesi. yani form'unuza eklediğiniz bir soruya cevap olarak insanlardan word dosyaları isteyebilirsiniz. yada fotoğraflarını vs. Jotform'da işler okadar kolayki ortaya birşeyler çıkarmak için üye olmak bile zorunda değilsiniz. site açılır açılmaz karşınıza basit bir form geliyor burda yeni sorular ekleyebiliyorsunuz hemde inanılmaz bir şekilde sürükleyip bırakarak. daha sonra next'e basarak ilerliyorsunuz ve siteye kaydolup kaydolmama kararını verebiliyorsunuz. o an kaydolduğunuzda (sadece e-mail ve şifre) üzerinde çalıştığınız form kaybolmuyor ve devam edebiliyorsunuz. yinede kaydolmak istemezseniz jotform sizi hala unutmuyor aynı bilgisayarda tekrar açtığınız jotform size kaldığınız yerden devam etme olanağı sunuyor. üstüne üstlük bu kaydetmeden hazırladığınız formların kaynak kodlarını alıp websitenizde kullanabilirsiniz. Web 2.0 teknolojilerinin tamamını bünyesinde barındıran jotform alt yapı olarakda ajax tekniğini kullanıyor böylece siteyi kullanırken en fazla 2 kere sayfanın yenilendiğini görüryorsunuz. hesap oluştururken bile sayfanız yenilenmiyor. Jotform şuan kolay kullanım özellikleri ve web 2.0 yetenekleri ile yurt dışında oldukça ilgi görüyor ve en ama en güzeli TAMAMEN BİR TURK TARAFINDAN GELİŞTİRİLDİ. Jotform'un Geliştiricisi olan Aytekin TANK'ın Blog'una buradan erişebilirsiniz. Şuan için tamamen ücretsiz olan Jortform'un yakın zamanda yeni bir sürümü çıkacak. bu sürümde şuan size açıklayamayacağım bir çok özellik bulunacak ve ayrıca paralı bir abonelik hesabıda mümkün olucak. ancak bu ücretsiz kullanıcıları bugüne kadar yaptıkları hiç birşeyden alı koymayacak. Jotform'u bir kere mutlaka deneyin eminim çok işinize yarıyacak.