السلام عليكم
عندي استفسار، عندي موقع لقراءة القران ارغب كما يلي اذا في امكانية لتطبيق ذلك، عند تأشير الفارة على الاية يتم تلوينها بلون مغاير وهذا النص بكون بين رقمين بين الايات هل من طريقة لتطبيق ذلك او صعب؟
كود واحد اضعه يتم تطبيقه على كل الايات.
نص بين رقمين من عدة نصوص وارقام ارغب بتلوين النص عند التأشير عليه
مرحبا، يمكنك القيام بذلك باستخدام HTML وCSS، مع بعض الجافا سكريبت، بحيث تقوم بتقسيم السور لديك على حسب الآيات و تكون كل آية في span لوحدها بعدها تطبق عليها بإستخدام الجافا سكريبت، هذا مثال بسيط لسورة الفلق لتفهم الشرح أكثر:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.highlighted {
background-color: #FFFF00; /* يمكنك استخدام أي لون تفضله */
}
</style>
</head>
<body>
<div id="quran">
<span id="verse1" onmouseover="highlightVerse(1, 2)" onmouseout="removeHighlight(1, 2)">قُلۡ أَعُوذُ بِرَبِّ ٱلۡفَلَقِ (1)</span>
<span id="verse2" onmouseover="highlightVerse(2, 2)" onmouseout="removeHighlight(2, 2)">مِن شَرِّ مَا خَلَقَ (2)</span>
<span id="verse3" onmouseover="highlightVerse(3, 2)" onmouseout="removeHighlight(3, 2)">وَمِن شَرِّ غَاسِقٍ إِذَا وَقَبَ (3)</span>
<span id="verse4" onmouseover="highlightVerse(4, 2)" onmouseout="removeHighlight(4, 2)">وَمِن شَرِّ ٱلنَّفَّٰثَٰتِ فِي ٱلۡعُقَدِ (4)</span>
<span id="verse5" onmouseover="highlightVerse(5, 2)" onmouseout="removeHighlight(5, 2)">وَمِن شَرِّ حَاسِدٍ إِذَا حَسَدَ (5)</span>
</div>
<script>
function highlightVerse(start, end) {
for (let i = start; i <= end; i++) {
document.getElementById('verse' + i).classList.add('highlighted');
}
}
function removeHighlight(start, end) {
for (let i = start; i <= end; i++) {
document.getElementById('verse' + i).classList.remove('highlighted');
}
}
</script>
</body>
</html>
بارك الله فيك لكن اخي الكريم انا اريد طريقة انه يتم تحديد النص بين اي رقمين داخل فقرة ويتم تلوينه عند مرور الفارة فوقه
يمكنك تحقيق ولكن يعتمد على الهيكيلة الخاصة بك في ال html . يمكننا استخدام نصوص الآيات مباشرة وتحديدها باستخدام jQuery. إليك مثال على ذلك ويمكنك تعديله حسب المشروع لديك:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* أسلوب لتحديد لون الخلفية عند تحديد النص */
.highlight {
background-color: yellow;
}
</style>
<title>موقع قراءة القرآن</title>
</head>
<body>
<div id="quran-text">
<!-- إضافة الآيات هنا -->
<span class="verse">الآيه الأولى</span>
<span class="verse">الآية الثانية</span>
<!-- وهكذا يمكنك إضافة المزيد من الآيات -->
</div>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
// حدث تأثير التحديد عند تحريك الماوس
$(document).ready(function() {
$('.verse').hover(
function() {
// تطبيق اللون عند تحديد النص
$(this).addClass('highlight');
},
function() {
// إزالة اللون عند إزالة التحديد
$(this).removeClass('highlight');
}
);
});
</script>
</body>
</html>
بهذا الشكل، يتم تحديد النصوص داخل العنصر div مباشرة دون الحاجة إلى .
بارك الله فيك لكن اخي الكريم انا اريد طريقة انه يتم تحديد النص بين اي رقمين داخل فقرة ويتم تلوينه عند مرور الفارة فوقه
وعليكم السلام، أهلا بك صديقي.
يمكنك ذلك بالطبع. سأقترح حلا أبسط بواسطة React ولكن يمكنك تطبيق ذات الفكرة بلغة ال JS أو أي اطار عمل تريد، وهذه هي الخطوات:
- عرف مصفوفة تحوي الايات القرانية التي تريد، وذلك لعدم كتابة كل اية في span او div يدويا مما يصعب ادخال او تعديل الايات في حال لزم ذلك.
- قم بالمرور على عناصر المصفوفة (الايات) واعرض div لكل اية يحوي class موحد يسمى aya ويحوي توابع تعمل عند وصول مؤشر الفأرة عليه وعند خروجها.
- عند مرور المؤشر على عنصر احصل على ال index (الترتيب) الخاص به لكي يتفعل تابع اللمس ويبحث عن العنصر الذي يحوي ال class المسى aya بالترتيب الذي حصلنا عليه وتغيير لونه، ومن ثم عند ازالة المؤشر سيتم البحث على ذات العنصر لتغيير اللون الى الطبيعي.
أي أنه سيتم عرض الايات وبعدها عند لمس اية معينة سيتم تخزين رقمها، ومن ثم البحث على الاية التي تحوي نفس الرقم وتغيير لونها، وعند ازالة الفأرة سيتم البحث على نفس الاية واعادة لونها للون الطبيعي.
const array = [
"انا اعطيناك الكوثر",
"فصل لربك وانحر",
"ان شانئك هو الأبتر"
];
const handleMouseOn = (index) => {
document.querySelectorAll('.aya')[index].style.color = "green";
}
const handleMouseOff = (index) => {
document.querySelectorAll('.aya')[index].style.color = "inherit";
}
const YourComponent = () => (
<div>
{array.map((item, index) => (
<div className='aya' key={index} onMouseOver={() => handleMouseOn(index)} onMouseOut={() => handleMouseOff(index)}>
{item}
</div>
))}
</div>
);
export default YourComponent;
التعليقات