مشخصات مقاله
آموزش ساخت تصاویر کوچک Thumbnail
آموزش ساخت تصاویر کوچک Thumbnail
در این مقاله می آموزید که چطور با استفاده از CSS و Html تصویر کوچک ( بند انگشتی) ایجاد کنید.
تصویر کوچک ( بند انگشتی )
تصویر کوچک ، تصویری است که هنگامی که بر روی آن کلیک کنید تصویر بزرگتر را نشان میدهد و اغلب توسط حاشیه های اطراف آن مشخص میگردد.
چطور یک تصویر کوچک ایجاد کنیم
از مولفه img استفاده کنید و مولفه a را قبل و بعد از آن قرار دهید.توسط border به تصویر فرم دهید و افکت هاور را به آن اضافه کنید:
مثال :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | < style > img { border: 1px solid #ddd; /* Gray border */ border-radius: 4px; /* Rounded border */ padding: 5px; /* Some padding */ width: 150px; /* Set a small width */ } /* Add a hover effect (blue shadow) */ img:hover { box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5); } </ style > </ a > < button ></ button > |
نمونه مثال Thumbnail Image:
1 2 3 4 5 6 7 8 | <p><h2>Thumbnail Image</h2><br> <p>برای بزرگنمایی بر روی تصویر کلیک کنید</p></p> <img src= "http://articles.tahlildadeh.com/image.axd?picture=webads.jpg" alt= "web-design" style= "width:150px" ><br> </a><br> </p> <button></button> |
خروجی Thumbnail Image

1400/01/19
4165
450
رمز عبور : tahlildadeh.com یا www.tahlildadeh.com