آموزش ساختن slide show

LOFOL

New Member
لطفا افرادی که در سی اس اس استاد هستند یک آموزش ساخت برای slide show حرفه ای در این تایپیک قرار دهند

slide show مورد نظر من برای یه چیزی توی مایه های سایت http://movies.yahoo.com است البته می دونم که این رو با فلش ساختن ولی فکر کنم می شه با سی اس اس و جاوا یک چیزی شبی به این رو ساخت حال زیاد مهم نیست شبی یاهو باشد برای من نکته مهم این است که در این slide show هم بشود عکس قرار داد و هم متن یعنی بطور هم زمان عوض شود و متن مربوط به هر عکس یا برعکس نمایش دهد
 

echessdesign

مدیر انجمن طراحی وب
درود بر شما
یک نمونه Slide Show برای شما می زارم اما از آنجا که فرصت چندانی ندارم، اموزش اون رو به زمان دیگری موکول می کنم:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>echessdesign.com</title>
<style type="text/css">
/* common styling */
/* set up the overall width of the menu div and the margins */
.menu2 {
font-family: verdana, arial, sans-serif; 
width:673px;
height:31px;
background:#fff;
padding:0;
margin:0 auto; 
position:relative;
z-index:1;
border-bottom:20px solid #333;
margin-bottom:650px;
}
/* position the instructions using a dl */
.menu2 dl {
font-family:verdana, arial, sans-serif;
font-size:0.9em;
position:absolute;
width:270px;
top:160px;
left:50px;
}
.menu2 dl dt {font-size:1.2em; margin-bottom:2em; font-weight:bold;}
.menu2 dl dd { padding:0; margin:0; line-height:1.7em; margin-bottom:2em;}
.menu2 dl dd:first-letter {font-weight:bold;}

/* remove the bullets and set the margin and padding to zero for the unordered list */
.menu2 ul {
padding:0; 
margin:0;
list-style-type: none;
border:0;
}
/* float the list so that the items are in a line */
.menu2 ul li {
display:block;
float:left;
width:51px;
height:31px;
}
/* style the links to be 50px wide by 31px high with a right border 1px solid white. Set the background color and the font size. */
.menu2 ul li a, .menu2 ul li a:visited {
display:block; 
float:left;
text-align:center; 
text-decoration:none; 
width:50px; 
height:31px; 
color:#ddd;
border-right:1px solid #fff;
background:#333; 
line-height:30px; 
font-size:11px;
}

/* clear the float at the end of each line of four slides */
span.clr {display:block; clear:both; width:0; height:0; font-size:0; line-height:0;}

/* make the dropdown ul invisible */
.menu2 ul li ul {
display: none;
}

/* remove the table styling */
table {
border-collapse:collapse;
margin:0; 
padding:0;
}


/* specific to non IE browsers */
/* set the background and foreground color of the main menu li link on hover */
.menu2 ul li:hover a{
color:#fff; 
background:#000;
cursor:default;
}

/* make the sub menu ul visible and position it beneath the first list item */
.menu2 ul li:hover ul {
text-align:left;
display:block; 
position:absolute; 
top:31px; 
left:0;
}

/* make the sub menu ul li the full width with padding and border. */
.menu2 ul li:hover ul li {
cursor:pointer;
width:483px;
height:483px;
border:20px solid #000;
border-width:20px 5px;
background:#ddd url(slide/linen.jpg); 
color:#fff;
padding:82px 90px;
cursor:default;
}

/* style the background and foreground color of the submenu links */
.menu2 ul li:hover ul li a {
background:#333;
width:118px;
height:118px;
border:1px solid #ddd;
border-color:#888 #000 #000 #888;
}


/* keep the large image hidden */
.menu2 ul li:hover ul li a em {
display:none;
}
/* add a border to the horizontal slide and position it centrally using a top margin */
.menu2 ul li:hover ul li a.horiz span img {
border:1px solid #888;
margin-top:21px;
}
/* add a border to the vertical slide and position it centrally using a top margin */
.menu2 ul li:hover ul li a.vert span img {
border:1px solid #888;
margin-top:9px;
}

