لتحقيق ما ترغب فيه من تغيير خلفية الـ div عند النقر عليها، يتعين عليك استخدام الجافا سكريبت. يمكن أن يساعدك ذلك في تحقيق التفاعل المطلوب دون الحاجة إلى إعادة تحميل الصفحة.
أولاً، يجب عليك تعريف وظيفة جافا سكريبت تتحقق عند النقر على الرابط. يمكنك القيام بذلك عن طريق إضافة مثلاً:
html<script>
function changeBackground(divId, newBackground) {
document.getElementById(divId).style.backgroundImage = "url(" + newBackground + ")";
}
script>
هذه الوظيفة تأخذ معرف الـ div ورابط الخلفية الجديد، وتقوم بتحديث خلفية الـ div بناءً على الرابط الجديد.
ثم، يجب عليك استدعاء هذه الوظيفة عند النقر على الرابط. يمكنك القيام بذلك عن طريق إضافة حدث onclick إلى كل رابط:
html<td><a href="../pages/index.php" onclick="changeBackground('dashboardDiv', '../images/new_background.png');"><div id="dashboardDiv" style="background:url(../images/home.png) no-repeat center;">div>a>td>
<td>td>
<td><a href="../pages/suppliers.php" onclick="changeBackground('suppliersDiv', '../images/new_background.png');"><div id="suppliersDiv" style="background:url(../images/Suppliers.png) no-repeat center;">div>a>td>
<td>td>
عند النقر على أي رابط، سيتم تنفيذ الوظيفة changeBackground مع تمرير معرف الـ div والرابط الجديد للخلفية.
أخيرًا، يمكنك تخصيص أنماط CSS لتمويه أو تحديث مظهر الخلفية الجديدة بحسب اختيارك.
هذا النهج يجعل تغيير خلفية الـ div عند النقر على الرابط ممكنًا بسهولة وبدون إعادة تحميل الصفحة، مما يوفر تجربة تفاعلية للمستخدم.
المزيد من المعلومات
بالتأكيد، سنقوم الآن بتوسيع المقال لتشمل معلومات إضافية وتفاصيل تقنية حول كيفية تنفيذ هذا السيناريو.
بما أنك ترغب في تغيير خلفية الـ div عند النقر على الرابط، يمكنك استخدام الجافا سكريبت لتحقيق هذا الغرض. هنا نموذج لكيفية القيام بذلك:
htmlhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Div Background on Clicktitle>
<style>
/* تخصيص أنماط CSS للعناصر */
#dashboardDiv {
border: thin;
float: left;
height: 133px;
width: 133px;
}
style>
head>
<body>
<table>
<tr>
<td><a href="../pages/index.php" onclick="changeBackground('dashboardDiv', '../images/new_background.png');"><div id="dashboardDiv" style="background:url(../images/home.png) no-repeat center;">div>a>td>
<td>td>
tr>
table>
<script>
function changeBackground(divId, newBackground) {
document.getElementById(divId).style.backgroundImage = "url(" + newBackground + ")";
}
script>
body>
html>
هذا الكود يقوم بعرض الروابط في جدول، حيث يحتوي كل رابط على div معرفة بـ ID محدد. عند النقر على أي رابط، يتم استدعاء الوظيفة changeBackground مع تمرير معرف الـ div ورابط الخلفية الجديدة. تقوم هذه الوظيفة بتحديث خلفية الـ div بناءً على الرابط الجديد.
هذه الطريقة تتيح لك تغيير خلفية الـ div بسهولة وفوراً عند النقر على الرابط، مما يسمح بتوفير تجربة مستخدم سلسة وتفاعلية دون إعادة تحميل الصفحة.
يمكنك أيضًا تخصيص أنماط CSS بحرية لتتناسب مع تصميم موقعك ومتطلباتك. ولا تنسَ أن تتبع أفضل الممارسات في تطوير الويب وضمان أن تكون صفحتك متوافقة مع مختلف المتصفحات والأجهزة.
