مكبر الصورة الذكي بـ CSS

يناير 7th, 2012

1917مشاهدات

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

هناك حاجة إلى صورة واحدة فقط في كل حالة. رمز CSS يعمل بطريقة ينفي الحاجة إلى لتحديد أبعاد كل صورة مكبرة يدويا ، مما يوفر لك الكثير من الوقت. ويمكن أيضا إضافة وصفا نصيا يتم عرضه تحت كل صورة مكبرة.
لمشاهده ناتج هذا التأثير يرجي الضغط هنــــــــــــا

كود الــ CSS هذا ينبغي اضافته لديك في بدايه الصفحه :

[html]

/* 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>

[/html]

كود الــــ HTML كاملا :

[html]

<br style="clear:left" />
[/html]

Tags مكبر،صور،ذكي،سي،اس،اس،تو،css2

عن مدهش

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

اضف رد

انقر هنا لإلغاء الرد.