ایجاد FavIcon متحرک و تغییر آن با جاوا اسکریپت

9 05 2009

تاکنون سایتهایی را دیده اید که 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 استفاده کنید.

موفق باشید


کارها

Information

2 responses

13 05 2009
شاهمرادي

از اینکه favicon چیست به اینجا مراجعه کنید.

اين صفحه وجود ندارد!
————————————
مشکل فارسی بودن آدرس بود که حل شد

31 08 2009

پاسخی بگذارید

در پایین مشخصات خود را پر کنید یا برای ورود روی شمایل‌ها کلیک نمایید:

نشان‌وارهٔ وردپرس.کام

شما در حال بیان دیدگاه با حساب کاربری WordPress.com خود هستید. بیرون رفتن / تغییر دادن )

تصویر توییتر

شما در حال بیان دیدگاه با حساب کاربری Twitter خود هستید. بیرون رفتن / تغییر دادن )

عکس فیسبوک

شما در حال بیان دیدگاه با حساب کاربری Facebook خود هستید. بیرون رفتن / تغییر دادن )

عکس گوگل+

شما در حال بیان دیدگاه با حساب کاربری Google+ خود هستید. بیرون رفتن / تغییر دادن )

درحال اتصال به %s




%d وب‌نوشت‌نویس این را دوست دارند: