طراحی لوگو شبیه پرشین بلاگ

[AM!R1]

درود
دوستان میخواستم بدونم شبیه این لوگو هارو چجوری میشه طراحی کرد :

http://www.persianweblog.ir/sympathy/#ramazan

یه فیل .js داره . میخواستم ببینم ادرس عکسو کجاش باید بنویسم .
سایز عس تو کدوم خط نوشته شده
چند خط بیشتر نیست اگه میشه توضیح بدین تو هر خط چی به چیه

اینم یه نمونی از فایل جی اس :

// JavaScript Document

res = "<div style=\" z-index:1000; position:absolute; right:0px; top:0px; border-width:0px; \">"
res += "<img src=\"http://persianweblog.ir/sympathy/images/persian-Gulf-2.gif\" width=\"170\" height=\"170\" "
res += "border=\"0\" usemap=\"#gulf2\" /><map name=\"gulf2\" id=\"gulf2\"> "
res += "<area shape=\"poly\" alt=\"خلیج فارس همیشه فارس میماند\" coords=\"1,0,59,0,169,110,169,169\" "
res += "href=\"http://www.persianpetition.com/sign.aspx?id=3807c300-ee0a-499f-800e-69540d898790\" target=\"_blank\" /></map></div>"
res += "<script language='JavaScript' type='text/javascript' src='http://www.persianstat.com/service/stat.js'></script><script language='JavaScript' type='text/javascript'>persianstat(10007923, 4);</script>"
document.write(res);

سپاسگزارم

 

[the_king]

در سطر اول یک comment نوشته شده.
در سطر دوم نحوه قرار گیری و ضخامت حاشیه کادر تعریف شده که با مقدار صفر فاقد کادر و حاشیه است و در بالا ترین لایه
قرار می گیرد :

// JavaScript Document
res = "<div style=\" z-index:1000; position:absolute; right:0px; top:0px; border-width:0px; \">"

در سطر سوم، لینک تصویر persian-Gulf-2.gif مشخص شده که همان موردی است که دنبالش می گشتید.
طول و عرض 170 در 170 پیکسلی تصویر هم در ادامه همان سطر مشخص شده است.

res += "<img src=\"http://persianweblog.ir/sympathy/images/persian-Gulf-2.gif\" width=\"170\" height=\"170\" "

در سطر های چهارم الی ششم یک map تعریف می شود تا ناحیه های قابل کلیک کردن تصویر و نوشته alt آن
در ادامه مشخص شود.
دقت کنید که در سطر پنجم coords مختصات چهار نقطه را بصورت زوج مرتب (x,y) مشخص می کند که وقتی بصورت متوالی
به هم وصل می شوند شکل آن نوار نوشته داری است که بصورت کجکی رسم شده.
بدیهی است که اگر قراره در سایز تصویر 170 در 170 یا شکل نوار تغییری بدهید، این مختصات این نقاط هم بایستی تغییر کنند.
سطر ششم لینکی را مشخص می کند که اگر روی موقعیت نوار کلیک کنید به آن رجوع می شود.

res += "border=\"0\" usemap=\"#gulf2\" /><map name=\"gulf2\" id=\"gulf2\"> "
res += "<area shape=\"poly\" alt=\"خلیج فارس همیشه فارس میماند\" coords=\"1,0,59,0,169,110,169,169\" "
res += "href=\"http://www.persianpetition.com/sign.aspx?id=3807c300-ee0a-499f-800e-69540d898790\" target=\"_blank\" /></map></div>"

در سطر هفتم، کد های مربوط به stat مشخص شده که بر آمار مراجعه نظارت می کند.

res += "<script language='JavaScript' type='text/javascript' src='http://www.persianstat.com/service/stat.js'></script><script language='JavaScript' type='text/javascript'>persianstat(10007923, 4);</script>"

در انتها کلیه کدهای html بالا که در درون متغیر res قرار گرفته اند را در داخل document می نویسیم تا توسط Browser کاربر
تفسیر شوند و به نمایش درآیند.

document.write(res);