Resimli Sözler
Her sayfada kendini yenileyen resimli sözler yapımı.
Bu çalışmada yine php dosyayı javascript olarak kullanacağım. Kodlar ayarlanarak js dosyasında da yapılabilir ama ben yapmadım 🙂 Ayrıca gereksiz yerleri silip resimsiz düz rastgele sözde basabiliriz.
Önce resimli-sozler klasörü ile içinde de index.php dosyası oluşturuyorum. Dosyaya rastgele çıkmasını istediğim sözleri ve söz sahiplerini array olarak yazıyorum.
|
1 2 3 4 5 6 7 8 9 10 |
<?php /* ibrahimay.net İbrahim AY Resimli Sözler */ $soz[]="Acayip şeyler, acayip düşüncelerden doğarlar."; $image[]="shelley"; $author[]="SHELLEY"; $soz[]="Barışı korumanın en iyi yolu, savaşa hazır olmaktır.<br><sub></sub>"; $image[]="washington"; $author[]="WASHİNGTON"; $soz[]="Dünya malı için çalışmak kolay fakat hesabından kurtulmak zordur."; $image[]="anonim"; $author[]="FUDAYL BİN İYAZ"; $soz[]="Millete efendilik yoktur. Hadimlik vardır."; $image[]="ataturk"; $author[]="ATATÜRK"; $soz[]="Tartışmasını bilmeyenler kavga ederler."; $image[]="chesterton"; $author[]="CHESTERTON"; |
Bu söz sahiplerinin resimleri lazım. resimli-sozler klasöründe img klasörü açıp aşağıdakileri adlarını bozmadan içine kayıt edelim.
 |
 |
 |
 |
 |
Bu sözlerden rastgele seçim yapıyorum.
|
11 12 |
$sayi=array_rand($soz); $yazi=$soz[$sayi]; |
Sözü, varsa sözün sahibinin resmi üzerinde , yoksa anonim resim üzerinde göstermek için resmin tam adresini belirliyorum. Resmi style kodları ile arka plan yapacağım.
|
13 |
$resimurl="".$GLOBALS["urls"]."Betikler/resimli-sozler/images/".$image[$sayi].".jpg";; |
Sözün sahibinin ismini de yazmak istiyorum.
|
14 |
$yazar=$author[$sayi]; |
Resmin boyutunu GET ile belirlemek istiyorum.
|
15 16 |
$width = (isset($_GET["w"])) ? $_GET["w"] : 250; $height = (isset($_GET["h"])) ? $_GET["h"] : 250; |
Buraya kadar ekrana basmak istediğim bilgileri ayarladım. Artık index.php dosyama sen javascriptsin diyorum.
|
17 |
header("content-type:text/javascript; charset=utf-8"); |
Gerisi javascript kodu. Resim boyutlarını tanımlıyorum, bunları style içinde kullanacağım.
|
18 19 |
echo "var width = $width;\n"; echo "var height = $height;\n"; |
PHP’yi kapatıyorum, lazım olursa açarım.
|
20 |
?> |
İş sonunda resimlerimi idsi resimlisoz olan bir divde göstereceğim. Önce style kodlarımı bu divin içine ekliyorum. Hiç bu eklemeyi yapmayıp bu kodları style.css dosyasına kayıt edip sayfaya ekleseniz de olur diyeceğim, olmaz 🙂 Arka plan resimleri değişken, sabit değil. Şu olur; resimli kısımların style kodunu yani background-image:url tanımlarını burada tutup, diğerlerini ayrı css dosyasında ekleyebilirim. Ama eklemiycem 🙂
|
21 22 23 24 25 26 27 28 29 |
document.getElementById('resimlisoz').innerHTML+=`<style type="text/css"> @import url("https://fonts.googleapis.com/css?family=Righteous"); sub{font-size:small;} #sozler:hover sub{position:relative; font-size:large;color:red;z-index:1000; background-color: black;} #sozler {font-family: 'Righteous', cursive; font-size:larger; color:black; position:relative;z-index:1; text-align:center; width:`+width+`px; height:`+height+`px; padding:0px; background-color:none; border:0px ridge blue; border-radius:1px; text-decoration:none; display: table-cell; vertical-align: middle;} #sozler::after {content:""; background-size:100% 100%; background-image:url(<?php echo $resimurl; ?>); background-repeat:inherit; opacity:0.2; top:0; left:0; bottom:0; right:0; position:absolute; z-index:-1; border-radius:25px;} #sozler:hover::after {content:""; background-size:100% 100%; background-image:url(<?php echo $resimurl; ?>); background-repeat:inherit; opacity:1; top:0; left:0; bottom:0; right:0; position:absolute; z-index:1; border-radius:25px;} </style>`; |
Son olarak divimi yazıyorum.
|
30 31 32 |
document.getElementById('resimlisoz').innerHTML+=` <?php echo "<div id='sozler'>$yazi<br><a href='//ibrahimay.net?p=509' target='_blank' style='text-decoration:none;'><sub>$yazar</sub></a></div>"; ?> `; |
Linkimi de koydum, ayar çekersiniz, silmekle uğraşmayayım. Artık resimli sözlerim görüntülenmek için hazır. Resimli sözü nerede görmek istiyorsam oraya resimlisoz divimi ekliyorum.
|
1 |
<div id="resimlisoz"></div> |
Henüz görüntü gelmez tabi, sitemin sonuna (en azında resmi göstereceğim bu divden sonra) scriptimi ekliyorum.
|
1 |
<script src="/resimli-sozler/index.php?w=250&h=250"></script> |
Hazır dosyaları indirmek isterseniz :
Dosyalar üyelere özeldir: Giriş Yap
Yeni misin? Kayıt ol
1 Response
[…] önce Resimli Sözler ile style kodlarından yararlanarak her sayfada değişen (kendini yenileyen) resimli sözler […]