تحسين تفاعل المستخدم: تظليل الصورة وعرض أزرار التفاعل عند تحويم الماوس

عندما يتعلق الأمر بتحسين تجربة المستخدم على موقع الويب الخاص بك، يمكن أن يكون إضافة تأثيرات بصرية مثل تظليل الصورة وإظهار الأزرار عند تحويم الماوس فعالًا للغاية. يساعد هذا النوع من التصميم في جذب انتباه الزوار وجعل تفاعلهم مع الموقع أكثر إشراكًا. سأقدم لك نموذجًا بسيطًا لتحقيق هذه الفكرة باستخدام HTML وCSS، مع بعض اللمسات البسيطة من جافا سكريبت.

ابدأ بتعريف هيكل الصفحة باستخدام HTML:

html
html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>تحسين تجربة المستخدمtitle>
  <link rel="stylesheet" href="styles.css">
head>
<body>

  <div class="image-container">
    <img src="https://i.stack.imgur.com/VE7dR.png" alt="صورة">
    <div class="overlay">
      <button class="btn" onclick="redirectToGoogle()">زر 1button>
      <button class="btn" onclick="redirectToGoogle()">زر 2button>
      <button class="btn" onclick="redirectToGoogle()">زر 3button>
      <p class="description">وصف الصورةp>
    div>
  div>

  <script src="script.js">script>
body>
html>

الآن، قم بتحديد الأنماط باستخدام CSS في ملف styles.css:

css
body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
}

.image-container {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

img {
  width: 100%;
  height: auto;
  display: block;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.btn {
  background-color: transparent;
  color: #fff;
  border: 2px solid #fff;
  padding: 10px 20px;
  margin: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn:hover {
  background-color: #fff;
  color: #000;
}

.description {
  color: #fff;
  margin-top: 10px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

أخيرًا، استخدم جافا سكريبت في ملف script.js لتحديث العناصر عند التحويم:

javascript
const imageContainer = document.querySelector('.image-container');
const overlay = document.querySelector('.overlay');

imageContainer.addEventListener('mouseenter', () => {
  overlay.style.opacity = 1;
});

imageContainer.addEventListener('mouseleave', () => {
  overlay.style.opacity = 0;
});

function redirectToGoogle() {
  window.location.href = 'https://www.google.com';
}

هذا الكود يضمن تظليل الصورة وظهور الأزرار ونص الوصف عند تحويم الماوس. كما يتيح لك الانتقال إلى URL محدد عند النقر على أحد الأزرار. يمكنك تخصيص الألوان والنصوص والأنماط حسب احتياجات موقعك لتحقيق تجربة مستخدم مميزة وجذابة.

المزيد من المعلومات

حل مشكلة مقارنة السلاسل في جافا: دليل تصحيح الأخطاء

ترتيب مصفوفة التواريخ في لغة R: البداية بالتواريخ الأقدم أولاً