كود رائع لتكبير مصغرات الصور بمرور الماوس Image Enlarger

بسم الله الرحمن الرحيم

والصلاة والسلام على أشرف المرسلين

سيدنا محمد وعلى آله وصحبه أجمعين

إضافة رائعة مناسبة للمواقع التى تعرض صور (جاليرى) أو المواقع الخاصة بالتسوق عبر الإنترنت

وقد قدمت من قبل كود Html بسيط لتكبير الصورة وكود آخر Css أكثر إحترافية كما عرضت طرق مختلفة لعمل عروض جداول الصور

أما هذا الكود المميز فهو طريقة ذكية لزيادة أبعاد الصور بمجرد مرور الماوس على مصغرات الصور.

صورة واحدة فقط نحتاجها فى هذه الحالة وهذا ما يميز الكود بعكس ما كان يطبق فى أكواد Css من تجهيز صورتين واحدة مصغرة وواحدة أخرى بأبعاد أخرى أكبر قليلا تظهر بمرور مؤشر الماوس. فهذا الكود يوفر الوقت والجهد الذى كان يحدث سابقا.

من مميزات هذا الكود أيضا هو إمكانيا إضافة نص يظهر تحت الصورة .
بالإضافة إلى ذلك هو إمكانية إضافة رابط على النص والصورة المكبرة تؤدى إلى صفحة ويب أخرى
الصورة الكبرى تظهر معها إطار أو خلفية بلون أسود لتوضيح وتحديد الصورة.

يمكن تجربة الإضافة

طريقة التركيب على مدونات بلوجر:
إنسخ الكود التالى إلى موقعك
 

  <style type="text/css">

/* smart image enlarger starts here */
/* If your images are not linking to other pages leave the links as <a href="#nogo"> Otherwise enlarger won't work in IE6 */

.ienlarger {
 float: left;
 clear: none; /* set to left or right if needed */
 padding-bottom: 5px; /* space between thumbs. Don't change this to margin */
 padding-right: 5px; /* space between thumbs and wrapping text when there is any text around it */
}

.ienlarger a { 
 display:block;
 text-decoration: none;
/* add cursor:default; to this rule to disable the hand cursor */
}

.ienlarger a:hover{ /* don't move this positioning to normal state */
  position:relative;
}

.ienlarger span img {
 border: 1px solid #FFFFFF; /* adds a border around the image */
 margin-bottom: 8px; /* pushes the text down from the image */
}

.ienlarger a span {  /* this is for the large image and the caption */
 position: absolute;
 display:none;
 color: #FFCC00; /* caption text colour */
 text-decoration: none;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px; /* caption text size */
 background-color: #000000;
 font-weight: bold;
 padding-top: 10px;
 padding-right: 10px;
 padding-bottom: 13px;
 padding-left: 10px;
}

.ienlarger img { /* leave or IE puts a border around links */
border-width: 0;
}

.ienlarger a:hover span { 
 display:block;
 top: 50px; /* means the pop-up's top is 50px away from thumb's top */
 left: 90px; /* means the pop-up's left is 90px far from the thumb's left */
 z-index: 100;
 
/* If you want the pop-up open to the left of thumb, remove the left: 90px; and add  
right: 90px; This would mean the right side of the pop-up is 90px far from the right side of thumb */ 

/* If you want the pop-up open above the thumb, remove the top: 50px; and add  
bottom: 50px; This would mean the bottom of the pop-up is 50px far from the bottom of thumb */ 

/* add cursor:default; to this rule to disable the hand cursor only for the large image */
}

.resize_thumb {
 width: 150px; /* enter desired thumb width here */
 height : auto;
}

/* smart image enlarger ends here */

</style>

  <div class="ienlarger"><a href="http://www.condaianllkhir.com/"><img src="http://img406.imageshack.us/img406/4920/63734582.jpg" alt="thumb" class="resize_thumb" /><span>
    <img src="http://img406.imageshack.us/img406/4920/63734582.jpg" alt="large" /><br />
    Some text can go here.</span></a></div>

  <div class="ienlarger"><a href="http://www.condaianllkhir.com/"><img src="http://img257.imageshack.us/img257/1926/92628379.jpg" alt="thumb" class="resize_thumb" /><span>
    <img src="http://img257.imageshack.us/img257/1926/92628379.jpg" alt="large" /><br />
    Some text can go here.</span></a></div>

  <div class="ienlarger"><a href="http://www.condaianllkhir.com/"><img src="http://img442.imageshack.us/img442/6325/87011940.jpg" alt="thumb" class="resize_thumb" /><span>
    <img src="http://img442.imageshack.us/img442/6325/87011940.jpg" alt="large" /><br />
    Some text can go here.</span></a></div>

  <div class="ienlarger"><a href="#nogo"><img src="http://img691.imageshack.us/img691/7360/89815502.jpg" alt="thumb" class="resize_thumb" /><span>
    <img src="http://img691.imageshack.us/img691/7360/89815502.jpg" alt="large" /><br />
    Some text can go here.</span></a></div>

 <br style="clear:left" />

هذا الكود يتم تطبيقه داخل الموضوع بمعنى أثناء تحرير الموضوع إنتقل إلى جهة تحرير HTML

ثم أضع روابط الصور بداخل هذا الكود

 المزيد من تأثيرات الصور بمواقع الويب

تنبيه : المرجوا عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا 

بقلم Dr.Rasha Omran

مطورة تطبيقات الهاتف ، سفيرة ببرنامج Women Techmakers التابع لجوجل ، أهتم بالمحتوى الرقمى وأحببت أن أدون كل ما تعلمته فى هذا الموقع للإفادة فى أعمال هادفة