کار با تصاویر روی صفحات وب

[bakhshahin]

سلام دوستان. چگونه میتوان با استفاده از html و css کدی نوشت که با استفاده از آن با کلیک بر روی یک تصویر (از میان چند تصویر با اندازه 150*150 پیکسل) آن تصویر در قسمتی از همان صفحه نمایش داده شود (نه پنجره جدیدی باز شود و نه pop up) ولی با اندازه بزرگتر (مثلا در یک قاب) و سپس با کلیک بر روی تصویر دیگری (با اندازه 150*150 پیکسل) این تصویر جدید در همان قاب به جای تصویر قبلی بزرگ شده و نمایش داده شود.
با تشکر

[Moien Tajik]

با استفاده از jQuery :



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" />
<img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" />
<img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" />
<img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" />
<img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" />
<img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" />
<img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" />


<style>
img {
width: 50px;
height: auto;
}


.clicked {
width: auto;
}
</style>





<script>
$('img').click(function() {
$(this).toggleClass('clicked');
});
</script>