İlk önce şunları söylemek istiyorum: 4 şekil link durumumuz vardır.
1- a hali yani ilk hali
2- visited linke tıklandıktan sonraki hali
3- hover hali linkin üzerine geldiğimi zamanki hali
4- active hali yani tıkladığımız zamanki hali
Şimdi bir style dosyası oluşturuyoruz uzantısını da css yapıyoruz, (yani style.css gibi) sonra içine bunları yazıyoruz.
.link {font-size:24px; color:#990000; text-decoration:none;font-family:verdana;}
.link a{background-image:url(buton1.jpg)}
.link a:hover{background-image:url(buton2.jpg); background-position:center; background-repeat:no-repeat}}
Ben style adına link kullandım, siz başka birşey kullanabilirsiniz, özellikleri de değiştirebilirsiniz.
Şimdi bu kodda diyor ki, link halindeyken "buton1.jpg" olsun, mause ile üzerine gelince "buton2.jpg" çıksın. Şimdi bu kodları nasıl sayfama bağlıyacağım diyorsanız:
İki <head></head> arasına:
<link href="style.css" rel="stylesheet" type="text/css">
yazıyoruz ya da Macromedia Dreamweaver'den sağ tarafdan desing seçerek mause'unu boş ve beyaz olan alana getirerek sağ tuş tıklayıp oradan "attach style sheet" Seçtikten sonra Browse'dan oluşturduğu CSS dosyasını seçerek de yapabilirsiniz.
Eğer butonlar tablo içindeyse muhakkakda tablo içindedir <tr> nin içine girip yada <td> nin içine girip class="link" dediğimizde işlev gerçekleşir.
