ایجاد FavIcon متحرک و تغییر آن با جاوا اسکریپت - انجمن های تخصصی ترفندستان |‌ Tarfandestan Forums

Sina06m · 6 July 2009 امتیاز: 0

تاکنون سایتهایی را دیده اید که favicon متحرک دارند. اعمال این انیمشین به سادگی امکان پذیر است.
برای اطلاع از اینکه favicon چیست به اینجا مراجعه کنید.
متحرک بودن آیکون سایت فقط در مرورگر فایرفاکس پشتیبانی میشود و در بقیه متحرک نخواهد بود. مرور IE نیز که به طور کل آن را پشتیبانی نمی کند.
favicon متحرک

برای اعمال آیکون متحرک ابتدا فایل انیمشن gif مورد خودتون رو ایجاد کنید و در مسیر سایت قرار بدید.
کد زیر رو به قسمت head فایل html مورد نظر اضافه کنید:
<link rel="shortcut icon" href="favicon.gif" type="image/gif">
نکته ای که در اینجا مهم هست استفاده همزمان از فایل gif و icon هست تا برای مرورگرهایی که از این ویژگی پشتیانی نمی کنند مشکلی پیش نیاید و همچنان آیکون سایت نمایش داده بشود.
بس برای این منظور فایل favicon.ico را هم در مسیر قرار و لینک آن را نیز به قسمت head اضافه کنید. توجه کنید لینک icon باید قبل از gif باشد تا فایل gif در اولویت قرار گیرد.
نتیجه نهایی قسمت head صفحه به این صورت خواهد بود:
<head>
<title>SalarBlog.wordpress.com Animated Favicons</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.gif" type="image/gif">
</head> نحوه تغییر favicon با جاوا اسکریپت

در صورتی که بخواهید آیکون سایت در شرایط مختلف تغییر کنه می توانید از روشی که در ادامه توضیح می دهم استفاده کنید.
کاربرد این تغییر می تونه برای وضعیت های مختلف صفحه باشه. برای مثال آیکون سایت برای روز متفاوت از آیکون برای شب باشه و از این مدل تغییرات.
این روش فقط در مرورگرهای فایرفاکس و اپرا کار خواهد کرد و در سایر مرورگرها بی اثر هست.
تابع زیر در جاوا اسکریپت با دریافت آدرس آیکون آن را به صفحه اعمال می کند:
function ChangeFavicon(iconUrl){
var docHead=document.getElementsByTagName('head');
if(docHead!=null && docHead.length>0)
docHead=docHead[0];
else return;
var link = document.createElement("link");
link.type="image/x-icon";
link.href=iconUrl;
link.rel="shortcut icon";
docHead.appendChild(link);
} در این تابع با ایجاد یک شی Link و مقدار دهی آن و سپس اضافه کردن آن به بخش head سایت مرورگر رو وادار به شناسایی آیکون جدید کرده و آن را نمایش می دهیم.
استفاده از این تابع آسان است و به صورت زیر خواهد بود.
ChangeFavicon('favicon-frame1.ico');
ChangeFavicon('favicon-frame2.ico');
ChangeFavicon('favicon-frame3.ico'); پ.ن: برای ایجاد favicon به صورت آنلاین از سایت favicon.cc استفاده کنید.

موفق باشید / Sina06m

ابزارهای تاپیک
پرینت این صفحه / حالت نمایش بصورت پرینت شده ارسال این صفحه به ایمیل یک دوست یا خودتان
نحوه نمایش
حالت خطی تعویض به حالت ترکیبی تعوض به حالت رشته ای

موضوعات مشابه
موضوع	ارسال کننده تاپیک	انجمن	پاسخ ها	آخرین نوشته
يك پيشنهاد خوب	dragon_boy	نظرات و پیشنهادات	19	7 September 2011 11:54 AM
{ HTC Touch Diamond 2 غریبه ای آشنا }	AhmadSH	اخبار موبایل و مخابرات	0	12 May 2009 01:23 AM
درخواست سناریوی بازی prince of persia	fnh	اخبار، نقد، بحث و تبادل نظر پیرامون بازی ها	2	26 October 2008 06:53 PM
راهیابی بازی ها در این تاپیک	arian	رمز ، ترینر ، پچ ، کرک و سایر افزودنیهای بازی ها	84	1 August 2008 10:53 AM
~~~فتوشاپ از صفر~~~	mrgladiyator	مسائل متفرقه	9	24 January 2008 10:23 AM

کاربران در حال دیدن موضوع: 1 نفر (0 عضو و 1 مهمان)