zoono
کاربر تازه وارد
- تاریخ عضویت
- 16 مارس 2007
- نوشته‌ها
- 24
- لایک‌ها
- 0
صفحات html دارای امکانی به نام filter است که روی objectها اعمال می شوند و قادر به ایجاد انواع تغییرات بصری در صفحه می باشند. مانند شیشه ای یا محو یا شطرنجی کردن تصاویر.
به کار گیری عملی این فیلترها در صفحات html نیازمند شگردهایی ست که طی چند مقاله به استحضار عزیزان می رسد.
برای استفاده از کدهای فوق، فقط کافیست آنها را در صفحات خود کپی نموده به جای تصاویر به کار رفته در متن، آدرس تصاویر مورد نظر خود را وارد نمائید.
slide show
در مثال زیر، برنامه با دریافت آدرس چند تصویر (4 تصویر که البته قابل افزایش است) قادر به نمایش متوالی آنها بصورت fade می باشد. پارامترهای مربوط به زمان نمایش و تبدیل، قابل تغییر هستند. جهت استفاده می توانید عین متن را در برنامۀ خود کپی کرده یا فایل ضمیمه را دریافت نمائید:
(برنامۀ فوق همچنین به پیوست ارائه شده)
باشگاه علمی، هنری و فلسفی خردمند kheradmand.com
به کار گیری عملی این فیلترها در صفحات html نیازمند شگردهایی ست که طی چند مقاله به استحضار عزیزان می رسد.
برای استفاده از کدهای فوق، فقط کافیست آنها را در صفحات خود کپی نموده به جای تصاویر به کار رفته در متن، آدرس تصاویر مورد نظر خود را وارد نمائید.
slide show
در مثال زیر، برنامه با دریافت آدرس چند تصویر (4 تصویر که البته قابل افزایش است) قادر به نمایش متوالی آنها بصورت fade می باشد. پارامترهای مربوط به زمان نمایش و تبدیل، قابل تغییر هستند. جهت استفاده می توانید عین متن را در برنامۀ خود کپی کرده یا فایل ضمیمه را دریافت نمائید:
(برنامۀ فوق همچنین به پیوست ارائه شده)
باشگاه علمی، هنری و فلسفی خردمند kheradmand.com
کد:
[LEFT]
<html>
<head>
<title>slideshow 1</title>
<script language="javascript">
function Start_Effects ()
{
window.setTimeout("Change_Gallery()", 1000)
}
Max_Galleries = 4
Start_Gallery = 2
function Change_Gallery ()
{
oTransContainer_Gallery.filters[0].Apply()
for (var i = 1; i <= Max_Galleries; i++)
{
if (i == Start_Gallery)
{
document.getElementById('Gallery_'+i).style.display = 'block';
document.getElementById('Gallery_'+i).style.visibility='visible';
}
else
{
document.getElementById('Gallery_'+i).style.display = 'none';
document.getElementById('Gallery_'+i).style.visibility='hidden';
}
}
oTransContainer_Gallery.filters[0].Play()
Start_Gallery= Start_Gallery+ 1
if (Start_Gallery> Max_Galleries ) {Start_Gallery= 1}
window.setTimeout("Change_Gallery()", 3000)
}
</script>
<STYLE>
.time {behavior: url(#default#time);}
</STYLE>
</head>
<body onload="Start_Effects()">
<table border="0" border="0" cellPadding="0" cellSpacing="0" style="border: 2px solid #000000">
<tr>
<td>
<DIV STYLE="position: static; width: 100px; height: 100px; filter:progid:DXImageTransform.Microsoft.Fade(duration=1, overlap=.9)" id="oTransContainer_Gallery">
<div id="Gallery_1" style="position:static">
<img src="01.jpg" height="100" width="100" border="0" align="center">
<script language="javascript">document.getElementById('Gallery_1').style.display='block';</script>
</div>
<div id="Gallery_2" style="display:none; visibility:hidden;position:static">
<img src="02.jpg" height="100" width="100" border="0" align="center">
<script language="javascript">document.getElementById('Gallery_2').style.display='none';</script>
</div>
<div id="Gallery_3" style="display:none; visibility:hidden;position:static">
<img src="03.jpg" height="100" width="100" border="0" align="center">
<script language="javascript">document.getElementById('Gallery_3').style.display='none';</script>
</div>
<div id="Gallery_4" style="display:none; visibility:hidden;position:static">
<img src="04.jpg" height="100" width="100" border="0" align="center">
<script language="javascript">document.getElementById('Gallery_4').style.display='none';</script>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
[/LEFT]
