نشان دادن بخشی از تصویر

[Salar.Shayegan]

سلام دوستان
آیا تابع یا سورسی وجود داره که با اون بشه فقط یه بخش کوچک مربع شکل از یک تصویر رو نشون داد؟
(آن را برای گالری عکس میخوام تا اول بخش کوچکی از تصویر باشه و با کلیک کردن روش، تمام تصویر روی صفحه باز بشه...)
اگر کسی می دونه لطفا" از من دریغ نکنه...
با تشــکر فراوان

[Javidhb]

راحتترین راه:
html:


<div id="imgContainer">
<div class="imgLimiter">
<img src="xxxxxxx" id="IMG">
</div>
</div>


css:


#imgContainer{
position:relative;
height:250px;
width: 500px;
}
.imgLimiter{
position:absolute;
clip:rect(50px 450px 200px 50px);
}


js:

var IMG = document.getElementById('IMG'); //انتخاب عکس

IMG.onmouseover = function(){
this.parentElement.removeAttribute('class'); //نمایش دادن کامل عکس
};

IMG.onmouseout = function(){
this.parentElement.setAttribute('class', 'imgLimiter'); //محدود کردن عکس
};


دمـو (http://jsfiddle.net/KjQd4/1/)

راجع به clip (https://developer.mozilla.org/en-US/docs/Web/CSS/clip)


یا میتونید از این راه (http://stackoverflow.com/a/14837947/2506043) استفاده کنید و با javascript مثلا بالا کلاس div رو اضاف کنید یا بردارید.

[afshin9032]

دنبال پلاگین zoom تصویر بگرد ، فکر می کنم بدردت بخوره .