.menu2 ul li:hover ul li a:hover {
background:#000;
}


/* make the active links zero size so the active dotted border does not show through the large image */
.menu2 ul li:hover ul li a:active, .menu2 ul li:hover ul li a:focus {background:#aaa; height:0; width:0; border:0;}
.menu2 ul li:hover ul li a:active em, .menu2 ul li:hover ul li a:focus em {background:#bbb; height:0; width:0; padding:0; margin:0; border:0;}


/* make the large image visible and set the border, position them using position absolute centrally over the slides */
/* horizontal large image styling */
.menu2 ul li:hover ul li a.horiz:active em, .menu2 ul li:hover ul li a.horiz:focus em {display:block; background:#ddd; position:absolute; left:15px; top:100px; width:640px; height:480px; z-index:200; z-index:500; cursor:default; border:1px solid #fff;}
.menu2 ul li:hover ul li a.horiz:active em img, .menu2 ul li:hover ul li a.horiz:focus em img {border:0;}
/* vertical large image styling */
.menu2 ul li:hover ul li a.vert:active em, .menu2 ul li:hover ul li a.vert:focus em {display:block; background:#ddd; position:absolute; left:95px; top:23px; width:480px; height:640px; z-index:200; z-index:500; cursor:default;  border:1px solid #fff;}
.menu2 ul li:hover ul li a.vert:active em img, .menu2 ul li:hover ul li a.vert:focus em img {border:0;}
</style>


<!--[if lte IE 6]>
<style type="text/css">
/* set the background and foreground color of the main menu link on hover */
.menu2 ul li a:hover {
color:#fff; 
background:#000;
cursor:default;
}

/* make the sub menu ul visible and position it beneath the first list item */
.menu2 ul li a:hover ul {
text-align:left;
display:block; 
position:absolute; 
top:31px; 
left:0;
}

/* make the sub menu ul li the full width with padding and border. Hack for IE5.5 */
.menu2 ul li a:hover ul li {
cursor:pointer;
width:673px;
height:688px;
border:20px solid #000;
border-width:20px 5px;
background:#ddd url(slide/linen.jpg); 
color:#fff;
padding:82px 90px;
cursor:default;
w\idth:483px;
he\ight:483px;
}

/* style the background and foreground color of the submenu links (with hack for IE5.5)*/
.menu2 ul li a:hover ul li a {
width:120px;
height:120px;
margin-top:-2px;
border:1px solid #ddd;
border-color:#888 #000 #000 #888;
w\idth:118px;
he\ight:118px;
m\argin:0;
}


/* keep the large image hidden */
.menu2 ul li a:hover ul li a em {
display:none;
}

/* add a border to the horizontal slide and position it centrally using a top margin */
.menu2 ul li a:hover ul li a.horiz span img {
border:1px solid #888;
margin-top:21px;
}

/* add a border to the vertical slide and position it centrally using a top margin */
.menu2 ul li a:hover ul li a.vert span img {
border:1px solid #888;
margin-top:9px;
}


/* make the active links zero size so the active dotted border does not show through the large image */
.menu2 ul li a:hover ul li a:active {background:#aaa; height:0; width:0; }
.menu2 ul li a:hover ul li a:active em {background:#bbb; height:0; width:0; padding:0; margin:0;}


/* make the large image visible and set the border, position using position absolute */
.menu2 ul li a:hover ul li a.horiz:active em {display:block; background:#ddd; position:absolute; left:15px; top:100px; width:640px; height:480px; z-index:200; cursor:default; border:1px solid #fff;}
.menu2 ul li a:hover ul li a.vert:active em {display:block; background:#ddd; position:absolute; left:95px; top:23px; width:480px; height:640px; z-index:200; cursor:default;  border:1px solid #fff;}
</style>
<![endif]-->

</head>





<body>
<div class="menu2">
<dl>
<dt>CSS PLaY ~ SLIDE SHOW</dt>
<dd>Hover the mouse over Set 1, Set 2 or Set 3 above to drop down the projector screen and show a 4x4 array of photographic slides in both portrait and landscape format.</dd>
<dd>Click the mouse on any of these photographic slides to see the 640 x 480 pixel full size photograph projected onto the screen.<br />NOTE: Opera and Safari users will need to keep the mouse button pressed to see the image.</dd>
<dd>To close the fullsize photograph click anywhere on the grey projection screen. Opera and Safari users just release the mouse button.</dd>
<dd>Moving the mouse off the grey projector screen will close the slide selection.</dd>
</dl>
<ul>
<li><a href="#nogo">Set 1
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->

<table><tr><td>


<ul>
<li>
<a class="horiz" href="#portrait1"><span><img src="slide/pic_1ha.jpg" alt="" title="" /></span><em><img src="slide/pic_1h.jpg" alt="" title="" /></em></a>
<a class="vert" href="#portrait2"><span><img src="slide/pic_1va.jpg" alt="" title="" /></span><em><img src="slide/pic_1v.jpg" alt="" title="" /></em></a>
<a class="vert" href="#portrait3"><span><img src="slide/pic_2va.jpg" alt="" title="" /></span><em><img src="slide/pic_2v.jpg" alt="" title="" /></em></a>
<a class="horiz" href="#portrait4"><span><img src="slide/pic_2ha.jpg" alt="" title="" /></span><em><img src="slide/pic_2h.jpg" alt="" title="" /></em></a>
<span class="clr"></span>
<a class="vert" href="#portrait5"><span><img src="slide/pic_3va.jpg" alt="" title="" /></span><em><img src="slide/pic_3v.jpg" alt="" title="" /></em></a>
<a class="horiz" href="#portrait6"><span><img src="slide/pic_3ha.jpg" alt="" title="" /></span><em><img src="slide/pic_3h.jpg" alt="" title="" /></em></a>
<a class="vert" href="#portrait7"><span><img src="slide/pic_4va.jpg" alt="" title="" /></span><em><img src="slide/pic_4v.jpg" alt="" title="" /></em></a>
<a class="horiz" href="#portrait8"><span><img src="slide/pic_4ha.jpg" alt="" title="" /></span><em><img src="slide/pic_4h.jpg" alt="" title="" /></em></a>
<span class="clr"></span>
<a class="horiz" href="#portrait9"><span><img src="slide/pic_5ha.jpg" alt="" title="" /></span><em><img src="slide/pic_5h.jpg" alt="" title="" /></em></a>
<a class="vert" href="#portrait10"><span><img src="slide/pic_5va.jpg" alt="" title="" /></span><em><img src="slide/pic_5v.jpg" alt="" title="" /></em></a>
<a class="horiz" href="#portrait11"><span><img src="slide/pic_6ha.jpg" alt="" title="" /></span><em><img src="slide/pic_6h.jpg" alt="" title="" /></em></a>
<a class="vert" href="#portrait12"><span><img src="slide/pic_6va.jpg" alt="" title="" /></span><em><img src="slide/pic_6v.jpg" alt="" title="" /></em></a>
<span class="clr"></span>
<a class="horiz" href="#portrait13"><span><img src="slide/pic_7ha.jpg" alt="" title="" /></span><em><img src="slide/pic_7h.jpg" alt="" title="" /></em></a>
<a class="horiz" href="#portrait14"><span><img src="slide/pic_8ha.jpg" alt="" title="" /></span><em><img src="slide/pic_8h.jpg" alt="" title="" /></em></a>
<a class="vert" href="#portrait15"><span><img src="slide/pic_7va.jpg" alt="" title="" /></span><em><img src="slide/pic_7v.jpg" alt="" title="" /></em></a>
<a class="vert" href="#portrait16"><span><img src="slide/pic_8va.jpg" alt="" title="" /></span><em><img src="slide/pic_8v.jpg" alt="" title="" /></em></a>
</li>
</ul>

</td></tr></table>

<!--[if lte IE 6]>
</a>
<![endif]-->

</li>



<li><a href="#nogo">Set 2
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->

<table><tr><td>


	<ul>
	<li>
<a class="vert" href="#portrait1"><span><img src="slide/pic_9va.jpg" alt="" title="" /></span><em><img src="slide/pic_9v.jpg" alt="" title="" /></em></a>
<a class="horiz" href="#portrait2"><span><img src="slide/pic_9ha.jpg" alt="" title="" /></span><em><img src="slide/pic_9h.jpg" alt="" title="" /></em></a>
<a class="horiz" href="#portrait3"><span><img src="slide/pic_10ha.jpg" alt="" title="" /></span><em><img src="slide/pic_10h.jpg" alt="" title="" /></em></a>
<a class="vert" href="#portrait4"><span><img src="slide/pic_10va.jpg" alt="" title="" /></span><em><img src="slide/pic_10v.jpg" alt="" title="" /></em></a>
<span class="clr"></span>
<a class="horiz" href="#portrait5"><span><img src="slide/pic_11ha.jpg" alt="" title="" /></span><em><img src="slide/pic_11h.jpg" alt="" title="" /></em></a>
<a class="vert" href="#portrait6"><span><img src="slide/pic_11va.jpg" alt="" title="" /></span><em><img src="slide/pic_11v.jpg" alt="" title="" /></em></a>
<a class="vert" href="#portrait7"><span><img src="slide/pic_12va.jpg" alt="" title="" /></span><em><img src="slide/pic_12v.jpg" alt="" title="" /></em></a>
<a class="horiz" href="#portrait8"><span><img src="slide/pic_12ha.jpg" alt="" title="" /></span><em><img src="slide/pic_12h.jpg" alt="" title="" /></em></a>
<span class="clr"></span>
<a class="horiz" href="#portrait9"><span><img src="slide/pic_13ha.jpg" alt="" title="" /></span><em><img src="slide/pic_13h.jpg" alt="" title="" /></em></a>
<a class="horiz" href="#portrait10"><span><img src="slide/pic_14ha.jpg" alt="" title="" /></span><em><img src="slide/pic_14h.jpg" alt="" title="" /></em></a>
<a class="horiz" href="#portrait11"><span><img src="slide/pic_15ha.jpg" alt="" title="" /></span><em><img src="slide/pic_15h.jpg" alt="" title="" /></em></a>
<a class="horiz" href="#portrait12"><span><img src="slide/pic_16ha.jpg" alt="" title="" /></span><em><img src="slide/pic_16h.jpg" alt="" title="" /></em></a>
<span class="clr"></span>
<a class="vert" href="#portrait13"><span><img src="slide/pic_13va.jpg" alt="" title="" /></span><em><img src="slide/pic_13v.jpg" alt="" title="" /></em></a>
<a class="vert" href="#portrait14"><span><img src="slide/pic_14va.jpg" alt="" title="" /></span><em><img src="slide/pic_14v.jpg" alt="" title="" /></em></a>
<a class="vert" href="#portrait15"><span><img src="slide/pic_15va.jpg" alt="" title="" /></span><em><img src="slide/pic_15v.jpg" alt="" title="" /></em></a>
<a class="vert" href="#portrait16"><span><img src="slide/pic_16va.jpg" alt="" title="" /></span><em><img src="slide/pic_16v.jpg" alt="" title="" /></em></a>
	</li>
	</ul>

</td></tr></table>

<!--[if lte IE 6]>
</a>
<![endif]-->

</li>

<li><a href="#Birds">Set 3
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->

<table><tr><td>


	<ul>
	<li>
<a class="horiz" href="#portrait1"><span><img src="slide/pic_17ha.jpg" alt="" title="" /></span><em><img src="slide/pic_17h.jpg" alt="" title="" /></em></a>
<a class="vert" href="#portrait2"><span><img src="slide/pic_17va.jpg" alt="" title="" /></span><em><img src="slide/pic_17v.jpg" alt="" title="" /></em></a>
<a class="horiz" href="#portrait3"><span><img src="slide/pic_18ha.jpg" alt="" title="" /></span><em><img src="slide/pic_18h.jpg" alt="" title="" /></em></a>
<a class="vert" href="#portrait4"><span><img src="slide/pic_18va.jpg" alt="" title="" /></span><em><img src="slide/pic_18v.jpg" alt="" title="" /></em></a>
<span class="clr"></span>
<a class="vert" href="#portrait5"><span><img src="slide/pic_19va.jpg" alt="" title="" /></span><em><img src="slide/pic_19v.jpg" alt="" title="" /></em></a>
<a class="horiz" href="#portrait6"><span><img src="slide/pic_19ha.jpg" alt="" title="" /></span><em><img src="slide/pic_19h.jpg" alt="" title="" /></em></a>
<a class="vert" href="#portrait7"><span><img src="slide/pic_20va.jpg" alt="" title="" /></span><em><img src="slide/pic_20v.jpg" alt="" title="" /></em></a>
<a class="horiz" href="#portrait8"><span><img src="slide/pic_20ha.jpg" alt="" title="" /></span><em><img src="slide/pic_20h.jpg" alt="" title="" /></em></a>
<span class="clr"></span>
<a class="horiz" href="#portrait9"><span><img src="slide/pic_21ha.jpg" alt="" title="" /></span><em><img src="slide/pic_21h.jpg" alt="" title="" /></em></a>
<a class="vert" href="#portrait10"><span><img src="slide/pic_21va.jpg" alt="" title="" /></span><em><img src="slide/pic_21v.jpg" alt="" title="" /></em></a>
<a class="horiz" href="#portrait11"><span><img src="slide/pic_22ha.jpg" alt="" title="" /></span><em><img src="slide/pic_22h.jpg" alt="" title="" /></em></a>
<a class="vert" href="#portrait12"><span><img src="slide/pic_22va.jpg" alt="" title="" /></span><em><img src="slide/pic_22v.jpg" alt="" title="" /></em></a>
<span class="clr"></span>
<a class="vert" href="#portrait13"><span><img src="slide/pic_23va.jpg" alt="" title="" /></span><em><img src="slide/pic_23v.jpg" alt="" title="" /></em></a>
<a class="horiz" href="#portrait14"><span><img src="slide/pic_23ha.jpg" alt="" title="" /></span><em><img src="slide/pic_23h.jpg" alt="" title="" /></em></a>
<a class="vert" href="#portrait15"><span><img src="slide/pic_24va.jpg" alt="" title="" /></span><em><img src="slide/pic_24v.jpg" alt="" title="" /></em></a>
<a class="horiz" href="#portrait16"><span><img src="slide/pic_24ha.jpg" alt="" title="" /></span><em><img src="slide/pic_24h.jpg" alt="" title="" /></em></a>
	</li>
	</ul>

</td></tr></table>

<!--[if lte IE 6]>
</a>
<![endif]-->

</li>


</ul>

<div class="clear">&nbsp;</div>

</div>
</body>

</html>

این نکته را در نظر داشته باشید که اسلاید شو که همراه FADE شدن باشد به همرا JS امکان پذیر است که هم اکنون با استفاده از تکنیک Ajax اسلاید شو های زیبایی را می سازند.
 

LOFOL

New Member
ممنون ولی من از این Slide Show نمی خوام گفتم که من Slide Show شوی شبی به یاهو و دارای امکانات نمایش هم زمان یک عکس و یک خبر رو می خواهم البته خودم دوتا دارم و می تونم از توی سایت های دیگه کدهای سی اس اس و جاوا شو ن رو بردارم ولی می خواهم طریق ساختنشو یاد بگیرم تا یکی Slide Show شو اختصاصی درست کنم
 
دوست عزیز این چیزی نیست که کسی بتونه تو چند خط یاد شما بده. برای اینکار باید DOM Scripting رو بلد باشید. باید یکی دو تا کتاب جاوا اسکریپت بخونید تا بتونید یه همچین چیزی رو درست کنید (اگر خودتون می خواید کدش رو بنویسید و از جایی کپی نکنید )
 

جدیدترین ارسال ها

بالا