لود کردن عکس با آجاکس

[kamalhamidi]

سلام

من میخوام چندتا عکس رو با آجاکس روی فرم ام نمایش بدم! خب برای این کار جستجو کردم و کد زیر رو به دست آوردم:


<input type="button" onclick="example_ajax_request()" value="Click Me!" />
<div id="example-placeholder">
<p>Placeholding text</p>
</div>
<script>
function example_ajax_request() {
$('#example-placeholder').html('<p><img src="images/progress.gif" width="220" height="19" /></p>');
$('#example-placeholder').html('<p><img src="http://localhost/Site/uploads/images/Babies.gif"/></p>');
}
</script>


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

برای این کار من نتونستم کد بالا رو ویرایش کنم تا عکس جدید به جای عکس قدیمی لود بشه!

لذا خواستم ببینم کسی از دوستان میتونه کد بالا رو با اون چیزی که من میخوام ویرایش کنه!

تشکر... :قلب:

[ArtMiz]

كد بالا JQuery هستش، كتابخونش رو اضافه كن كار ميكنه

[ahmad.khaliq]

شما میتونید به کمک جاوا اسکریپت، آدرس عکس ها رو عوض کنید. وقتی آدرس عکس عوض میشه، بلا فاصله سیستم عکس جدید رو لود میکنه

برای اینکه آدرس یک عکس عوض بشه، باید ابتدا به اون عکس یک id بدید و سپس از کد زیر استفاده کنید:

document.getElementById('pictureid').src='newimage .jpg'

در مثال بالا، آدرس عکسی که اسم آی دی اون pictureid هست رو به مقدار جدید یعنی newimage.jpg تغییر میده. زمانی که آدرسش تغییر کرد، عکس جدید به صورت خودکار توسط مرورگر لود میشه.