تحديث مسار src لصورة باستخدام JavaScript/JQuery
لتغيير مسار src لصورة في عنصر img
باستخدام JavaScript أو jQuery، يمكنك استخدام الطرق التالية:
استخدام JavaScript:
javascriptdocument.querySelector('.phone').src = '../img/template/iphone4.png';
هذا الكود يستخدم querySelector
للعثور على العنصر الذي يحمل الفئة .phone
ويقوم بتغيير مسار src إلى ../img/template/iphone4.png
.
-
تحسين try-with-resources في جافا07/02/2024
-
تحديد صفوف عشوائية في Apache Spark24/03/2024
-
إدراج مصفوفة 2D في MySQL بلغة Java03/02/2024
استخدام jQuery:
javascript$('.phone').attr('src', '../img/template/iphone4.png');
هذا الكود يستخدم jQuery لتحديد العنصر الذي يحمل الفئة .phone
ويستخدم attr
لتعيين قيمة src الجديدة.
تأكد من أن المسار الجديد ../img/template/iphone4.png
صحيح ويؤدي إلى الملف الصحيح.
يرجى ملاحظة أنه يجب تنفيذ هذا الكود بعد تحميل الصفحة بالكامل أو عندما تكون العناصر جاهزة للتفاعل.
المزيد من المعلومات
بالطبع! إضافةً إلى تغيير مسار src لصورة باستخدام JavaScript أو jQuery، يمكنك أيضًا القيام ببعض العمليات الإضافية. على سبيل المثال، يمكنك تحميل الصورة الجديدة قبل تبديل المسار src لتجنب أي فجوة في عرض الصورة. يمكنك استخدام حدث load
لتنفيذ العملية بعد تحميل الصورة الجديدة بنجاح. إليك كيف يمكنك القيام بذلك:
استخدام JavaScript:
javascriptvar newImage = new Image();
newImage.onload = function() {
document.querySelector('.phone').src = newImage.src;
};
newImage.src = '../img/template/iphone4.png';
هذا الكود ينشئ صورة جديدة newImage
ويحدد دالة onload
التي ستُشغَّل عندما تحمل الصورة بنجاح. بعد ذلك، يتم تعيين مسار src الجديد لعنصر img
الموجود بالفعل في الصفحة.
استخدام jQuery:
javascriptvar newImage = $('');
newImage.on('load', function() {
$('.phone').replaceWith(newImage);
});
newImage.attr('src', '../img/template/iphone4.png');
هذا الكود ينشئ عنصر img
جديدًا newImage
باستخدام jQuery، ويحدد حدث load
لتنفيذ العملية بعد تحميل الصورة بنجاح. بعد ذلك، يتم استبدال العنصر img
القديم بالعنصر img
الجديد في الصفحة.