مشاهده منبع مطلب به زبان اصلی
 

برای نوشتن برنامه شما به موارد زیر نیاز دارید :

نرم افزار notepade

مرورگر

 

البته اگر می خواهید این برنامه در مرورگر ie هم کار کند باید در ابتدای برنامه  قبل از تگ باز html کد زیر را اضافه کنید

 

 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd">

<html>

</html>

 

می خواهیم تصاویر بند انگشتی را روی یک خط کنار هم قرار دهیم

با نگه داشتن ماوس روی هر تصویر ، تصویر بزرگ می شود

چون ما می خواهیم یک جلوه برای تمام تصاویر ما اعمال شود لذا نام ای دی تمام تصاویر را مثل هم بدهید تا کلاس سی اس اس که تعریف می کنیم برای همه تصاویر باشد . ما نام این ای دی را img انتخاب می کنیم

<img id=img>

 

و تمام تصاویر را دورن یک تگ لایه یا دایو با ای دی به نام container قرار می هیم

<div id=container>

شما هر نام دلخواهی را می توانید برای ای دی انتخاب کنید

 
 درون تگ head
 حتما درون تگ head باز و بسته کدهای سی اس اس زیر را بنویسید
 
<style>

#container{
 width:100%;
 height:250px;
}
 #img{
     float:left;
     width:21px;
     height:21px;
     background:#191919;
     padding:12px;
     border:2px solid #2D2D2D;
}

 #img:hover{
       width:168px;
       height:224px;
       background:#000 url("images/border.png");
}

</style>
 توضیح دستورات سی اس اس بالا :

 ما لایه ای به عرض 100 درصد صفحه وب و ارتفاع کمتر لازم داریم تا عکس هایمان را در ان قرار دهیم

#container{
width:100%;

height:250px;
}

 اگر شما چند ردیف تصویر می خواهید باید برای هر ردیف لایه ایجاد کنید

به طور پیش فرض لایه ها یا همان تگ های دایو  زیر هم قرار می گیرند

حتی اگر نام ای دی انها مثل هم باشد

 مثلا در زیر برنامه پائین ، ما از دو لایه استفاده کرده ایم که هر لایه 3 عکس درون خود دارد

 

<div id="container">
<img id="img" src="image-folder/image1.jpg"/>
 <img id="img" src="image-folder/image2.jpg"/>
 <img id="img" src="image-folder/image3.jpg"/>

</div>

<div id="container">
<img id="img" src="image-folder/image4.jpg"/>
<img id="img" src="image-folder/image5.jpg"/>
<img id="img" src="image-folder/image6.jpg"/>

</div>

 

 

 #img{

 

به تگ هایی که نام ای دی انها img است اشاره دارد یعنی این تگ ها دارای صفتهایی می شوند که دورن }{ تعریف می کنیم

 

 

  float:left;

هر عکسی از این ویژگی استفاده کند یعنی که سمت چپ موضوع بعدی خود قرار می گیرد

حالا ما در اینجا سه عکس در لایه داریم

پس هر عکسی سمت چپ عکس بعدی خود قرار می گیرد


 

 width: 21px;

height: 21px;

عرض و ارتفاع همه تصاویر را کوچک کرده به اندازه 21 در 21 پیکسل

بعدا می گوئیم هر وقت ماوس روی تصاویر قرار گرفت اندازه بزرگ ان نمایان شود

 

  background: #191919;

این خط به تصاویر ما رنگ زمینه سیاه می دهد

 

 

 padding:12px;


در اطراف تصویر به اندازه 12 پیکسل فضا اضافه می کند که در اصل شفاف و بی رنگ است

رنگ background یا تصویر background در زیر تصویر اصلی و ناحیه padding اطراف ان دیده می شود

این padding باعث میشه که تصاویر از هم فاصله داشته باشن

شما برنامه اصلی را که دانلود کردین عددهای مختلف به padding و background و border بدین تا دقیقا کارکرد هر یک را متوجه بشین

 

 

 border: 2px solid #2D2D2D ;


همانطور که در شکل بالا می بینید حاشیه بعد از padding قرار می گیرد

حاشیه ای به ضخامت 2 پیکسل و رنگ مشخص شده و نوع خط soli در اطراف هر تصویر ایجاد می کند

شما می توانید برای وع خط یکی از انواع زیر را هم استفاده کنید :

dotted, dashed, grooved, ridged, inset, outset

 

 مشخص کردن اتفاقاتی که باید با نگه داشتن ماوس روی هر عکس که ای دی ان img است  بیافتد :

#img:hover {

 

 

 width: 168px;

height: 224px;

 

عرض و ارتفاع تصویر را زمانی که ماوس روی ان قرار می گیرد مشخص می کند

 

 

  background:#000 url(images/border.png);

در اینجا ما از یک تصویر و رنگ سیاه زمینه  بعنوان زمینه تصویر اصلی استفاده کرده ایم

چون تصویر زمینه ای که انتخاب شده از نوع تصاویر gif و یا png است پس رنگ سیاه زمینه از زیر نواحی transparence ان تصویر دیده می شود

 
 این عکس زمینه از زیر ناحیه 12 پیکسلی padding دیده می شود البته رنگ سیاه زمینه هم دیده می شود
فرض کنید تصویر زیر با پسوند png بصورت شفاف طراحی شده است یعنی نواحی سفید رنگ در اصل بی رنگ هستند در فتوشاپ این تصاویر به راحتی طراحی می شوند
 
 حالا اگر رنگ های زمینه مختلف را برای background تصویر اصلی با ای دی img در نظر بگیرید  از زیر نواحی padding که در اصل بی رنگ هستند این رنگ زمینه دیده می شود و روی ان تصویر زمینه قرار می گیرد
 مثل نمونه های زیر با رنگ های زمینه مختلف
 
 
 
 حالا وقت ان رسیده  تا تصاویرما ن را در لایه دایو با نام container قرار دهیم

 

<body>
<div id="container">
<img id="img" src="image-folder/image1.jpg"/>
<img id="img" src="image-folder/image2.jpg"/>
<img id="img" src="image-folder/image3.jpg"/>
<img id="img" src="image-folder/image4.jpg"/>
 <img id="img" src="image-folder/image5.jpg"/>
</div>

</body>

برنامه کامل :

 




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd">

<html>
<head>

<style>
#container{
width:100%;
 height:250px;
}
#img{
float:left;
 width:21px;
 height:21px;
 background:#191919;
padding:12px;
 border:2px solid #2D2D2D;
}
 #img:hover{
width:168px;
height:224px;
 background:#000 url("images/border.png");
}

</style>

</head>
<body>
<div id="container">
<img id="img" src="image-folder/image1.jpg"/>
 <img id="img" src="image-folder/image2.jpg"/>
<img id="img" src="image-folder/image3.jpg"/>
<img id="img" src="image-folder/image4.jpg"/>
<img id="img" src="image-folder/image5.jpg"/>
</div>

</body>
</html>


 دانلود برنامه کامل