تکنولوژی روز

<a href="http://www.yoursite.com" title="عنوان سایت یا وبلاگ شما" target="_blank"><img src="http://www.yourfile.com/file/image-logo.jpg" alt="عنوان لوگوی سایت یا وبلاگ" title="عنوان لوگوی سایت یا وبلاگ" height="80" width="120" border="0" /></a>

توضیح:
- همانطور که می بینید،  textarea تفاوتهایی با input دارد، در 
اینجا از cols و rows به جای width و height برای عرض و ارتفاع باکس، 
استفاده می شود.
- مقدار value در textarea وجود ندارد و به جای آن باید کد را بین تگ های textarea قرار دهیم.
-
 در آموزش مقدماتی html گفتیم که تقریبا تمام تگ ها، می توانند از استایل  css استفاده کنند، در اینجا هم اگر نیاز به تنظیمات بیشتر دارید، می توانید
 از تگ style استفاده کنید.
استفاده از جاوا اسکریپت برای انتخاب خودکار و کپی کد لوگو

اکنون
 که با نحوه نمایش کد لوگوی حمایتی برای سایت یا وبلاگ خود آشنا شدیم، بد نیست یک قابلیت حرفه ای تر برای آن در نظر بگیریم و آن قرار دادن امکان 
یشتر کاربران است، بدین منظور باید از جاوا اسکریپت (Javascript) کمک انتخاب خودکار (auto select)، جهت کپی کد به صورت یکجا و کمک به راحتی 

ببگیریم، در زیر ما از یک تابع خیلی ساده بدین منظور استفاده کرده ایم.
تابع جاوا اسکریپتی:

</span></div><div style="text-align: justify;"></div>
<div style="text-align: justify;"><span style="font-family: Tahoma; font-size: 9pt;">script type="text/javascript">
</span></div><br /><<div style="text-align: justify;"><span style="font-family: Tahoma; font-size: 9pt;">put = document.getElem</span></div><div style="text-align: justify;"><span style="font-family: Tahoma; font-size: 9pt;">function autoselect(){</span></div><div style="text-align: justify;"><span style="font-family: Tahoma; font-size: 9pt;">var text_i</span></div><div style="text-align: justify;"><span style="font-family: Tahoma; font-size: 9pt;">nentById ('logo');</span></div><div style="text-align: justify;"><span style="font-family: Tahoma; font-size: 9pt;">text_input.focus ();</span></div><div style="text-align: justify;"><span style="font-family: Tahoma; font-size: 9pt;">tarea></span></div><div style="text-align: justify;"><span style="font-family: Tahoma; font-size: 9pt;">text_input.select ();</span></div>}
</script>

<div style="text-align: justify;"></div></t<br />e<br /><div style="text-align: justify;"><span style="font-family: Tahoma; font-size: 9pt;">x</span></div></pre><pre class="code" style="text-align: start;"><div style="text-align: justify;"><br /></div></pre></div>
</body>
</html>
توضیح:
- در این تابع، از سه ویژگی document.getElementById، text_input.focus و text_input.select استفاده شده است.
- این تابع را ترجیحا در قسمت هِدر صفحه، بین تگ های head کپی کنید.
نحوه فراخوانی و استفاده از تابع:
</span></div><div></div>
<div><span style="font-family: Tahoma; font-size: 9pt;">nput type="text" id="logo" height="25" width="120" dir="ltr" onfocus="autoselect();" value='<a href="http://www.yoursite.com" title="عنوان سایت یا وبلاگ شما" target="_blank"><img src="http://www.yourfile.com/file/image-logo.jpg" alt="عنوان لوگوی سایت یا وبلاگ" title="عنوان لوگوی سایت یا وبلاگ" height="80" width="120" border="0" /></a>' />

</span></div><<br /><div><span style="font-family: Tahoma; font-size: 9pt;">i
توضیح:
- تقریبا نحوه استفاده از این روش با حالت معمولی یکسان است با این تفاوت که در اینجا باید یک آی دی برای تگ input تعریف کنیم و تابع را 
با رویداد onfocus فراخوانی نمائیم.
- آی دی تعریف شده در اینجا، عبارت دلخواه logo است، اگر دقت کنید، در تابع هم، همین آی دی به عنوان مقصد در نظر گرفته شده است.
ساخت لوگوهای مثلثی با جاوا اسکریپت و css

