css لصناعة ألبوم صور رائع بمصغرات الصور تظهر بحجمها الطبيعى بمجرد الوقوف عليها

أخــ يونس ــوكم · #1 (**permalink**) 27/07/2008, 06:53 PM

css لصناعة ألبوم صور رائع بمصغرات الصور تظهر بحجمها الطبيعى بمجرد الوقوف عليها

التركيب :

1-- ضع هذا الكود فى جزء الـ head من صفحتك وبه ارشادات التعديل

كود PHP:

  <style type="text/css">

 
 
 
.thumbnail{

position: relative;

z-index: 0;

}

 
.thumbnail:hover{

background-color: transparent;

z-index: 50;

}

 
.thumbnail span{ /*تنسيق الصورة الكبيرة*/

position: absolute;

background-color: lightyellow;

padding: 5px;

left: -1000px;

border: 1px dashed gray;

visibility: hidden;

color: black;

text-decoration: none;

}

 
.thumbnail span img{ 

border-width: 0;

padding: 2px;

}

 
.thumbnail:hover span{ /*تنسيق الصورة بالوقوف عليها*/

visibility: visible;

top: 0;

left: 60px; /*position where enlarged image should offset horizontally */

 
}

 
</style>

2-لربط اى صورة بالكود عليك استخدام هذا الكود للصورة الواحدة بالمكان الذى تريد

كود PHP:

  <a class="thumbnail" href="#thumb"><img src="رابط الصورة المصغّرة" width="100px" height="66px" border="0" /><span><img src="رابط الصورة الكبيرة" />

التعليق على الصورة الكبيرة</span></a>

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

تــــــــــــــحــــــــــــــــــياتي
اخــــــــــــــ يونس ـــــــــــوكم

ظبياني كول · #2 (**permalink**) 28/07/2008, 01:11 AM

لا هنت يا يونس

يعطيك ألف عافيه حبيب قلبي

أخــ يونس ــوكم · #3 (**permalink**) 28/07/2008, 04:14 AM

ربي يخليك أخوووي ظبياني

منور الصفحة بمرورك العطر

NaDeR · #4 (**permalink**) 19/08/2008, 07:24 PM

عافاك رربي خيوو يوننسسس

مشكور وماقصررت

تقبل مروري

أخــ يونس ــوكم · #5 (**permalink**) 22/08/2008, 07:13 PM

أهلا بك أخووي نادر

أدوات الموضوع
مشاهدة صفحة طباعة الموضوع أرسل هذا الموضوع إلى صديق