قرار دادن آسان متن در عکس توسط تگهای HTML

[Maya]

سلام بر دوستان

امروز داشتم، مثل گذشته ها تو وب گشت و گذار میکردم که به یک ترفند خیلی ساده ولی در عین حال جذاب و شاید هم کاربردی برخوردم .
گفتم این مطلب رو اینجا بزارم تا دوستان نیز استفاده کنند و شاید هم مسخره
این کار توسط تگهای ساده HTML انجام میشه و نیازی به دانش زیاد نیست.
خب میشه توسط چند خط کد زیر این کار رو انجام داد:

کد پی‌اچ‌پی:

<table cellspacing="0" cellpadding="0" border="0">
        <tr>
            <td  width="400" height="100" style=" background-image:url(http://forum.iranphp.org/images/logo.jpg);background-repeat:no-repeat"valign="bottom"><font size="+1" color="yellow">IRANPHP.org</font></td>
        </tr>
</table> 


شما فقط کافیه آدرس عکس و متن مورد نظرتون رو با اون چیزی که تو کد هست تعویض کنید.
البته این کار رو میشد با تگهای div نیز انجام داد،ولی این شگرد راحتتر و جالبتر بود...

با این ترفند چیزی مثل شکل زیر خواهید داشت:

البته این کارو میتونید به صورت صفحه Html از این لینک ببینید.

ترفند خوبی بود،ارزش وقت گذاشتن داشت

[Na3r]

با html خالی که نمیشه این کار رو کرد
ترکیب html و css این کار

[Maya]

با html خالی که نمیشه این کار رو کرد
ترکیب html و css این کار

کاملا درسته

[abbkbehnam]

بله دوستان درسته ولی اگه می خواهید که نوشته شما به عکس اضافه بشه و بصورت عکس به نمایش در بیاد باید از php استفاده بکنید.

---

من باقرار دادن کد زیر درون یک فایل که اسمش رو گذاشتم clear-btn0-trc.php

کد پی‌اچ‌پی:

<?php

    $txt = 'Clear';
    $image = imagecreatefromgif ('img/btn0-trc.gif');
    
    $fnt_sze = 18;
    $font = array('1.ttf');

    // We have found a font size that will fit
    // Now work out where to put it

    $txt_x = 10;
    $txt_y = 20;
    $txt_clr = imagecolorallocate ($image, 255, 255, 255);
    
    imagettftext ($image, $fnt_sze, 0, $txt_x, $txt_y, $txt_clr, $font[0], $txt);

    header ('Content-type: image/gif');
    imagegif ($image);

    imagedestroy ($image);

?>

و وارد کردن کد زیر درون صفحه ای که میخواستم عکس نمایش داده بشه تونستم این کار رو انجام بدم (کلمه Clear رو به عکس اضافه کردم)

کد:

<img src="clear-btn0-trc.php" width="200" height="30" />