ممكن متل ما في هده الصورة

اريد متل هده كيف اضعها في موقعي

http://download.mrkzy.com/e/1511_md_13213848881.bmp

هي عبارة عن مستطيل كبير و مستطيلات صغيرة
عند الضغض على احد المستطيلات الصغيرة يضهر بشكل كبير في المستطيل الكبير و يمكنك تعديل عليه بوضه ماتريد في المستطيلات

المتال في هدا الموقع

http://mohamed-ko.yoo7.com/

مرحبا صديقى

ضع هذا فى تشكيلات عامة

الكود:

<div id="ifocus"><div id="ifocus_pic">
<div id="ifocus_piclist" style="left: 0px; top: -450px;">
<ul>
<li>
<a target="_blank" rel="nofollow" href="http://mohamed-ko.yoo7.com/c1-category">
<img
 alt=" تقديم الدعم الفني بشكل احترافي " title="تقديم الدعم الفني بشكل
احترافي" src="http://i42.servimg.com/u/f42/16/02/36/33/music_12.png">


</a>


</li>

<li>
<a target="_blank" rel="nofollow" href="http://mohamed-ko.yoo7.com/f27-montada">
<img alt="الان اطلب تصميمك مجاني
." title="الان اطلب تصميمك مجاني" src="http://i42.servimg.com/u/f42/16/02/36/33/wepw3-10.png">


</a>


</li>

<li>
<a target="_blank" rel="nofollow" href="http://mohamed-ko.yoo7.com/f66-montada">
<img
 alt="انضم الى فريق الاشراف على شبكة محمدكو" title="انضم الى فريق
الاشراف على شبكة محمدكو"
src="http://i42.servimg.com/u/f42/16/02/36/33/20202410.png">


</a>


</li>

<li>
<a target="_blank" rel="nofollow" href="http://mohamed-ko.yoo7.com/forum">
<img alt="انتظرونا على محمدكو" title="انتظرونا على محمدكو " src="http://i42.servimg.com/u/f42/16/02/36/33/buo58811.gif">


</a>


</li>


</ul>


</div>

<div id="ifocus_opdiv"></div>

<div id="ifocus_tx">
<ul>
<li class="normal">الدعم الفني وتطوير المواقع  </li>

<li class="normal">الان اطلب تصميمك مجاني </li>

<li class="current">رشح نفسك للاشراف</li>

<li class="normal">شبكة محمدكو: معاً دائماً لتميز </li>


</ul>


</div>


</div>

<div id="ifocus_btn">
<ul>
<li class="normal">
<img alt="" src="http://i42.servimg.com/u/f42/16/02/36/33/music_12.png">


</li>

<li class="normal">
<img alt="" src="http://i42.servimg.com/u/f42/16/02/36/33/wepw3-10.png">


</li>

<li class="current">
<img alt="" src="http://i42.servimg.com/u/f42/16/02/36/33/20202410.png">


</li>

<li class="normal">
<img alt="" src="http://i42.servimg.com/u/f42/16/02/36/33/buo58811.gif">


</li>


</ul>


</div>



</div>

</body>

</html>




وهذا فى اول ورقة تصميم
Css
وقدم

الكود:

#ifocus {
    background: none repeat scroll 0 0 #F8F8F8;
    border: 1px solid #DEDEDE;
    height: 245px;
    margin: 20px;
    width: 700px;


}

#ifocus_pic {
    display: inline;
    float: left;
    height: 225px;
    margin: 10px 0 0 10px;
    overflow: hidden;
    position: relative;
    width: 580px;


}

#ifocus_piclist {
    position: absolute;


}

#ifocus_piclist li {
    height: 225px;
    overflow: hidden;
    width: 580px;


}

#ifocus_piclist img {
    height: 225px;
    width: 580px;


}

#ifocus_btn {
    display: inline;
    float: right;
    margin: 9px 9px 0 0;
    width: 91px;


}

#ifocus_btn li {
    cursor: pointer;
    height: 57px;
    opacity: 0.5;
    width: 91px;


}

#ifocus_btn img {
    height: 45px;
    margin: 7px 0 0 11px;
    width: 75px;


}

#ifocus_btn .current {
    background: url("http://s3b.directupload.net/images/100208/fw2c4n4m.gif") no-repeat scroll 0 0 transparent;
    opacity: 1;


}

#ifocus_opdiv {
    background: none repeat scroll 0 0 #000000;
    bottom: 0;
    height: 35px;
    left: 0;
    opacity: 0.5;
    position: absolute;
    width: 410px;


}

#ifocus_tx {
    bottom: 8px;
    color: #FFFFFF;
    left: 8px;
    position: absolute;


}

#ifocus_tx .normal {
    display: none;


}




صديقي شكرا لك لاكن انا اريد امكانية التعديل