همانطور
 که گفتیم، لوگوهای قابل نمایش در صفحات وبلاگ یا سایت، به تصاویر ثابت برای حمایت از خود آن سایت یا وبلاگ محدود نمی شوند، بلکه با استفاده از 
جاوا اسکریپت و css می توان در گوشه های صفحات وب، نمادهایی مثلثی شکل (یا به شکل های دیگر) جهت مناسبت ها ی مختلف یا اعلام حمایت از موضوعی خاص قرار
با ابعاد 170 در 170 پیکسل (یا اندازه دلخواه) ترسیم کنید، به نوعی که خطی  داد، بدین منظور ابتدا در برنامه های گرافیکی و طراحی، نظیر فتوشاپ، طرحی 
به صورت مورب آن تصویر را دو نیم کرده باشد (در واقع تبدیل به دو مثلث ه باید پس زمینه شفاف داشته باشد، تا زمینه ی پشت سر آن دیده شود، با 
کند)، بسته به اینکه در کدام قسمت از صفحه (چپ، راست، بالا یا پائین) بخواهید لوگو را نمایش دهید، نوع برش هم متفاوت خواهد بود، آنگاه قسمتی را 

ک
ابزارهای موجود در فتوشاپ نظیر کمندهای دسته lasso tool پاک کنید تا به صورت پیکسل های چهار خانه مربعی و شفاف در آید، پس از اینکه طراحی لوگوی 

چون در مرورگرهای قدیمی تر هم پس زمینه شفاف آن پشتیبانی می شود در صورتی خود را به پایان بردید، باید تصویر را با فرمت gif یا png ذخیره کنید (اگر 
بتوانید با فرمت gif و بدون افت کیفیت، از تصویر خروجی بگیرید بهتر است،
 
که برای png اینطور نیست) تا قسمت شفاف تصویر مورد نظر در وب دیده نشود و لوگو به صورت مثلثی به نظر برسد (در واقع لوگوهای مثلثی، یک تصویر به شکل 
مربع هستند که یک طرف آنها شفاف شده است)؛ تصویر زیر می تواند راهنمای شما باشد.

اکنون تنظیمات خود را در کد های زیر اعمال کرده و آن را در قالب سایت یا وبلاگتان کپی نمائید.
کد نمایش لوگو در بالای سمت راست:
کد نمایش لوگو در بالای سمت چپ:
به دلیل خطا گرفتن بلاگفا به کدهای جاوا فعلا امکان درج آن را ندارم
</p><p><p><strong><font size="3" style="color: rgb(255, 0, 0);">به دلیل خطا گرفتن بلاگفا به کدهای جاوا فعلا امکان درج آن را ندارم</font></strong></p><div><strong><font size="3" style="color: rgb(255, 0, 0);"><br /></font></strong></div></p><p><span style="font-family: Tahoma; font-size: 9pt;">
کد نمایش لوگو در پائین سمت راست:

</p><p><br /></p><p><p><strong><font size="3" style="color: rgb(255, 0, 0);">به دلیل خطا گرفتن بلاگفا به کدهای جاوا فعلا امکان درج آن را ندارم</font></strong></p><div><strong><font size="3" style="color: rgb(255, 0, 0);"><br /></font></strong></div></p><p>
کد نمایش لوگو در پائین سمت چپ:

</p><p><br /></p><p><br /></p><p>توضیح:<br />- ساختار کدهای بالا بسیار ساده است، دستورات جاوا اسکریپت یک تصویر را با ویژگی های css به خروجی ارسال می کنند و عناصر css باعث می شوند که لوگو در گوشه های صفحه و بالاتر از سایر لایه ها به نمایش دربیاید.<br />- z-index موقعیت تصویر را نسبت به لایه های زیرین نشان می دهد، هر چه عدد z-index که یک ویژگی css است، برای یک عنصر بیشتر باشد، آن لایه بالاتر از لایه های دیگر در صفحه نشان داده می شود.<br />- position:absolute باعث می شود که لوگو با اسکرول صفحه جا به جا شود، می توانید از مقادیر fixed برای لوگوهای ثابت نیز استفاده کنید.<br />- ویژگی های left، right، top و bottom میزان فاصله تصویر را از جهت های مختلف نشان می دهد، همانطور که ملاحظه می کنید، این ویژگی ها در اینکه تصویر، کجای صفحه نشان داده شود موثر هستند.</p><div><br /></div><p></p><p></p><p><br /></p><p><br /></p><p></p></div></pre></div>






</body>
</html>