it-swarm.asia

استبدال عناصر القائمة بالصور

أنا أبحث عن طريقة لعرض عناصر القائمة كصور (مع التمرير) بدلاً من روابط النص المعتادة. لقد وجدت الوحدة أيقونات القائمة ، ولكن كما يوحي الاسم ، فقد تم تصميمها لوضع الرمز بجوار الرابط. هل لدى أي شخص تقنية للقيام بذلك؟ ربما يتعين علي إنشاء نوع من الكتلة أو اللوحة المخصصة ، لكنني اعتقدت أنه ربما كانت هناك طريقة أسهل.

8
user379468

يمكنك استخدام الوحدة النمطية أيقونات القائمة لتنفيذ الوظيفة التي تبحث عنها - لقد قمت بذلك عدة مرات.

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

في ما يلي نموذج لمحتوى ملف menu_icon_css_item.tpl.php الذي استخدمته من قبل. هذا من أجل Drupal 6 ، لذلك قد يلزم تحديث بعض بناء الجملة إذا كنت تستخدم Drupal 7.

<?php
$base_url = $_SERVER['DOCUMENT_ROOT'];
$image_info = getimagesize($base_url.$path);
$width = $image_info[0];
$height = $image_info[1]/2;
?>

ul.links li.menu-<?php print $mlid ?> a {
  background-image: url(<?php print $path ?>);
  background-repeat: no-repeat;
  background-position: 0 0;
  height:<?php print $height?>px;
  text-align: left;
  text-indent: -9999px;
  width: <?php print $width?>px;
}

ul.links li.menu-<?php print $mlid ?> a:hover {
  background-position: 0 <?php print $height?>px;
}

بعد الانتهاء من إنشاء ملف menu_icons_css_item.tpl.php للعميل في السمة الخاصة بك ، ستحتاج إلى حذف ملف CSS الذي أنشأته وحدة أيقونات القائمة سابقًا ، بحيث يقوم بإنشاء ملف جديد باستخدام هذا القالب. يجب أن يكون في مجلد المواقع/الافتراضي/الملفات الخاصة بك.

بالطبع ، إذا كنت لا تحتاج إلى السماح لمسؤولي الموقع بتحديث صور عناصر القائمة عبر Drupal ، يمكنك فقط تنفيذ تقنية استبدال صورة CSS داخل السمة الخاصة بك ، دون الحاجة إلى وحدة مساعدة مثل أيقونات القائمة.

7
sheena_d