İPUCU

Seçenekler

Resim üzerine gelince MP3 çalma

mhhck - ait Kullanıcı Resmi (Avatar)
Üye
Üyelik tarihi:
04/2009
Nereden:
K.IRAK
Mesajlar:
3.604
Konular:
1185
Teşekkür (Etti):
451
Teşekkür (Aldı):
782
Ticaret:
(0) %
06-05-2014 01:09
#1
Resim üzerine gelince MP3 çalma
Merhaba,

Bir çok webmaster arkadaşımızın sitesinin belli yerlerinde, belli resimlerin üzerine mause ile gelince şarkılar çalıyor. Bu kervana bende katılmış bulunuyorum Kendi sitemin anasayfasında bulunan slogan icokunun üzerine gelince bu aralar çok sıklıkla dinlediğim bir YALIN şarkısı çalıyor.






Resim Mp3

Yukarıda kendi stemin screen’indede gördüğünüz gibi MP3′e dair herhanbi bir belirtici resim yada bişey kullanmadım. Tek yaptığım icona mause over kodu vermek oldu. Şimdi bu mp3 çalma olayını kendi sitelerine uygulamak isteyecek arkadaşlara nasıl apılacağını anlatmaya çalışayım.

Not: Benim sitemde kullandığım alt yapı ‘WordPress’ olduğu için wordpress bazlı anlatıcam ancak aynı işlemleri farklı yazılım dilleri ile oluşturulmuş sitelerdede kullanabilirsiniz. Öncelikle yapacağımız işlemde kullanacağımız temel kodlara bakalım;

Kod:
<!DOCTYPE html>
<html>
**********
function oynat(){
var player= ********.getElementById(‘pl’);
player.play();}
</script>
<body>

<audio id=”pl”>

<source src=”http://www.ctylmz.com/yeniden.mp3″ type=”audio/mpeg”>
</audio>
<img src=”http://ctylmz.com/wp-content/uploads/2014/05/logo.png” onmouseover=”oynat()”/>
</body>
</html>
Yukarıdaki kodu boş bir sayfaya yapıştırıp HTML olarak kaydedin ve istediğiniz alana yükleyin, sonrasında mause ile üzerine geldiğinizde benim belirlediğim şarkı çalacaktır. Ancak biz bunu wordpress sitemizin bir alanında kullanacağımız için HTML kodlarına ihtiyacımız yok.

Örnek olarak benm kendi siteme uyguladığım şekli anlatıcam arkadaşlar, başlangıç olarak ‘**********’ ile başlayıp ‘</script>’ ile biten kodları temamızın header.php sayasında bulunan ‘<body>’ tagından önce ekliyoruz. Daha sonra ‘<audio id=”pl”>’ ile başlayıp ‘</audio>’ ile biten kod betiğinide ‘<body>’ tagının içerisine yani tagdan sonra herhangi bir yere ekliyoruz. Son olarakda hangi resmin üzerine gelindiğinde müzik çalsın istiyorsan o resmin ‘<img src=”resimyolu”/>’ kodunun kapama parantezinden hemen önce ‘onmouseover=”oynat()”‘ kodunu ekliyoruz ve kaydedip çıkıyoruz. Değişiklik yaptığımız tema sayfalarını sitemiz tema klasörüne tekrar yükleyip kaptıyoruz.

Arkadaşlar uygulama konusunda çok iyiyimdir ancak anlatımda pek iyi olduğum söylenemez. Klavyem vardığınca anlatmaya çalıştım, eğer yapamayan olursa yorum alanında mesaj bırakıp yardım isteyebilir.

Not: Mp3 dosyasını kendi sunucunuzda barındırmanızı tavsiye etmem…
--------------------- -------------------------------------------

Bookmarks


« Önceki Konu | Sonraki Konu »
Seçenekler

Yetkileriniz
Sizin Yeni Konu Acma Yetkiniz var yok
You may not post replies
Sizin eklenti yükleme yetkiniz yok
You may not edit your posts

BB code is Açık
Smileler Açık
[IMG] Kodları Açık
HTML-Kodları Kapalı
Trackbacks are Kapalı
Pingbacks are Kapalı
Refbacks are Kapalı