X
تبلیغات
رایتل
آلبوم عکس ساده و جالب - کدهای حرفه ای وبلاگ و سایت
کدهای Css3 , JavaScript, PHP و HTML
آلبوم عکس ساده و جالب
جمعه 2 اردیبهشت 1390 ساعت 21:41 | نوشته ‌شده به دست ایمان فـخــار

امروز قصد دارم ساخت یک البوم عکس ساده و در غین حال کار آمد رو آموزش بدم
شما به وسیله این آلبوم می تونید بجای عکس های بزرگ عکس هایی با اندازه کوچک و کم حجم را نمایش بدید و با قرار گرفتن موس روی عکس ها تصویر اصلی ظاهر  شود

به تصاویر زیر دقت کنید


آموزش در ادامه مطلب

برای این کار ابتدا عکس های سایز کوچک و بزرگ را در یک هاست سرویس ذخیره می کنید

بعد در صفحه دلخواه برای هر عکس یک لایه (div) ایجاد می کنید با کلاس (ienlarger) و عکس های کوچک و بیزرگ را مانند نمونه زیر در محل قرار می دید:

<div class="ienlarger"><a href="آدرس لینک مورد نظرتون">
        <img src="آدرس عکس کوچک" alt="thumb" class="resize_thumb" /><span>
        <img src="آدرس عکس بزرگ" alt="large" /><br />
            توضیحات دلخواه  </span></a></div>

حالا کدهای زیر رو در بخش کدهای CSS یا داخل تگ Style مانند نمونه زیر قرار می دید:

<style type="text/css">
.ienlarger { float: left;clear: none; padding-bottom: 5px;padding-right: 5px;}
.ienlarger a { display:block; text-decoration: none;}
.ienlarger a:hover{ position:relative;}
.ienlarger span img {border: 1px solid silver; margin-bottom: 8px; }
.ienlarger a span { direction:rtl;position: absolute; display:none;color: #FFCC00; text-decoration: none;font-family: Arial, Helvetica, sans-serif;font-size: 13px;background-color: #000000;font-weight: bold;padding-top: 10px;padding-right: 10px;padding-bottom: 13px;padding-left: 10px;}
.ienlarger img {border-width: 0;}
.ienlarger a:hover span {display:block;top: 50px; left: 90px;z-index: 100;}
.resize_thumb {width: 100px;height : 112px;}
</style>
چاپ این مطلب: کلیک کنید

(0 لایک)
نظرات (2)
شنبه 26 فروردین 1391 ساعت 02:50
سلام
آقا واقعا دمتون گرم
فقط اگه امکان داره بیشتر توضیح بدید
من مبتدیم ، متوجه نشدم
امتیاز: 0 0
چهارشنبه 18 مرداد 1391 ساعت 11:48
سلام
آلبومه قشنگی میشه اما میشه نحوه ی استفادشو برام توضیح بدبد :-(
پاسخ:
سلام نحوه ی استفاده که کاملا مشخصه منطورتون رو نگرفتم
برای نمایش آواتار خود در این وبلاگ در سایت Gravatar.com ثبت نام کنید. (راهنما)
نام :
پست الکترونیک :
وب/وبلاگ :
ایمیل شما بعد از ثبت نمایش داده نخواهد شد
 
ابر برجسب
آمار
بازدیدکنندگان : 304152