آژانس هواپیمایی
tanki

جلوه های تصویری در صفحات html

شروع موضوع توسط zoono ‏10 ژوئن 2007 در انجمن HTML

  1. zoono

    zoono کاربر تازه وارد

    تاریخ عضویت:
    ‏16 مارس 2007
    نوشته ها:
    24
    تشکر شده:
    0
    صفحات html دارای امکانی به نام filter است که روی objectها اعمال می شوند و قادر به ایجاد انواع تغییرات بصری در صفحه می باشند. مانند شیشه ای یا محو یا شطرنجی کردن تصاویر.
    به کار گیری عملی این فیلترها در صفحات html نیازمند شگردهایی ست که طی چند مقاله به استحضار عزیزان می رسد.
    برای استفاده از کدهای فوق، فقط کافیست آنها را در صفحات خود کپی نموده به جای تصاویر به کار رفته در متن، آدرس تصاویر مورد نظر خود را وارد نمائید.

    slide show
    در مثال زیر، برنامه با دریافت آدرس چند تصویر (4 تصویر که البته قابل افزایش است) قادر به نمایش متوالی آنها بصورت fade می باشد. پارامترهای مربوط به زمان نمایش و تبدیل، قابل تغییر هستند. جهت استفاده می توانید عین متن را در برنامۀ خود کپی کرده یا فایل ضمیمه را دریافت نمائید:

    (برنامۀ فوق همچنین به پیوست ارائه شده)


    باشگاه علمی، هنری و فلسفی خردمند kheradmand.com

    [​IMG]


    کد:
    [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]
     

    فایل های ضمیمه:

  2. علی آبادانی

    علی آبادانی Registered User

    تاریخ عضویت:
    ‏30 اکتبر 2006
    نوشته ها:
    897
    تشکر شده:
    11
    محل سکونت:
    Abadan
    مفید بود دوست عزیز

    ادامه بدید
    ممنون
     
avanak همکاری در فروش عسل طبیعی و گرده گل ایرانی